見出し画像

はじめてのJavaScript #30｜JSONってなに？ ── データのやりとりを理解する

DOI@日々学びの本質を考え続ける探求者

今回のゴール

JSONの構造を深く理解して、複雑なデータでも自在に読み書きできるようになる。


JSONをあらためて整理しよう

前回・前々回のAPI通信でJSONという言葉が何度か登場しました。
今回はJSONそのものにフォーカスして、構造と扱い方をしっかり理解しましょう。

JSON（JavaScript Object Notation） はデータを文字列として表現するためのフォーマットです。APIのデータのやりとりだけでなく、設定ファイルやデータの保存など、あらゆる場面で使われている現代のウェブ開発に欠かせない存在です。

JSONの基本ルール

見た目はJavaScriptのオブジェクトとよく似ていますが、いくつか厳格なルールがあります。

json

{
  "name": "田中 太郎",
  "age": 25,
  "isStudent": false,
  "scores": [80, 95, 70],
  "address": {
    "city": "東京",
    "zip": "100-0001"
  }
}

JavaScriptのオブジェクトとの主な違いはこちらです。

JSONで使えるデータの種類

JSONで使えるデータ型は6種類です。

json

{
  "文字列": "こんにちは",
  "数値":   42,
  "真偽値": true,
  "null値": null,
  "配列":   [1, 2, 3],
  "オブジェクト": { "key": "value" }
}

JavaScriptの undefined や関数は使えない点に注意が必要です。

JSONとJavaScriptを変換する

JSON文字列 → JavaScriptオブジェクト

fetch の response.json() が内部でやっていることと同じです。

js

const jsonString = '{"name":"田中","age":25}';
const obj = JSON.parse(jsonString);

console.log(obj.name); // 田中
console.log(obj.age);  // 25

JavaScriptオブジェクト → JSON文字列

js

const obj = { name: "田中", age: 25 };
const jsonString = JSON.stringify(obj);

console.log(jsonString); // {"name":"田中","age":25}

JSON.stringify() の第3引数にインデント数を指定すると読みやすく整形できます。

js

console.log(JSON.stringify(obj, null, 2));
// {
//   "name": "田中",
//   "age": 25
// }

ネストしたJSONを読み取る

APIが返すJSONは複雑な入れ子構造になっていることが多いです。

json

{
  "user": {
    "name": "田中 太郎",
    "contact": {
      "email": "tanaka@example.com",
      "phone": "090-0000-0000"
    },
    "hobbies": ["読書", "プログラミング", "旅行"]
  }
}

JavaScriptでの読み取り方はこうなります。

js

const data = JSON.parse(jsonString);

console.log(data.user.name);              // 田中 太郎
console.log(data.user.contact.email);     // tanaka@example.com
console.log(data.user.hobbies[0]);        // 読書
console.log(data.user.hobbies.length);    // 3

実際に書いてみよう

JSONの変換と読み取りを体験できるミニツールを作ります。

index.html

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>JSON 練習</title>
  </head>
  <body>
    <h1>JSON 変換ツール</h1>

    <h2>① オブジェクト → JSON文字列</h2>
    <button id="btnStringify">変換する</button>
    <pre id="stringifyResult"></pre>

    <h2>② JSON文字列 → オブジェクト</h2>
    <textarea id="jsonInput" rows="6" cols="40"
      placeholder="JSONを入力してください"></textarea>
    <br>
    <button id="btnParse">解析する</button>
    <p id="parseResult"></p>
    <p id="parseError" style="color:red;"></p>

    <script src="script.js"></script>
  </body>
</html>

script.js

js

const btnStringify    = document.getElementById("btnStringify");
const stringifyResult = document.getElementById("stringifyResult");
const jsonInput       = document.getElementById("jsonInput");
const btnParse        = document.getElementById("btnParse");
const parseResult     = document.getElementById("parseResult");
const parseError      = document.getElementById("parseError");

// ① オブジェクト → JSON文字列
btnStringify.addEventListener("click", function() {
  const user = {
    name:      "田中 太郎",
    age:       25,
    isStudent: false,
    hobbies:   ["読書", "プログラミング", "旅行"],
    address: {
      city: "東京",
      zip:  "100-0001"
    }
  };

  const jsonString = JSON.stringify(user, null, 2);
  stringifyResult.textContent = jsonString;
});

// ② JSON文字列 → オブジェクト
btnParse.addEventListener("click", function() {
  parseResult.textContent = "";
  parseError.textContent  = "";

  const input = jsonInput.value.trim();

  if (!input) {
    parseError.textContent = "JSONを入力してください。";
    return;
  }

  try {
    const obj = JSON.parse(input);

    // 読み取った内容を表示
    const keys = Object.keys(obj);
    let output  = "解析成功！\n";
    output += "キーの数：" + keys.length + "個\n";

    keys.forEach(function(key) {
      output += key + " → " + JSON.stringify(obj[key]) + "\n";
    });

    parseResult.textContent = output;

  } catch (error) {
    parseError.textContent = "JSONの形式が正しくありません：" + error.message;
  }
});

// テキストエリアに初期値を入れておく
jsonInput.value = '{\n  "name": "田中",\n  "age": 25,\n  "city": "東京"\n}';

「変換する」ボタンでオブジェクトがJSON文字列に変わる様子、「解析する」ボタンでJSON文字列がオブジェクトとして読み取られる様子を確認してみましょう。
わざとJSONの形式を崩してエラーが出ることも試してみてください。

コードのポイント解説

JSON.parse() はエラーが出やすい

JSON文字列の形式が少しでも間違っているとエラーになります。そのため try/catch とセットで使うのが鉄則です。

js

try {
  const obj = JSON.parse(jsonString);
} catch (error) {
  console.log("JSONの形式が不正です");
}

Object.keys() でキー一覧を取得する

js

const keys = Object.keys(obj);
console.log(keys); // ["name", "age", "city"]

Object.keys() はオブジェクトのキーを配列で返します。キーの数がわからないオブジェクトを扱うときに便利です。

まとめ

  • JSONはキーを必ずダブルクォートで囲む・末尾カンマNG などJavaScriptより厳格なルールがある

  • JSON.parse() でJSON文字列をオブジェクトに、JSON.stringify() でオブジェクトをJSON文字列に変換できる

  • JSON.parse() は形式が不正だとエラーになるので必ず try/catch とセットで使う

次回予告

JSONとAPIの扱いに慣れてきました。次回はユーザー体験をさらに高めるローディング表示とエラー処理の実装方法を学びます。

→ #31｜ローディング表示とエラー処理を実装しよう


いいなと思ったら応援しよう！

DOI@日々学びの本質を考え続ける探求者 よろしければ応援お願いします！ いただいたチップは引き続きプログラミングや学びについて、皆さんの利益になるようなよい記事を書くことで恩返しをさせていただきます！