JavaScript JSON：ガイド

JavaScript Object Notationの略であるJSONは、データを保存する方法です。 JSONオブジェクトでは、値はキーと呼ばれるラベルにマップされます。 JSONオブジェクトには、文字列、整数、その​​他のJSON値など、あらゆるデータ型を保存できます。

JSONは、データの保存と共有を可能にする標準のファイル形式です。 JavaScript、Python、PHPなどのプログラミング言語はすべて、JSONデータの操作と読み取りをサポートしています。

このガイドでは、JavaScriptJSONの使用方法について説明します。 JSON形式の基本と、JSONオブジェクトとJavaScriptオブジェクトの比較について説明します。

JSONとは何ですか？

JSONは、データを保存および共有する方法です。これは、JavaScriptオブジェクトの構文に基づいています。違いは、JSONは完全にテキストに基づいているのに対し、オブジェクトはそうではないということです。 JSONはJavaScriptObjectNotationの略です。

JSONはJavaScriptプログラミング言語の原則に基づいていますが、PHP、Java、Rubyなどの他の多くの言語で使用されています。

JSONデータをファイルまたはプログラムの値として保存できます。たとえば、プログラムには mtg_cards.jsonというファイルが含まれている場合があります。 マジックザギャザリングカードのリストを保存します。そのデータをmtg_cardsというJavaScript変数に保存できます。 。

JSONに保存されているデータの構造は次のとおりです。

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

JSONは、キーと値のペアと呼ばれる構造を使用してデータを格納します。キーと値のペアは、「キー」：「値」という構造を使用するデータです。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

card_name キーの例です。値はコロンの右側にあります。 JSONでは、キー名を文字列として保存しますが、値はブール値や整数などの任意のデータ型にすることができます。

JSONは、多くの場合、データを送信するためのAPIです。たとえば、AirtableまたはFitbitAPIを使用するとします。データを送信し、JSONデータ形式でデータを読み取る必要があります。

JavaScriptJSONデータにアクセスする方法

JavaScriptでJSONデータにアクセスするには、角かっこまたはドット表記のいずれかを使用できます。角括弧表記は、JavaScript配列から値を取得する方法と似ています。インデックス位置を指定する代わりに、値を取得するキーの名前を指定します。

以前のオブジェクトを考えてみましょう。現在はJSONオブジェクトとしてフォーマットされています：

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

この例では、JSONオブジェクトを変数 black_lotusに割り当てています。 。ブラックロータスのカードタイプを調べたいとしましょう。これは、トレーディングカードゲームマジックザギャザリングで禁止されているカードです。 。

角かっこ

角括弧表記を使用して、BlackLotusカードのカードタイプを確認できます。

この表記を使用するには、値を取得するオブジェクトの名前を指定する必要があります。次に、その値に関連付けられているキーの名前を指定します。キー名は引用符と角かっこで囲む必要があります。

次のコードは、BlackLotusのカードタイプに関するデータを取得します。

console.log(black_lotus["card_type"])

コードは次のようになります： Mono Artifact 。キー名を二重引用符で囲み、角かっこで囲んでから、black_lotus変数の最後に追加しました。これにより、 card_typeという名前で保存されているデータにアクセスできます。 。

ドット表記

ドット表記は、オブジェクト名の後にドットを指定してオブジェクトにアクセスする場所です。次に、値にアクセスするキーの名前を指定します。

ドット表記を使用してBlackLotusのカードタイプにアクセスするには、次のコードを使用できます。

console.log(black_lotus.card_type)

コードは「MonoArtifact」を返します。

オブジェクトの名前を指定しました（“ black_lotus 」）の後に、値にアクセスするキーが続きます（「 card_type 」）。

JSON変換

多くの場合、オブジェクトを操作するときは、オブジェクトをJSON文字列に変換したり、その逆を行ったりする必要があります。これは、Webサーバーを介してデータを送信する場合の一般的な方法です。

JSONは、JavaScriptなどのテクノロジーで操作するのが簡単です。プレーンな文字列からすべての値を抽出することは非常に困難です。

最初に、オブジェクトを文字列に変換して、サーバー経由で送信できるようにします。次に、データをオブジェクトのように扱うことができるように、それをオブジェクトに変換し直します。

オブジェクトをJSON文字列に変換するには、JSON.stringify（）関数を使用できます。以前のBlackLotusオブジェクトを文字列に変換するとします。このコードを使用してこれを行うことができます：

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データは文字列です。 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でサポートされています。 JSONをサポートする各プログラミング言語には、独自の実装があります。

JavaScriptオブジェクトのキーは引用符で囲まれていませんが、JSONデータのキーは引用符で囲まれている必要があります。

JSONファイルを見ると、すべてのキーが引用符で囲まれていることがわかります。 JavaScriptオブジェクトを見ると、キーが引用符で囲まれていない可能性があることがわかります。

JSONオブジェクトとJavaScriptオブジェクトはどちらも、データをKey-Value構造で格納します。

結論

JavaScriptは、JSONでのデータの保存をサポートしています。 JSONは、JavaScript Object Notationの略で、関連データを1つのオブジェクトに格納する方法です。オブジェクトの各値には、キーとも呼ばれる独自のラベルがあります。

これで、プロのようにJavaScriptでJSONを使用するために必要な知識を身に付けることができます。

JavaScriptについてもっと知りたいですか？ JavaScriptの学習方法ガイドをご覧ください。 JavaScriptを学習するためのヒントと、初級および中級の開発者向けの学習リソースのリストがあります。