[{"_1":2,"_378":-5,"_379":-5},"loaderData",{"_3":4},"routes/present",{"_5":6,"_7":8},"deckKey","luagate/data-format-intro","slides",[9,23,36,50,64,90,116,123,134,141,152,158,173,179,190,196,237,258,264,275,281,307,317,336,347,354,372],{"_10":11,"_12":13,"_14":15,"_13":16,"_17":18,"_19":20,"_21":22},"id",1,"type","title","cover",true,"データ形式 JSON・XML・YAML","subtitle","データをやり取りする形〜共通の書き方〜","category","データ形式入門","theme","light",{"_10":24,"_12":25,"_13":26,"_19":20,"_27":28,"_29":30,"_21":22},2,"toc","目次","heading","今日の流れ","items",[31,32,33,34,35],"1. データをやり取りする形式とは","2. CSV と XML — 昔からある書き方","3. JSON — APIの定番フォーマット","4. YAML と3形式の比較・使いどころ","5. まとめと振り返り",{"_10":37,"_12":38,"_13":39,"_19":40,"_41":42,"_43":44,"_21":22},10,"content","今日のゴール","データ形式入門 - イントロ","description","この時間で身につけてほしいことです。代表的なデータ交換フォーマットを理解しましょう。","bullets",[45,46,47,48,49],"データを「共通の書き方」で渡す意味が分かる","CSV・XML・JSON・YAMLの特徴が分かる","JSONの基本的な書き方が読める","それぞれの使いどころをイメージできる","同じデータが形を変えて表せると分かる",{"_10":51,"_12":52,"_13":53,"_19":40,"_41":54,"_55":56,"_52":57,"_58":59},11,"definition","データ形式とは","プログラム同士がデータを受け渡すときの「共通の書き方」のことです。","term","データ交換フォーマット","異なるプログラムやシステムの間でデータを渡すための、決められた書き方のこと。送る側と受け取る側が同じルールで読み書きするから、内容が正しく伝わる。","details",[60,61,62,63],"人もプログラムも読める文字の並び","送る側と受け取る側で書き方を統一する","以前学んだAPIは、この形式でデータを返す","言語やOSが違ってもやり取りできる",{"_10":65,"_12":66,"_13":67,"_19":40,"_41":68,"_66":69,"_21":22},12,"cards","宅配便の伝票にたとえると","データ形式は、宅配便の伝票のように「決まった欄に決まった情報を書く」しくみに似ています。",[70,78,84],{"_27":71,"_72":73,"_43":74},"伝票の様式","icon","file-text",[75,76,77],"名前・住所・品名の欄","誰が見ても読める書き方","これがデータ形式",{"_27":79,"_72":80,"_43":81},"送る人","upload",[82,83],"欄を埋めて荷物を出す","これがデータを作る側",{"_27":85,"_72":86,"_43":87},"受け取る人","download",[88,89],"同じ欄を読んで処理","これがデータを使う側",{"_10":91,"_12":66,"_13":92,"_19":40,"_41":93,"_66":94,"_21":22},13,"代表的な4つの形式","今日学ぶ4つの形式を、ざっくり一言で押さえておきましょう。",[95,102,109],{"_27":96,"_72":97,"_43":98},"CSV","grid",[99,100,101],"カンマ区切りの表","表計算と相性が良い","シンプルで軽い",{"_27":103,"_72":104,"_43":105},"XML / JSON","code",[106,107,108],"入れ子の構造を表せる","JSONはAPIの定番","Webで広く使われる",{"_27":110,"_72":111,"_43":112},"YAML","settings",[113,114,115],"設定ファイル向き","人が書きやすい","インデントで構造を表す",{"_10":117,"_12":13,"_13":118,"_17":119,"_120":121,"_19":122,"_21":22},20,"第2部 CSV と XML","昔からある2つの書き方","section","2","データ形式入門 - 基礎",{"_10":124,"_12":52,"_13":125,"_19":122,"_41":126,"_55":127,"_52":128,"_58":129},21,"CSV とは","値をカンマで区切って並べる、表のような形式です。とてもシンプルです。","CSV（シーエスブイ / Comma-Separated Values）","1行が1件のデータで、項目をカンマで区切って並べる形式。表計算ソフトでそのまま開けるほどシンプルで、データの一覧をやり取りするのに向く。",[130,131,132,133],"1行 = 1件のデータ","項目はカンマで区切る","先頭行に見出しを書くことが多い","入れ子の複雑な構造は表しにくい",{"_10":135,"_12":104,"_13":136,"_19":122,"_41":137,"_138":139,"_104":140,"_21":22},22,"CSV の書き方","1行目が見出し、2行目以降がデータです。表計算ソフトで開くとそのまま表になります。","language","text","id,name,email,active\n1,田中太郎,taro@example.com,true\n2,鈴木花子,hanako@example.com,false",{"_10":142,"_12":52,"_13":143,"_19":122,"_41":144,"_55":145,"_52":146,"_58":147},23,"XML とは","タグでデータを囲んで、入れ子の構造を表す形式です。HTMLの仲間です。","XML（エックスエムエル / eXtensible Markup Language）","開きタグと閉じタグでデータを囲んで表す形式。タグを入れ子にして複雑な構造も表せるが、タグが多く文字量が増えやすい。",[148,149,150,151],"開きタグと閉じタグで値を囲む","タグの名前を自由に決められる","入れ子で階層構造を表せる","記述が冗長になりやすい",{"_10":153,"_12":104,"_13":154,"_19":122,"_41":155,"_138":156,"_104":157,"_21":22},24,"XML の書き方","開きタグと閉じタグで値を挟みます。同じ情報でもタグが増えるぶん長くなります。","xml","\n 1\n 田中太郎\n taro@example.com\n true\n",{"_10":159,"_12":160,"_13":161,"_19":122,"_41":162,"_43":163,"_169":170,"_171":172,"_21":22},25,"content-image","形を変えても中身は同じ","同じ「ユーザー1人の情報」でも、形式が違えば見た目が変わります。中身の意味は同じです。",[164,165,166,167,168],"表したい中身はどの形式でも同じ","CSVは表、XMLはタグで表す","読み手のプログラムが形式を解釈する","用途に合う形式を選ぶのが大事","次はWebの定番JSONを見ていく","imageSrc","/assets/illust-multilang-code.svg","imagePosition","right",{"_10":174,"_12":13,"_13":175,"_17":176,"_120":177,"_19":178,"_21":22},30,"第3部 JSON","APIの定番フォーマット","3","データ形式入門 - JSON",{"_10":180,"_12":52,"_13":181,"_19":178,"_41":182,"_55":183,"_52":184,"_58":185},31,"JSON とは","「名前と値」の組み合わせでデータを表す、Webで最もよく使われる形式です。","JSON（ジェイソン / JavaScript Object Notation）","波かっこの中に「名前と値」の組を並べてデータを表す形式。XMLより軽くて読みやすく、Web APIのやり取りで定番として使われている。",[186,187,188,189],"以前学んだREST APIはJSONを返すことが多い","名前と値の組でデータを表す","入れ子や配列も表せる","人もプログラムも読みやすい",{"_10":191,"_12":104,"_13":192,"_19":178,"_41":193,"_138":194,"_104":195,"_21":22},32,"JSON の書き方","波かっこの中に「名前と値」を並べます。配列は角かっこ、入れ子もそのまま表せます。","json","{\n \"id\": 1,\n \"name\": \"田中太郎\",\n \"email\": \"taro@example.com\",\n \"active\": true,\n \"tags\": [\"admin\", \"editor\"]\n}",{"_10":197,"_12":198,"_13":199,"_19":178,"_41":200,"_201":202,"_205":206,"_208":209,"_21":22},33,"table","JSONで使える値の種類","JSONはいくつかの種類の値を表せます。よく使う型を押さえておきましょう。","headers",[203,204],"意味","書き方の例","headerIcons",[207,104],"info","rows",[210,217,222,227,232],{"_211":212,"_213":214},"label","文字列","cells",[215,216],"文字をダブルクォートで囲む","\"田中太郎\"",{"_211":218,"_213":219},"数値",[220,221],"クォート無しの数","132",{"_211":223,"_213":224},"真偽値",[225,226],"true か false","true",{"_211":228,"_213":229},"配列",[230,231],"角かっこで値を並べる","[\"a\", \"b\"]",{"_211":233,"_213":234},"オブジェクト",[235,236],"波かっこで入れ子にする","{ \"city\": \"東京\" }",{"_10":238,"_12":239,"_13":240,"_19":178,"_41":241,"_242":243,"_250":251,"_21":22},34,"before-after","XML と JSON を比べる","同じ情報でも、JSONの方が短くすっきり書けます。これがWebで好まれる理由の一つです。","before",{"_27":244,"_43":245},"XML（タグで囲む）",[246,247,248,249],"開きタグと閉じタグが必要","同じ名前を2回書く","文字量が多くなりやすい","田中のように書く","after",{"_27":252,"_43":253},"JSON（名前と値の組）",[254,255,256,257],"名前は1回だけ","かっこと記号でコンパクト","読み書きしやすい","\"name\": \"田中\" のように書く",{"_10":259,"_12":13,"_13":260,"_17":261,"_120":262,"_19":263,"_21":22},40,"第4部 YAMLと使いどころ","設定向きの形式と選び方","4","データ形式入門 - 実践",{"_10":265,"_12":52,"_13":266,"_19":263,"_41":267,"_55":268,"_52":269,"_58":270},41,"YAML とは","インデント（字下げ）で構造を表す、人が書きやすい形式です。設定ファイルでよく使われます。","YAML（ヤムル / YAML Ain't Markup Language）","かっこを使わず、行頭の字下げ（インデント）で階層を表す形式。記号が少なく人が読み書きしやすいため、設定ファイルでよく使われる。",[271,272,273,274],"かっこの代わりに字下げで構造を表す","名前と値はコロンで区切る","記号が少なく読みやすい","設定ファイルやCI設定で定番",{"_10":276,"_12":104,"_13":277,"_19":263,"_41":278,"_138":279,"_104":280,"_21":22},42,"YAML の書き方","字下げで階層を表します。配列はハイフンで並べます。設定ファイルでよく見る形です。","yaml","id: 1\nname: 田中太郎\nemail: taro@example.com\nactive: true\ntags:\n - admin\n - editor",{"_10":282,"_12":198,"_13":283,"_19":263,"_41":284,"_201":285,"_205":288,"_208":290,"_21":22},43,"3形式の使いどころ","どの形式も万能ではありません。向き不向きを知って選ぶことが大事です。",[286,287],"向いている用途","ひとこと",[289,207],"target",[291,294,299,304],{"_211":96,"_213":292},[293,100],"表データの受け渡し",{"_211":295,"_213":296},"XML",[297,298],"厳密な文書や旧来の連携","堅いが冗長",{"_211":300,"_213":301},"JSON",[302,303],"Web APIのやり取り","軽くて定番",{"_211":110,"_213":305},[306,114],"設定ファイル",{"_10":308,"_12":38,"_13":309,"_19":263,"_41":310,"_43":311,"_21":22},44,"復習文字コードの注意","以前学んだ文字コードを思い出すと、データ形式でも同じ落とし穴があります。",[312,313,314,315,316],"日本語を含むデータは文字コードに注意","送る側と受け取る側で同じ文字コードに揃える","ずれると文字化けが起きる","Webでは UTF-8 が標準的によく使われる","CSVを表計算で開くときも文字コード指定に注意",{"_10":318,"_12":319,"_13":320,"_19":263,"_41":321,"_322":323,"_332":333,"_334":335,"_21":22},45,"bar-chart","同じ情報を表すときの文字量（イメージ）","同じ1件のデータを表すのに必要な文字量の傾向です。あくまでイメージです。","data",[324,327,329,331],{"_211":96,"_325":326},"value",4,{"_211":300,"_325":328},7,{"_211":110,"_325":330},6,{"_211":295,"_325":65},"unit","文字量(イメージ)","source","形式ごとの記述量の傾向を示す概念図（概算）",{"_10":337,"_12":338,"_13":339,"_19":340,"_41":341,"_342":343,"_344":345},50,"quiz","振り返りクイズ","データ形式入門 - まとめ","今日の内容を確認しましょう。","question","Web APIのやり取りで定番として使われ、名前と値の組でデータを表す形式はどれ？","choices",[96,295,300,346],"ZIP",{"_10":348,"_12":349,"_13":350,"_19":340,"_41":351,"_342":343,"_344":352,"_353":24,"_21":22},51,"quiz-answer","振り返りクイズ解答","JSONは波かっこの中に名前と値の組を並べる形式で、XMLより軽く読みやすいため、Web APIのやり取りで定番として使われています。正解はJSONです。",[96,295,300,346],"correctIndex",{"_10":355,"_12":66,"_13":356,"_19":340,"_41":357,"_66":358,"_21":22},52,"質疑・次回予告","今日のまとめと、次に学ぶテーマです。質問があればここで受け付けます。",[359,366],{"_27":360,"_72":361,"_43":362},"今日のおさらい","check-circle",[363,364,365],"データ形式は共通の書き方","JSONはWeb APIの定番","YAMLは設定ファイル向き",{"_27":367,"_72":368,"_43":369},"次回予告","arrow-right-circle",[370,371],"API設計の原則〜使いやすいAPIとは〜","RESTfulな設計を学ぶ",{"_10":373,"_12":374,"_13":375,"_19":340,"_374":376,"_334":20,"_21":377},53,"quote","まとめ","データ形式は「共通の伝票」。中身が同じでも、CSV・XML・JSON・YAMLと形を変えられる。用途に合う書き方を選べば、言語もOSも違うシステム同士がきれいにつながります。","accent","actionData","errors"]