【JavaScript】JSONの扱い方を解説｜Webの基礎

記事内には広告が含まれます

2026年9月20日

はじめに

前回の記事では、Fetch APIでサーバーとデータをやり取りする方法を解説しました。その中でJSON.stringify()やresponse.json()という形で、何度も「JSON」という言葉が登場していたのを覚えているでしょうか。

今回は、そのJSONについて改めて詳しく解説します。JSONは、オブジェクトや配列のデータを、サーバーとの通信やファイル保存のために「文字列」としてやり取りするための形式です。VBAで言えば、複数の値をまとめて保存するために使うCSVや独自形式のテキストファイルに近い役割を、より柔軟な構造で実現するものだとイメージすると分かりやすいでしょう。

JSONとは？

JSON（JavaScript Object Notation）は、データをテキスト（文字列）として表現するためのフォーマットです。見た目はJavaScriptのオブジェクトリテラルとよく似ていますが、あくまで「文字列」であり、いくつかの独自ルールがあります。

{"name": "山田太郎", "age": 30, "isMember": true}

JavaScriptのオブジェクトリテラルと似ていますが、以下の点が異なります。

キー（プロパティ名）は必ずダブルクォート"で囲む（シングルクォートやクォートなしは不可）
値の末尾に余分なカンマ（末尾カンマ）は書けない
コメントを書けない
値として使えるのは、文字列・数値・真偽値（true/false）・null・配列・オブジェクトのみ（関数やundefinedは書けない）

JSONは「JavaScriptのオブジェクトから生まれた形式」ですが、現在ではJavaScript専用ではなく、Python・PHP・Excelマクロなど多くの言語間でデータをやり取りするための共通フォーマットとして広く使われています。

JavaScriptのオブジェクトリテラルとJSON文字列を並べた比較図。キーのクォート・末尾カンマ・コメントの可否が異なる部分を色分けして強調している

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

JSON.stringify()は、JavaScriptのオブジェクトや配列を、JSON形式の文字列に変換するメソッドです。前回のFetch APIの記事でも、POSTリクエストの送信データを作る際に使いました。

const user = {
    name: "山田太郎",
    age: 30,
    isMember: true,
};

const jsonString = JSON.stringify(user);

console.log(jsonString);
// '{"name":"山田太郎","age":30,"isMember":true}'
console.log(typeof jsonString);
// "string"

変換後のjsonStringは、見た目はオブジェクトのようですが中身は1本の文字列です。サーバーへ送信したり、ファイル・localStorageに保存したりする際は、このように文字列の形に変換してから扱う必要があります。

第2引数・第3引数を使うと、見やすい整形出力もできます。

const jsonPretty = JSON.stringify(user, null, 2);

console.log(jsonPretty);
// {
//   "name": "山田太郎",
//   "age": 30,
//   "isMember": true
// }

第2引数（今回はnull）は出力するプロパティを絞り込む指定で、省略する場合もnullを明示します。第3引数の2は、インデントに使う半角スペースの数です。ログの確認用や、後述する実務サンプルのような「整形して表示する」場面で活用できます。

JSON.parse()でJSON文字列をオブジェクトに戻す

JSON.parse()は、JSON.stringify()とは逆に、JSON形式の文字列をJavaScriptのオブジェクト（や配列）に変換するメソッドです。

const jsonString = '{"name":"山田太郎","age":30,"isMember":true}';

const user = JSON.parse(jsonString);

console.log(user.name); // "山田太郎"
console.log(typeof user); // "object"

[前回のFetch APIの記事]で使ったresponse.json()は、サーバーから受け取ったレスポンス本文（JSON文字列）を、内部でJSON.parse()相当の処理にかけてオブジェクトに変換し、Promiseとして返しているメソッドです。仕組みを分けて見ると、Fetch APIの中身も今回の内容の延長線上にあることが分かります。

