TOC

JavaScriptでJSONを使用する方法

前書き

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オブジェクトまたは文字列として存在することもできます。 syntax and structure hereについてもっと読む。

.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）、％のいずれにも引用符はありません。 （t4）s最後の行に関数値があります。

上記のJavaScriptオブジェクトのデータにアクセスする場合は、dot notationを使用して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アラートを作成するには、JavaScriptalert()関数を呼び出します。 

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()関数を使用します。

上記のJSON.stringify()セクションの例を変換するには、文字列sを関数に渡し、それを新しい変数に割り当てます。 

var o = JSON.parse(s)

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

詳細を確認するために、HTMLファイルのコンテキスト内のJSON.parse()の例を考えてみましょう。 












OutputName: Sammy Shark
Location: Ocean

HTMLファイルのコンテキスト内で、JSON文字列sが、ドット表記を介してaccessing the JSONによってページの最終レンダリングで取得可能なオブジェクトにどのように変換されるかを確認できます。

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

結論

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

JSONは軽量で、プログラミング言語とシステム間で簡単に転送できるため、Twitter APIを含むAPIでのサポートが増えています。

独自の.jsonファイルを作成するのではなく、他のソースからそれらを調達する可能性があります。 これらのresourcesをチェックして、他のデータ構造をJSONに変換する方法を学ぶことができます。

Related