TECH I.S.

JavaScript JSON


JSONは、データを保存および転送するための形式です。

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


JSONとは何ですか?

  • JSONはJava Script Object Notationの略です。
  • JSONは軽量のデータ交換形式です。
  • JSONは言語に依存しません。
  • JSONは「自己記述的」で理解しやすい。

JSON構文はJavaScript オブジェクト表記構文から派生していますが、JSON形式はテキストのみです。 JSONデータを読み取って生成するためのコードは、任意のプログラミング言語で記述できます。


JSONの例

このJSON構文は、従業員オブジェクト(3つの従業員レコード(オブジェクト)の配列)を定義します。

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つのオブジェクトが含まれています。

各オブジェクトは個人の記録です (名と姓を含む)。


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

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

簡単にするために、文字列を入力として使用してこれを示すことができます。

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

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

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

const obj = JSON.parse(text);

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

<p id="demo"></p> <script> document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName; </script>

JSONについて詳しくは、JSONチュートリアルを参照して下さい。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細