ゆめさくコード

データ形式 JSON・XML・YAML

luagate/data-format-introデータ形式入門27 枚Web 開発
スライド103触れる図解124レッスンの導入6

上から下へ、全 27 枚そのまま並べています。

発表モードで開く

データ形式入門

データ形式 JSON・XML・YAML

データをやり取りする形 〜共通の書き方〜

1
1

目次

今日の流れ

1. データをやり取りする形式とは

2. CSV と XML — 昔からある書き方

3. JSON — APIの定番フォーマット

4. YAML と3形式の比較・使いどころ

5. まとめと振り返り

2
2
データ形式入門 - イントロ

今日のゴール

この時間で身につけてほしいことです。代表的なデータ交換フォーマットを理解しましょう。

  • データを「共通の書き方」で渡す意味が分かる
  • CSV・XML・JSON・YAMLの特徴が分かる
  • JSONの基本的な書き方が読める
  • それぞれの使いどころをイメージできる
  • 同じデータが形を変えて表せると分かる
10
3
データ形式入門 - イントロ

データ形式 とは

プログラム同士がデータを受け渡すときの「共通の書き方」のことです。

データ交換フォーマット

異なるプログラムやシステムの間でデータを渡すための、決められた書き方のこと。送る側と受け取る側が同じルールで読み書きするから、内容が正しく伝わる。

・人もプログラムも読める文字の並び

・送る側と受け取る側で書き方を統一する

・以前学んだAPIは、この形式でデータを返す

・言語やOSが違ってもやり取りできる

11
4
データ形式入門 - イントロ

宅配便の伝票にたとえると

データ形式は、宅配便の伝票のように「決まった欄に決まった情報を書く」しくみに似ています。

伝票の様式
  • 名前・住所・品名の欄
  • 誰が見ても読める書き方
  • これがデータ形式
送る人
  • 欄を埋めて荷物を出す
  • これがデータを作る側
受け取る人
  • 同じ欄を読んで処理
  • これがデータを使う側
12
5
データ形式入門 - イントロ

代表的な4つの形式

今日学ぶ4つの形式を、ざっくり一言で押さえておきましょう。

CSV
  • カンマ区切りの表
  • 表計算と相性が良い
  • シンプルで軽い
XML / JSON
  • 入れ子の構造を表せる
  • JSONはAPIの定番
  • Webで広く使われる
YAML
  • 設定ファイル向き
  • 人が書きやすい
  • インデントで構造を表す
13
6

データ形式入門 - 基礎

2

第2部 CSV と XML

昔からある2つの書き方

20
7
データ形式入門 - 基礎

CSV とは

値をカンマで区切って並べる、表のような形式です。とてもシンプルです。

CSV（シーエスブイ / Comma-Separated Values）

1行が1件のデータで、項目をカンマで区切って並べる形式。表計算ソフトでそのまま開けるほどシンプルで、データの一覧をやり取りするのに向く。

・1行 = 1件のデータ

・項目はカンマで区切る

・先頭行に見出しを書くことが多い

・入れ子の複雑な構造は表しにくい

21
8
データ形式入門 - 基礎

CSV の書き方

・1行目が見出し、2行目以降がデータです。表計算ソフトで開くとそのまま表になります。

text
id,name,email,active
1,田中 太郎,taro@example.com,true
2,鈴木 花子,hanako@example.com,false
22
9
データ形式入門 - 基礎

XML とは

タグでデータを囲んで、入れ子の構造を表す形式です。HTMLの仲間です。

XML（エックスエムエル / eXtensible Markup Language）

開きタグと閉じタグでデータを囲んで表す形式。タグを入れ子にして複雑な構造も表せるが、タグが多く文字量が増えやすい。

・開きタグと閉じタグで値を囲む

・タグの名前を自由に決められる

・入れ子で階層構造を表せる

・記述が冗長になりやすい

23
10
データ形式入門 - 基礎

XML の書き方

・開きタグと閉じタグで値を挟みます。同じ情報でもタグが増えるぶん長くなります。

xml
<user>
  <id>1</id>
  <name>田中 太郎</name>
  <email>taro@example.com</email>
  <active>true</active>
</user>
24
11
データ形式入門 - 基礎

形を変えても中身は同じ

同じ「ユーザー1人の情報」でも、形式が違えば見た目が変わります。中身の意味は同じです。

  • 表したい中身はどの形式でも同じ
  • CSVは表、XMLはタグで表す
  • 読み手のプログラムが形式を解釈する
  • 用途に合う形式を選ぶのが大事
  • 次はWebの定番JSONを見ていく
25
12

データ形式入門 - JSON

3

第3部 JSON

APIの定番フォーマット

30
13
データ形式入門 - JSON

JSON とは

「名前と値」の組み合わせでデータを表す、Webで最もよく使われる形式です。

JSON（ジェイソン / JavaScript Object Notation）

波かっこの中に「名前と値」の組を並べてデータを表す形式。XMLより軽くて読みやすく、Web APIのやり取りで定番として使われている。

