JavaScript JSON

❮ 前章へ 次章へ ❯

JSON は、データの格納と転送のためのフォーマットです。

JSON は、サーバから Web ページにデータを送信するときによく使われます。


JSON とは何?

* JSON 構文は、JavaScript オブジェクト表記構文から派生したものですが、JSON フォーマットはテキストのみです。 JSON データを読み込んで生成するためのコードは、どのプログラミング言語で記述することもできます。


JSON 例

次の JSON 構文は、employees オブジェクトを定義します:3 つの employee レコード(オブジェクト)の配列:

JSON の例

{
"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
}

JSON 形式は JavaScript オブジェクトを評価する

JSON 形式は、JavaScript オブジェクトを作成するためのコードと構文的に同じです。

この類似性により、JavaScript プログラムは JSON データをネイティブな JavaScript オブジェクトに簡単に変換できます。


JSON の構文規則


JSON データ - 名前と値

JSON データは、JavaScript オブジェクトのプロパティと同様に、名前/値のペアとして記述します。

名前/値のペアは、フィールド名(二重引用符で囲んだもの)の後にコロンとそれに続く値で構成されます:

"firstName":"John"

JSON の名前には二重引用符が必須です。JavaScript の名前には必要ありません。


JSON オブジェクト

JSON オブジェクトは波括弧の中に記述します。

JavaScript と同じように、オブジェクトには複数の名前/値のペアを含ことができます:

{"firstName":"John", "lastName":"Doe"}

JSON 配列

JSON 配列は角括弧で囲みます。

JavaScript のように、配列にはオブジェクトを含むことができます:

"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]

上の例では、オブジェクト "employees" は配列で、3つのオブジェクトを含んでいます。

各オブジェクトは、person(first name と last name を持った)レコードです。


JSON テキストを JavaScript オブジェクトに変換する

JSON の一般的な使い方は、Web サーバからデータを読み、そのデータを Web ページに表示することです。

簡単にするために、入力として文字列を使用してこれを示そうと思います。

まず、JSON 構文を含む JavaScript 文字列を作成します:

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

次に、JavaScript の組込み関数 JSON.parse() 使用して文字列を JavaScript オブジェクトに変換します:

var obj = JSON.parse(text);

最後に、ページ内で新しい JavaScript オブジェクトを使用します:

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
Try it Yourself »

詳細については、JSON チュートリアルをご覧ください。


❮ 前章へ 次章へ ❯