APIについて調べていると、レスポンスの中に `{ “name”: “Taro” }` のような文字が出てきて、急に難しく感じることがあります。
この記事では、JSONを「データを整理して送るための書き方のルール」として見ていきます。
読み終わる頃には、JSONを見たときに「どこに何が書いてあるか」を追いやすくなります。
結論
一言でいうと、JSONはデータを整理して送るための書き方のルールです。
「項目名」と「中身」をセットにして並べるため、人もアプリもデータの意味を読み取りやすくなります。
JSONとは何か
JSONは、データを整理して送るための書き方のルールです。辞書のような形をしています。
たとえば、人物の情報をメモするとします。
{
"name": "Taro",
"age": 23,
"city": "Tokyo"
}これは、次の内容を表しています。
1. `name` は `Taro`
2. `age` は `23`
3. `city` は `Tokyo`
難しいコードとして読むより、「項目名と中身が並んだメモ」と見ると入りやすいです。
APIを使う側の初心者は、まず「JSONはデータを見やすく並べる書き方」とつかめれば十分です。
JSONがAPIでよく使われる理由
JSONがAPIでよく使われる理由は、アプリとサーバーがデータを受け渡ししやすいからです。
APIのリクエストとレスポンスの流れは、前の記事「APIとは？」でも触れました。ここでは、その返事の中身がJSONで書かれる場面を見ていきます。
たとえば、天気アプリがAPIに「東京の天気をください」と送る場面を考えます。
そのレスポンスの中身が、JSONで書かれていることがあります。
{
"city": "Tokyo",
"weather": "sunny",
"temperature": 25
}この形なら、人が見ても「東京の天気は晴れで、気温は25度」と読み取れます。アプリ側も、項目を目印にして必要なデータを取り出しやすくなります。
APIドキュメントでは、「レスポンス例」「Response example」のような見出しの下にJSONが載っていることがあります。最初はすべてを理解しようとせず、知りたい項目名を探す読み方で大丈夫です。
JSONの基本形は「名前」と「値」
JSONを見るときは、まず `”名前”: 値` の形を探します。
{
"name": "Taro"
}この例では、`name` が名前、`Taro` が値です。
日本語で読むなら、「nameという項目にはTaroが入っている」と考えます。
値には、文字だけでなく、数字や真偽値も入ります。
{
"name": "Taro",
"age": 23,
"isStudent": true
}`”Taro”` のように引用符で囲まれているものは文字です。引用符とは、文字を囲むための `”` の記号です。
`23` のような数字は引用符で囲みません。`true` は「はい」、`false` は「いいえ」のような意味で使われます。
`{}`、`[]`、カンマの見方
JSONでは、いくつかの記号がよく出てきます。
最初に押さえたいのは3つです。
1. `{}` は、ひとまとまりのデータを表す
2. `[]` は、複数のデータを並べる
3. `,` は、項目の区切りを表す
`{}` は、1枚のメモ用紙のようなものです。
{
"name": "Taro",
"age": 23
}この中に、`name` と `age` という項目が入っています。
`[]` は、同じようなデータを複数並べるときに使います。たとえば人物データが2人分ある場合、2つのメモを角かっこの中に並べるイメージです。
カンマは、項目と項目の区切りです。`name`、`age`、`city` のように複数の項目があるとき、それぞれの間にカンマを置きます。
ただし、最後の項目の後ろにはカンマを付けません。ここは初心者がつまずきやすいところです。
JSONでつまずきやすいポイント
JSONでつまずきやすいポイントは、記号の意味を一度に覚えようとすることです。最初は、次の順番で見ると読みやすくなります。
1. まず `{}` の中に何が入っているかを見る
2. `”名前”: 値` のセットを探す
3. `[]` があれば、同じ形のデータが複数並んでいると考える
4. カンマは区切りとして読む
もう1つつまずきやすいのが、入れ子です。入れ子とは、データの中にさらにデータが入っている形です。
{
"user": {
"name": "Taro",
"age": 23
},
"status": "active"
}この例では、`user` の中に `name` と `age` が入っています。箱の中に小さな箱が入っているような形です。
はじめは全部を一気に読まず、外側から順番に見ます。
1. 外側には `user` と `status` がある
2. `user` の中には `name` と `age` がある
3. `status` には `active` が入っている
この読み方ができれば、APIのレスポンスを見たときも落ち着いて追えるようになります。
最初からJavaScriptでJSONを処理する方法や、JSON Schemaのような検証ルールまで覚える必要はありません。まずは「項目名」と「値」に分けて読めることを目標にしましょう。
APIを使う場面では、JSONを自分で長く書くよりも、返ってきたJSONを読んで意味をつかむ機会のほうが先に来ます。書き方は、読み方に慣れてから少しずつ覚えていけば大丈夫です。
まとめ：JSONはデータを読むための地図になる
– JSONは、データを整理して送るための書き方のルール
– JSONは「名前」と「値」のセットで読む
– `{}` はひとまとまりのデータ、`[]` は複数のデータを表す
– カンマは項目の区切りで、最後の項目の後ろには付けない
– 入れ子は、外側から順番に見ると読みやすい
次のステップとして、JSONがどの通信の流れで返ってくるのかを見てみましょう。
→ HTTPとは？初心者でもわかるインターネット通信の基本
関連記事
APIそのものの意味を先に確認したい場合は、以下の記事でAPIの基本を確認できます。
API学習の全体像を確認したい場合は、以下の記事で読む順番を確認できます。
→ API学習ロードマップ：初心者が何から学ぶべきかを順番に整理
JSONのあとに通信の基本を知りたい場合は、以下の記事へ進んでください。
→ HTTPとは？初心者でもわかるインターネット通信の基本
REST APIの全体像を知りたい場合は、以下の記事でGET、POST、エンドポイントの考え方を扱います。
→ REST APIとは？初心者でもわかる基本の仕組み
コメント