APIとJSONを「お店の注文」で理解する

あなたがレストランに入ったところを想像してください。

1. メニューを見て、ウェイターに「カレーライスをください」と伝える
2. ウェイターが厨房へ注文を届ける
3. 料理ができあがって、あなたのテーブルに届く

じつは、Webサイトやアプリも裏側でまったく同じことをしています。

• API（エーピーアイ） ＝ お店の「注文窓口（ウェイター）」にあたるもの。「このデータをください」とお願いする仕組みです
• JSON（ジェイソン） ＝ 注文メモの「書き方のルール」にあたるもの。データを整理して伝えるための共通フォーマットです
• レスポンス ＝ お店からの「返事（料理）」にあたるもの。頼んだデータが届きます

このレッスンでは、この「お店の注文」のたとえを使いながら、AIツールを実際に動かしてAPIとJSONの基本を15分で体験します。

必要なのは、以下の2つだけです。プログラミングの経験は不要です。

• ブラウザ（Chrome、Safari など）でWebサイトを開いたことがある
• AIツール（Claude Code、ChatGPT、Cursor のいずれか）が使える状態になっている

まだAIツールの準備ができていない場合は、先に「AIツールをセットアップする」レッスンを済ませてください。

API（Application Programming Interface）を一言でいうと、ソフトウェア同士がやり取りするための「窓口」 です。

レストランのたとえに戻りましょう。

あなたは厨房に直接入りません。ウェイター（API）に注文を伝えるだけで、料理（データ）が届きます。

良い例：APIへの正しいお願い

• 「天気APIに『東京の今日の天気を教えて』と聞く」→ 決まった形式で聞いているのでちゃんと答えが返る
• 「翻訳APIに『Hello を日本語に訳して』と頼む」→ 決まったデータを渡しているのでスムーズ

悪い例：APIへのよくある誤解

• 「APIに自由な文章で何でも聞ける」→ ✕ APIは決まった形式のお願いしか受け付けません。メニューにない料理は注文できないのと同じです
• 「APIを使うだけで画面が完成する」→ ✕ APIはデータを返すだけです。見た目を作るのは別の仕事です

JSON（JavaScript Object Notation）は、データを整理して書くための共通フォーマット です。レストランでいえば「注文メモの書き方のルール」にあたります。

たとえば、あなたがカレーを注文するとき、こんなメモを書くイメージです。

{
  "料理": "カレーライス",
  "辛さ": "中辛",
  "オプション": ["温玉", "ナン"]
}

ポイントは3つだけです。

1. { } で全体を囲む ＝ 「ここからここまでが1つのまとまりですよ」という印
2. 「名前」:「値」のペアで書く ＝ 「料理は何？→ カレーライス」のように、項目名と中身をセットにする
3. 文字は " " で囲む、数字はそのまま ＝ "中辛" のように文字はダブルクォーテーションで囲み、数字の 22 はそのまま書く

良い例

{"名前": "山田", "年齢": 25}

→ 名前と値の区切りがはっきりしていて、コンピューターが読み取れる

悪い例

山田、25歳

→ 人間は読めますが、コンピューターには「どこが名前で、どこが年齢か」分かりません

いよいよ実際にAIツールを使って、APIとJSONのイメージを体験しましょう。ここでは Claude Code を例にしますが、ChatGPT や Cursor でも同じ質問ができます。

手順1：AIツールを立ち上げる

ターミナル（＝コンピュータに文字で命令を伝える黒い画面）で次の1行をコピー＆ペーストして、Enterキーを押します。

claude

「何を手伝いましょうか？」のような表示が出れば準備完了です。

ChatGPTの場合: ブラウザで ChatGPT を開けばOKです。 Cursorの場合: Cursor を開いて、チャット欄（Cmd+L / Ctrl+L）を表示すればOKです。

手順2：APIレスポンスの例を見せてもらう

AIツールに次のプロンプト（＝AIへの指示文）をコピー＆ペーストしてください。

天気予報APIから返ってくるレスポンスの例をJSON形式で3つ見せてください。
地域、天気、気温、降水確率を含めてください。

このような返答が含まれていれば成功です。

{
  "地域": "東京",
  "天気": "晴れ",
  "気温": 22,
  "降水確率": 10
}

手順3：JSONを自分で書き換えてみる

AIツールに次のように入力してください。

以下のJSONの「天気」を「雨」に、「気温」を15に書き換えてください。
書き換え前と書き換え後を並べて見せてください。

{"地域": "東京", "天気": "晴れ", "気温": 22, "降水確率": 10}

返答で "天気": "雨" と "気温": 15 に変わっていたら、あなたはもうJSONの読み書きの基本ができています。

手順4：自分だけの注文メモをJSONで作る

もう一歩進んで、あなた自身のデータをJSONにしてみましょう。AIに次のように頼んでください。

私のプロフィールをJSON形式で作ってください。
名前は「（あなたの名前）」、好きな食べ物は「（好きなもの）」、
趣味は2つ含めてください。

返ってきたJSONを見て、{ } で囲まれていること、「名前」と「値」がペアになっていることを確認できたら、このステップは完了です。

次の4つの質問に「はい」と答えられたら、このレッスンは完了です。

1. APIを「レストランのウェイター」にたとえて説明できますか？ → 「アプリがサーバーにデータをお願いする窓口」と言えればOK
2. JSONの3つのルールを覚えていますか？ → { } で囲む、「名前:値」のペア、文字は " " で囲む
3. AIツールにJSONの例を出させることができましたか？ → 手順2で天気のJSONが返ってきていればOK
4. JSONの一部を書き換える指示ができましたか？ → 手順3で値の変更ができていればOK

レッスンの証拠として、次のいずれかのスクリーンショットを保存してください。

• 手順2でAIが返したJSONの画面
• 手順3で書き換え前後を並べた画面

スクリーンショットの撮り方：

• Mac: Cmd + Shift + 4 で範囲を選択
• Windows: Win + Shift + S で範囲を選択