JavaScriptでJSONを操作する方法

提供：Dev Guides
移動先:案内、検索

序章

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

一般的な用語でのJSONの詳細については、「JSONの概要」チュートリアルをお読みください。

JavaScriptプログラムのどこでJSONを使用できるかを考えるために、JSONの一般的な使用例は次のとおりです。

  • データの保存
  • ユーザー入力からのデータ構造の生成
  • サーバーからクライアント、クライアントからサーバー、サーバーからサーバーへのデータの転送
  • データの構成と検証

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

JSON形式

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

JSONを使用している場合、.jsonファイルにJSONオブジェクトが表示される可能性がありますが、プログラムのコンテキスト内にJSONオブジェクトまたは文字列として存在することもできます。 構文と構造について詳しくは、こちらをご覧ください。

.jsonファイルを使用している場合、次のようになります。

sammy.json 

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

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

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

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

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

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

JSONの一般的な形式と、それを.jsonファイルとして、またはJavaScript内でオブジェクトまたは文字列としてどのように表示するかについて説明しました。

JavaScriptオブジェクトとの比較

JSONはあらゆるプログラミング言語で使用できるように開発されましたが、JavaScriptオブジェクトはJavaScriptプログラミング言語を介してのみ直接操作できることを覚えておく価値があります。

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

現在オンラインになっているWebサイトユーザーのSammySharkの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オブジェクトのデータにアクセスする場合は、ドット表記を使用して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

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

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

alert(sammy["online"]);
Outputtrue

ネストされた配列要素を使用している場合は、配列内のアイテムの番号を呼び出す必要があります。 以下の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オブジェクトを確認し、JSON.stringify()を使用して、objを関数に渡して変換します。 この文字列を変数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オブジェクトに変換できるようにする必要があります。 これは、JSON.parse()関数を使用して実行できます。

上記の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が、ドット表記を介して JSON にアクセスすることにより、ページの最終レンダリングで取得可能なオブジェクトに変換される方法を確認できます。

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

結論

JSONはJavaScriptで使用する自然な形式であり、多くの一般的なプログラミング言語で使用できる多くの実装があります。 この形式を別のプログラミング言語で使用する場合は、「 IntroductioningJSON」サイトで完全な言語サポートを確認できます。

軽量でプログラミング言語とシステム間で簡単に転送できるため、JSONは TwitterAPIなどのAPIでサポートが強化されています。

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

「https://www.finddevguides.com/index.php?title=JavaScriptでJSONを操作する方法&oldid=101871」から取得
Powered by MediaWiki