JavaScript JSON入門ガイド：基本構造からデータ変換まで徹底解説

JSON（JavaScript Object Notation）は、データを保存するための標準的な形式です。JSONオブジェクトでは、各値が「キー」と呼ばれるラベルに紐付けられて管理されます。文字列や整数はもちろん、別のJSON値を含むあらゆるデータ型を格納できるのが特徴です。

JSONはデータの保存と共有を可能にする汎用的なファイル形式であり、JavaScript、Python、PHPなど、主要なプログラミング言語のほとんどがJSONデータの読み書きに対応しています。

本記事では、JavaScriptにおけるJSONの基本的な使い方を解説します。JSONフォーマットの基礎知識から、JSONオブジェクトとJavaScriptオブジェクトの違いまで、順を追って見ていきましょう。

JSONとは？

JSONはデータの保存・共有のための方式で、JavaScriptのオブジェクト構文をベースにしています。ただし、JSONは完全にテキストベースである点が、通常のJavaScriptオブジェクトとは異なります。

JSONはJavaScriptの考え方を起源としていますが、実際にはPHP、Java、Rubyなど、さまざまなプログラミング言語で広く利用されています。

JSONデータは、独立したファイルとして保存することも、プログラム内の変数として保持することも可能です。例えば、トレーディングカードゲーム「Magic: The Gathering」のカード一覧をmtg_cards.jsonというファイルに保存し、その内容をmtg_cardsというJavaScript変数に読み込むといった使い方ができます。

JSONで保存されたデータは、次のような構造になります。

{
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

JSONは「キーと値のペア（key-value pair）」という構造でデータを管理します。各ペアは "キー": "値" という形式で表現されます。

上の例ではcard_nameがキーの例です。値はコロン（:）の右側に記述します。JSONではキー名は必ず文字列として保存しますが、値には真偽値や整数など、任意のデータ型を使用できます。

また、JSONはAPIでデータをやり取りする際にも頻繁に使われます。例えばAirtableやFitbitなどのAPIを利用する場合、データの送受信はJSON形式で行うのが一般的です。

JavaScriptでJSONデータにアクセスする方法

JavaScriptでJSONデータにアクセスするには、「角括弧（ブラケット）記法」または「ドット記法」の2つの方法があります。角括弧記法は、配列から値を取り出す方法に似ていますが、インデックス番号の代わりに、取得したい値のキー名を指定する点が異なります。

先ほどのデータを、JavaScriptの変数に代入したJSONオブジェクトとして整理してみましょう。

var black_lotus = {
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

この例では、JSONオブジェクトをblack_lotus変数に代入しています。ここで、Black Lotusのカードタイプを取得したいとしましょう。Black Lotusは「Magic: The Gathering」において使用禁止（バン）措置が取られた有名なカードです。

角括弧記法でアクセスする

角括弧記法を使えば、Black Lotusのカードタイプを簡単に取得できます。

この記法では、まず値を取得したいオブジェクト名を指定し、続けて目的の値に関連付けられたキー名を指定します。キー名は引用符で囲んだ上で、角括弧の中に記述する必要があります。

次のコードは、Black Lotusのカードタイプを取得する例です。

console.log(black_lotus["card_type"])

実行結果は次の通りです。

Mono Artifact

キー名をダブルクォートで囲み、角括弧で包んでからblack_lotus変数の末尾に付けることで、card_typeという名前で保存されたデータにアクセスできています。

ドット記法でアクセスする

ドット記法では、オブジェクト名の後にドット（.）を付け、続けてアクセスしたいキー名を指定します。

ドット記法でBlack Lotusのカードタイプを取得するコードは次の通りです。

console.log(black_lotus.card_type)

実行結果：

Mono Artifact

オブジェクト名（black_lotus）の後に、アクセスしたい値のキー名（card_type）をドットでつなぐだけで、シンプルにデータを取得できます。

JSONへの変換

オブジェクトを扱っていると、それをJSON文字列に変換したい場面や、逆にJSON文字列をオブジェクトに戻したい場面がよくあります。特にWebサーバー間でデータを送受信する際には、この変換作業が不可欠です。

JSONはJavaScriptのような技術で扱いやすい形式ですが、仮にプレーンな文字列のままデータを送ると、そこから個々の値を取り出すのは非常に困難です。

そこで一般的な流れとしては、まずオブジェクトを文字列に変換してサーバーへ送信し、受け取った側で再びオブジェクトに変換してからデータを操作することになります。

オブジェクトをJSON文字列に変換するには、JSON.stringify()関数を使用します。先ほどのBlack Lotusオブジェクトを文字列に変換してみましょう。

var black_lotus = {
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

var string_black_lotus = JSON.stringify(black_lotus)

console.log(string_black_lotus)

このコードを実行すると、次のようなJSONテキストが出力されます。

{"card_name":"Black Lotus","status":"banned","card_type":"Mono Artifact","mana":"0"}

ご覧の通り、JSONデータが1つの文字列になっています。この文字列をJSON.parse()メソッドを使えば、再びJSONオブジェクトへと戻せます。

var black_lotus_object = JSON.parse(string_black_lotus)

console.log(black_lotus_object)

実行結果：

{
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

これで、データが再びオブジェクトとして扱えるようになりました。

JSONとJavaScriptオブジェクトの違い

JSONの記法は、JavaScriptのオブジェクトをもとに設計されました。

しかし、JSONは複数のプログラミング言語で利用できるように作られているため、JavaScriptオブジェクトと完全に同じというわけではありません。例えばJSONはPHPやPythonでもサポートされており、対応する各言語ごとに独自の実装が存在します。

両者の最も分かりやすい違いはキーの書き方です。JavaScriptオブジェクトのキーは引用符なしで記述できる一方、JSONデータのキーは必ずダブルクォートで囲む必要があります。

実際にJSONファイルを開いてみると、すべてのキーが引用符で囲まれていることが確認できます。一方、JavaScriptオブジェクトでは、キーが引用符で囲まれていないケースも少なくありません。

とはいえ、JSONもJavaScriptオブジェクトも、どちらも「キーと値」の構造でデータを保存するという点は共通しています。

まとめ

JavaScriptは、JSON形式でのデータ保存をサポートしています。JSON（JavaScript Object Notation）は、関連するデータを1つのオブジェクトにまとめて保存するための仕組みであり、オブジェクト内の各値には「キー」と呼ばれる固有のラベルが割り当てられます。

本記事で解説した内容を押さえれば、あなたもプロフェッショナルのようにJavaScriptでJSONを扱えるはずです。

さらにJavaScriptの学習を深めたい方は、ぜひ「JavaScript学習ガイド」もチェックしてみてください。初心者から中級者向けの学習リソースや、効果的な学習のコツを多数紹介しています。