前書き

  • JSON はJavaScriptプログラミング言語から派生しているため、JavaScriptのデータ形式として使用するのが自然な選択です。 JSON( JavaScript Object Notation *の略)は、通常「Jason」という名前のように発音されます。

JSONの一般的な用語については、「https://www.digitalocean.com/community/tutorials/an-introduction-to-json[JSONの概要]」チュートリアルをご覧ください。

JavaScriptプログラムでJSONを使用できる場所について考え始めるために、JSONの一般的な使用例を次に示します。

  • データを保存する

  • ユーザー入力からデータ構造を生成する

  • サーバーからクライアント、クライアントからサーバー、およびサーバーからサーバーへのデータの転送

  • データの構成と検証

このチュートリアルでは、JavaScriptでJSONを使用する方法の概要を説明します。 この概要を最大限に活用するには、JavaScriptプログラミング言語にある程度精通している必要があります。

JSON形式

JSONの形式はJavaScriptオブジェクトの構文から派生していますが、完全にテキストベースです。 これは、通常は中括弧で表示されるKey-Valueデータ形式です。

JSONを使用している場合、 `+ .json`ファイルにJSONオブジェクトが表示される可能性がありますが、プログラムのコンテキスト内でJSONオブジェクトまたは文字列として存在することもできます。 https://www.digitalocean.com/community/tutorials/an-introduction-to-json#syntax-and-structure [構文と構造はこちら]の詳細をご覧ください。

`+ .json`ファイルで作業しているときは、次のようになります。

sammy.json

{
 "first_name"  :  "Sammy",
 "last_name"   :  "Shark",
 "online"      :  true
}

代わりに、 `+ .js `または ` .html +`ファイルにJSONオブジェクトがある場合、おそらく変数に設定されていることがわかります。

var sammy = {
 "first_name"  :  "Sammy",
 "last_name"   :  "Shark",
 "online"      :  true
}

また、JSONはJavaScriptプログラムファイルまたはスクリプトのコンテキスト内のオブジェクトではなく、文字列として表示される場合があります。 この場合、すべてが1行で表示されることもあります。

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

JSONオブジェクトを文字列に変換すると、データをすばやく転送するのに特に役立ちます。

JSONの一般的なフォーマットと、それを「+ .json +」ファイルとして、またはJavaScript内でオブジェクトまたは文字列としてどのように表示するかを検討しました。

JavaScriptオブジェクトとの比較

JSONはあらゆるプログラミング言語で使用するために開発されたものですが、JavaScriptオブジェクトはJavaScriptプログラミング言語を介してのみ直接操作できることに注意してください。

構文に関しては、JavaScriptオブジェクトはJSONに似ていますが、JavaScriptオブジェクトのキーは引用符で囲まれた文字列ではありません。 また、JavaScriptオブジェクトは値に渡される型に関してあまり制限されていないため、値として関数を使用できます。

現在オンラインになっているウェブサイトユーザーのSammy SharkのJavaScriptオブジェクトの例を見てみましょう。

var user = {
   first_name: "Sammy",
   last_name : "Shark",
   online    : true,
   full_name : function() {
      return this.first_name + " " + this.last_name;
   }
};

これはJSONオブジェクトとして非常に馴染みがあるように見えますが、どのキー( + first_name ++ last_name ++ online +、または + full_name +)の周りにも引用符はありません。最後の行の関数値。

上記のJavaScriptオブジェクトのデータにアクセスする場合は、https://www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript#accessing-json-data [ドット表記法]で `+ user.first_name; `を呼び出して文字列を取得しますが、フルネームにアクセスする場合は、 ` user.full_name(); +`を呼び出すことでアクセスする必要があります。関数。

JavaScriptオブジェクトはJavaScript言語内にのみ存在できるため、さまざまな言語でアクセスする必要があるデータを操作する場合は、JSONを選択することをお勧めします。

JSONデータへのアクセス

JSONデータは通常、ドット表記を介してJavascriptでアクセスされます。 これがどのように機能するかを理解するために、JSONオブジェクト `+ sammy +`を考えてみましょう。

var sammy = {
 "first_name"  :  "Sammy",
 "last_name"   :  "Shark",
 "online"      :  true
}

値にアクセスするために、次のようなドット表記を使用します。

sammy.first_name
sammy.last_name
sammy.online

変数 `+ sammy +`が最初で、その後にドットが続き、その後にアクセスするキーが続きます。

ポップアップでキー `+ first_name `に関連付けられた値を表示するJavaScriptアラートを作成するには、JavaScriptの ` alert()+`関数を呼び出して作成できます。

alert(sammy.first_name);
OutputSammy

