Lecture 08技術理解 — 第 3

Lecture 08JSONとは?

Web Appでデータをやり取りするときによく使うJSONを理解します。

読了の目安 約 6 分図解 準備中難易度

AI開発を進めると、必ず JSON という言葉が出てきます。 画面の裏で飛び交うデータの 共通言語 のようなものです。 書けるようになる必要はありません、読めれば十分 です。

このレクチャーでは、JSONがどんな見た目をしていて、 画面の表示とどう対応しているのかを、プロフィールカードを例にやさしく見ていきます。

1JSONはデータの「決まった書き方」

JSONは「ジェイソン」と読みます。データを書き表すための 共通フォーマット で、 名刺やプロフィールカードと同じ感覚です。 名刺に「氏名」「所属」「電話番号」と決まった枠があるように、JSONにも書き方の型があります。

AIへの入力、AIからの出力、APIのリクエストとレスポンス、設定ファイル…… AI開発で出てくるテキスト形式のデータは ほぼJSON と言ってもいいくらい、よく使われています。

2key と value の関係

JSONはひたすら 「項目名: 値」 の組み合わせで書きます。 項目名のことを key、値を value と呼びます。 実例を見るのが早いです:

{
  "name": "Sato",
  "plan": "Pro",
  "isActive": true
}
  • name が key、"Sato" が value(文字列なのでクォートで囲む)。
  • plan が key、"Pro" が value。
  • isActive が key、true が value。truefalse真偽値 といって、はい・いいえを表します。
Figure 8.1プロフィールカードと JSON は同じものを別の見せ方で表す
図解 準備中(生成プロンプトは下記)
生成後は public/lectures/lecture-08-json/profile-json.png に差し替え予定
image · 1400 × 800 (7:4)

3JSONがよく出てくる場所

  • APIのリクエスト/レスポンス:「これお願い」「結果はこれ」を渡し合うときの形式。
  • 設定ファイル:アプリの動きを決めるパラメータをまとめた書類。
  • AIへの入力と出力:プロンプトの構造化や、AIに 決まった形で答えてもらう ときに使う。
Tip

読めれば十分、書けなくていい

JSONを正しく書くのは意外と難しく、カンマ忘れや引用符のずれで動かなくなります。 幸い、それを書くのはAIの仕事。私たちがやるのは 「AIが出したJSONを読める」 ことだけです。 「どれが項目名で、どれが値か」を読み取れれば合格です。

4完璧に書けなくていい、読めれば十分

AIに「このJSONを日本語で説明して」と頼めば、内容を翻訳してくれます。 逆に、自分が表現したいものを日本語で伝えれば、AIがJSONに直してくれます。 JSONは 人間とAIの間にある共通言語、くらいの距離感で付き合うのがちょうどいいです。

やってみよう · Exercise

自分のプロフィールをJSONで書いてみる

下のテンプレを埋めて、Codex Appに見せてみましょう。 書き方のクセや、不足している項目をAIが指摘してくれます。

  1. 次のテンプレを自分の情報で埋める。
    {
      "name": "",
      "role": "",
      "goal": ""
    }
  2. Codexに「このJSONをチェックして、書き方が合っているか、 プロフィール用にあと何を入れたほうがいいかを初心者向けに教えてください」と依頼する。
進捗にチェックをつける

5理解確認チェックリスト

  • JSONはデータの書き方の1つだと理解している。
  • key: value の関係を読み取れる。
  • APIやAI開発でJSONがよく使われると理解している。
End of Lecture 08