JavaScriptでJSONを操作する方法
はじめに
JSONはJavaScriptプログラミング言語から派生しているため、JavaScriptでデータ形式として使用するのは自然な選択です。 JSONはJavaScript Object Notationの略で、通常は「Jason」という名前のように発音されます。JSONの一般的な用語の詳細については、「JSONの概要」チュートリアルを参照してください。JavaScriptプログラムでJSONを使用できる場所について考え始めるために、JSONの一般的な使用例は次のとおりです:
- データの保存
- ユーザー入力からのデータ構造の生成
- サーバーからクライアント、クライアントからサーバー、サーバーへのデータの転送
- データの設定と検証
このチュートリアルでは、JavaScriptでJSONを操作する方法を紹介します。 この紹介を最大限に活用するには、JavaScriptプログラミング言語にある程度精通している必要があります。
JSON形式
JSONの形式はJavaScriptオブジェクト構文から派生していますが、完全にテキストベースです。 これは、通常、中括弧で表示されるキーと値のデータ形式です。 JSONを使用している場合、JSONオブジェクトは.jsonファイルに表示される可能性がありますが、プログラムのコンテキスト内でJSONオブジ 構文と構造の詳細はこちらをご覧ください。
.jsonファイルを操作しているときは、次のようになります。
.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オブジェクトはJSONに似ていますが、JavaScriptオブジェクトのキーは引用符で囲まれた文字列ではありません。 また、JavaScriptオブジェクトは値に渡される型の制限が少ないため、関数を値として使用できます。
現在オンラインになっているウェブサイトのユーザー Sammy SharkのJavaScriptオブジェクトの例を見てみましょう。 これはJSONオブジェクトとして非常によく知られていますが、キーの周りに引用符はありません（first_namelast_nameonlineonlineonlinefull_name
）、最後の行に関数値があります。
上記のJavaScriptオブジェクトのデータにアクセスしたい場合は、ドット表記を使用して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_namesammy.last_namesammy.online変数
sammy.first_namesammy.last_namesammy.online変数
sammy.first_namesammy.last_namesammy.onlinesammy最初に、ドットが続き、アクセスするキーが続きます。 ポップアップでfirst_nameキーに関連付けられた値を示すJavaScriptアラートを作成するには、JavaScriptalert()first_namesammyJSONオブジェクトから正常に呼び出しました。JSONからデータにアクセスするために角括弧構文を使用することもできます。 これを行うには、角括弧内の二重引用符でキーを保持します。 上記のsammyalert()関数で角括弧構文を使用すると、次のようになります:ネストされた配列要素を操作しているときは、配列内のアイテムの番号を呼び出す必要があります。 以下のJSONを考えてみましょう。
var user_profile = { "username" : "SammyShark", "social_media" : }文字列facebookにアクセスするには、ドット表記のコンテキスト内で配列内のその項目を呼び出ネストされた要素追加のドットを使用します。
ドット表記または角括弧構文を使用すると、JSON形式に含まれるデータにアクセスできます。
JSONを操作するための関数
このセクションでは、JSONの文字列化と解析のための二つの方法を見ていきます。 JSONをオブジェクトから文字列に、またはその逆に変換できることは、データの転送と保存に便利です。
JSON。stringify()
JSON.stringify()関数はオブジェクトをJSON文字列に変換します。
文字列は、軽量な方法で情報を格納または渡すことによって、クライアントからサーバーにデータを転送するのに便利です。 たとえば、クライアント側でユーザーの設定を収集し、サーバーに送信することができます。 その後、JSON.parse()objに割り当てるJSONオブジェクトを見てから、JSON.stringify()objs:
var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}var s = JSON.stringify(obj)さて、sを使用すると、JSONをオブジェクトではなく文字列としP>
'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'JSON.stringify()JSON.parse()関数を見てみましょう。
JSON。parse()
文字列は輸送に便利ですが、クライアント側やサーバー側のJSONオブジェクトに変換できるようにしたいと思うでしょう。 テキストをオブジェクトに変換するには、eval()JSON.parse()
JSONの例を変換します。上記のstringify()セクションでは、文字列sを関数に渡し、それを新しい変数に割り当てます。
var o = JSON.parse(s)次に、オブジェクトoobj。より深く見るために、HTMLファイルのコンテキスト内でのJSON.parse()の例を考えてみましょう。
JSON.parse():
<!DOCTYPE html><html><body><p></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 SharkLocation: OceanHTMLファイルのコンテキスト内で、JSON文字列sが、ドット表記を介してJSONにアクセスすることにより、ページの最終レンダリング時に取得可能なオブジェクトに変換される方法を見ることができます。P>
JSON.parse()は、JSON文字列を解析してオブジェクトに変換する安全な関数です。
結論
JSONはJavaScriptで使用する自然な形式であり、多くの一般的なプログラミング言語で使用できる多くの実装を持っています。 他のプログラミング言語でこの形式を使用したい場合は、”Introducing JSON”サイトで完全な言語サポートを見ることができます。
軽量であり、プログラミング言語とシステムの間で容易に転送されるため、JSONはTwitter APIを含むApiでのサポートが強化されています。