・以前学んだREST APIはJSONを返すことが多い

・名前と値の組でデータを表す

・入れ子や配列も表せる

・人もプログラムも読みやすい

31
14
データ形式入門 - JSON

JSON の書き方

・波かっこの中に「名前と値」を並べます。配列は角かっこ、入れ子もそのまま表せます。

json
{
  "id": 1,
  "name": "田中 太郎",
  "email": "taro@example.com",
  "active": true,
  "tags": ["admin", "editor"]
}
32
15
データ形式入門 - JSON

JSONで使える値の種類

JSONはいくつかの種類の値を表せます。よく使う型を押さえておきましょう。

意味
書き方の例

文字列

文字をダブルクォートで囲む

"田中 太郎"

数値

クォート無しの数

132

真偽値

true か false

true

配列

角かっこで値を並べる

["a", "b"]

オブジェクト

波かっこで入れ子にする

{ "city": "東京" }

33
16
データ形式入門 - JSON

XML と JSON を比べる

・同じ情報でも、JSONの方が短くすっきり書けます。これがWebで好まれる理由の一つです。

XML（タグで囲む）

  • 開きタグと閉じタグが必要
  • 同じ名前を2回書く
  • 文字量が多くなりやすい
  • <name>田中</name> のように書く

JSON（名前と値の組）

  • 名前は1回だけ
  • かっこと記号でコンパクト
  • 読み書きしやすい
  • "name": "田中" のように書く
34
17

データ形式入門 - 実践

4

第4部 YAMLと使いどころ

設定向きの形式と選び方

40
18
データ形式入門 - 実践

YAML とは

インデント（字下げ）で構造を表す、人が書きやすい形式です。設定ファイルでよく使われます。

YAML（ヤムル / YAML Ain't Markup Language）

かっこを使わず、行頭の字下げ（インデント）で階層を表す形式。記号が少なく人が読み書きしやすいため、設定ファイルでよく使われる。

・かっこの代わりに字下げで構造を表す

・名前と値はコロンで区切る

・記号が少なく読みやすい

・設定ファイルやCI設定で定番

41
19
データ形式入門 - 実践

YAML の書き方

・字下げで階層を表します。配列はハイフンで並べます。設定ファイルでよく見る形です。

yaml
id: 1
name: 田中 太郎
email: taro@example.com
active: true
tags:
  - admin
  - editor
42
20
データ形式入門 - 実践

3形式の使いどころ

どの形式も万能ではありません。向き不向きを知って選ぶことが大事です。

向いている用途
ひとこと

CSV

表データの受け渡し

表計算と相性が良い

XML

厳密な文書や旧来の連携

堅いが冗長

JSON

Web APIのやり取り

軽くて定番

YAML

設定ファイル

人が書きやすい

43
21
データ形式入門 - 実践

復習 文字コードの注意

以前学んだ文字コードを思い出すと、データ形式でも同じ落とし穴があります。

  • 日本語を含むデータは文字コードに注意
  • 送る側と受け取る側で同じ文字コードに揃える
  • ずれると文字化けが起きる
  • Webでは UTF-8 が標準的によく使われる
  • CSVを表計算で開くときも文字コード指定に注意
44
22
データ形式入門 - 実践

同じ情報を表すときの文字量（イメージ）

同じ1件のデータを表すのに必要な文字量の傾向です。あくまでイメージです。

15 文字量(イメージ)129630
4文字量(イメージ)
7文字量(イメージ)
6文字量(イメージ)
12文字量(イメージ)
CSV
JSON
YAML
XML

出典: 形式ごとの記述量の傾向を示す概念図（概算）

45
23
データ形式入門 - まとめ
クイズ

振り返りクイズ

今日の内容を確認しましょう。

Web APIのやり取りで定番として使われ、名前と値の組でデータを表す形式はどれ？

A
CSV
B
XML
C
JSON
D
ZIP
50
24
データ形式入門 - まとめ
答え

振り返りクイズ 解答

Web APIのやり取りで定番として使われ、名前と値の組でデータを表す形式はどれ？

A
CSV
B
XML
C
JSON
D
ZIP

JSONは波かっこの中に名前と値の組を並べる形式で、XMLより軽く読みやすいため、Web APIのやり取りで定番として使われています。正解はJSONです。

51
25
データ形式入門 - まとめ

質疑・次回予告

今日のまとめと、次に学ぶテーマです。質問があればここで受け付けます。

今日のおさらい
  • データ形式は共通の書き方
  • JSONはWeb APIの定番
  • YAMLは設定ファイル向き
次回予告
  • API設計の原則 〜使いやすいAPIとは〜
  • RESTfulな設計を学ぶ
52
26
"

データ形式は「共通の伝票」。中身が同じでも、CSV・XML・JSON・YAMLと形を変えられる。用途に合う書き方を選べば、言語もOSも違うシステム同士がきれいにつながります。

— データ形式入門

53
27