ここで、 + sammy + JSONオブジェクトから `+ first_name +`キーに関連付けられた値を正常に呼び出しました。

また、角括弧構文を使用してJSONのデータにアクセスすることもできます。 そのためには、角括弧内のキーを二重引用符で囲みます。 上記の `+ sammy `変数では、 ` alert()+`関数で角括弧構文を使用すると次のようになります。

alert(sammy["online"]);
Outputtrue

nested array elementsを使用している場合、配列内のアイテムの番号を呼び出す必要があります。 以下のJSONについて考えてみましょう。

var user_profile = {
 "username" : "SammyShark",
 "social_media" : [
   {
     "description" : "twitter",
     "link" : "https://twitter.com/digitalocean"
   },
   {
     "description" : "facebook",
     "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
   },
   {
     "description" : "github",
     "link" : "https://github.com/digitalocean"
   }
 ]
}

文字列 `+ facebook +`にアクセスするには、ドット表記のコンテキスト内で配列内のそのアイテムを呼び出すことができます。

alert(user_profile.social_media[1].description);
Outputfacebook

ネストされた要素ごとに追加のドットを使用することに注意してください。

ドット表記または角括弧構文を使用すると、JSON形式に含まれるデータにアクセスできます。

JSONを操作するための関数

このセクションでは、JSONを文字列化および解析するための2つの方法について説明します。 JSONをオブジェクトから文字列に、またはその逆に変換できることは、データの転送と保存に役立ちます。

JSON.stringify()

`+ JSON.stringify()+`関数はオブジェクトをJSON文字列に変換します。

文字列は、軽量な方法で情報を保存または渡すことにより、クライアントからサーバーにデータを転送するのに役立ちます。 たとえば、クライアント側でユーザーの設定を収集し、サーバーに送信できます。 その後、 `+ JSON.parse()+`メソッドで情報を読み取り、必要に応じてデータを操作できます。

変数 `+ obj `に割り当てるJSONオブジェクトを確認し、 ` obj `を関数に渡して ` JSON.stringify()`を使用して変換します。 この文字列を変数 ` s +`に割り当てることができます。

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}

var s = JSON.stringify(obj)

これで、「+ s +」で作業する場合、JSONをオブジェクトではなく文字列として使用できるようになります。

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

`+ JSON.stringify()`関数を使用すると、オブジェクトを文字列に変換できます。 逆を行うために、 ` JSON.parse()+`関数を見てみましょう。

JSON.parse()

文字列は転送に便利ですが、クライアント側やサーバー側でJSON文字列に変換できるようにしたいでしょう。 `+ eval()`関数を使用してテキストをオブジェクトに変換できますが、あまり安全ではないため、代わりに ` JSON.parse()+`関数を使用します。

https://www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript/#functions-for-working-with-json [JSON.stringify()の例を変換するには]上記のセクションでは、文字列 `+ s +`を関数に渡し、新しい変数に割り当てます。

var o = JSON.parse(s)

次に、オブジェクト `+ o `を操作します。これはオブジェクト ` obj +`と同じです。

さらに詳しく見るために、HTMLファイルのコンテキスト内での `+ JSON.parse()+`の例を考えてみましょう。

<!DOCTYPE html>
<html>
<body>

<p id="user"></p>

<script>
var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

var obj = JSON.parse(s);

document.getElementById("user").innerHTML =
"Name: " + obj.first_name + " " + obj.last_name + "<br>" +
"Location: " + obj.location;
</script>

</body>
</html>
OutputName: Sammy Shark
Location: Ocean

HTMLファイルのコンテキスト内で、JSON文字列「+ s +」が、https://www.digitalocean.com/community/tutorials/howによってページの最終レンダリングで取得可能なオブジェクトにどのように変換されるかを確認できます。 -to-work-with-json-in-javascript#accessing-json-data [JSONへのアクセス]ドット表記を使用します。

`+ JSON.parse()+`はJSON文字列を解析してオブジェクトに変換する安全な関数です。

結論

JSONはJavaScriptで使用する自然な形式であり、多くの一般的なプログラミング言語で使用できる多くの実装があります。 別のプログラミング言語でフォーマットを使用する場合は、「http://www.json.org/[Introducing JSON]」サイトで完全な言語サポートを確認できます。

軽量でプログラミング言語とシステム間で容易に移行できるため、JSONはhttps://www.digitalocean.com/community/tutorials/how-to-create-a-twitter-appを含むAPIのサポートが強化されています[Twitter API]。

おそらく、独自の `+ .json +`ファイルを作成するのではなく、他のソースから調達します。 これらのhttps://www.digitalocean.com/community/tutorials/an-introduction-to-json#resources[resources]をチェックして、他のデータ構造をJSONに変換する方法を学習できます。