構文が正しくないJSON文字列を渡すと、JSON.parse()はSyntaxErrorを発生させます。サーバーやユーザー入力など、内容を完全に信頼できないJSON文字列を扱うときは、以前解説したtry/catchで囲んでおくと安全です。

function safeParse(jsonString) {
    try {
        return JSON.parse(jsonString);
    } catch (error) {
        console.error("JSONの解析に失敗しました：", error.message);
        return null;
    }
}

safeParse("これはJSONではありません"); // null（エラーはconsoleに出力される）

入れ子になったJSONの扱い方

実際に扱うJSONは、配列の中にオブジェクトが複数入っているような、入れ子になった構造がほとんどです。

const jsonString = `[
    {"name": "山田太郎", "age": 30},
    {"name": "佐藤花子", "age": 25}
]`;

const users = JSON.parse(jsonString);

console.log(users[0].name); // "山田太郎"

users.forEach((user) => {
    console.log(`${user.name}（${user.age}歳）`);
});

JSON.parse()で変換した後は、ただの配列・オブジェクトなので、配列の記事で解説したforEach・map・filterがそのまま使えます。「JSONだから特別な操作が必要」というわけではなく、変換してしまえば普段どおりの配列・オブジェクト操作に戻る、と考えるとシンプルです。

// 20歳以上の名前だけを配列で取得する
const names = users
    .filter((user) => user.age >= 20)
    .map((user) => user.name);

console.log(names); // ["山田太郎", "佐藤花子"]

JSONにできないデータ・注意したい落とし穴

JSON.stringify()でオブジェクトを変換する際、JSONの値として表現できないデータは、以下のように扱われます。

const data = {
    name: "山田太郎",
    greet: function () { console.log("hello"); }, // 関数
    memo: undefined, // undefined
    registeredAt: new Date(), // Dateオブジェクト
};

console.log(JSON.stringify(data));
// '{"name":"山田太郎","registeredAt":"2026-09-17T00:00:00.000Z"}'

関数：greetはプロパティ自体が丸ごと無視されます（エラーにはなりません）
undefined：memoも同様にプロパティが無視されます
Dateオブジェクト：registeredAtは自動的にISO形式の文字列に変換されます（元のDateオブジェクトに戻すには、JSON.parse()後に改めてnew Date(...)する必要があります）

「保存したはずのプロパティが消えている」と感じたときは、この変換ルールが原因になっていることが多いので、頭の片隅に入れておきましょう。

オブジェクトの中に自分自身を参照するようなデータ（循環参照）が含まれていると、JSON.stringify()はTypeErrorで失敗します。通信用のデータを作る際は、必要なプロパティだけを持つ新しいオブジェクトに整理してから変換するのが安全です。

実務サンプル（取得データを整形JSONで表示・コピー）

前回のユーザー検索フォームを少し拡張し、取得したデータを整形されたJSON文字列として画面に表示し、ボタン1つでクリップボードにコピーできる機能を作ってみます。APIの動作確認やデバッグ時にそのまま使える形です。

async function searchUser(userId) {
    showLoading(true);

    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);

        if (!response.ok) {
            throw new Error(`ユーザーが見つかりませんでした（status: ${response.status}）`);
        }

        const user = await response.json();

        // 整形したJSON文字列を画面に表示
        const jsonPretty = JSON.stringify(user, null, 2);
        showResult(jsonPretty);
    } catch (error) {
        showResult(`エラー：${error.message}`);
    } finally {
        showLoading(false);
    }
}

async function copyResultToClipboard() {
    const jsonPretty = document.getElementById("result").textContent;
    await navigator.clipboard.writeText(jsonPretty);
    alert("JSONをコピーしました");
}

前回は取得したユーザー名・メールアドレスだけを組み立てて表示していましたが、今回はJSON.stringify(user, null, 2)で取得データ全体を整形し、そのままの構造で確認できるようにしています。navigator.clipboard.writeText()はクリップボードへ文字列をコピーするAPIで、コピー内容が単なる文字列であればよいという点で、今回のJSON変換と相性のよい組み合わせです。