JavaScriptでJSONを扱うためのチュートリアル

はじめに

さまざまな方法で、JSONをJavaScriptで使用できます。最も基本的な用途の1つは、データの保存です。また、クライアント間、サーバー間、またはサーバーからクライアントへのデータ転送にも使用できます。その他の便利な用途としては、データの構成や検証、データ構造の生成などがあります。

このチュートリアルでは、JavaScriptプログラムでJSONを使用する方法について説明します。すでにJavaScriptでのプログラミング経験がある場合は、簡単に理解できるはずです。

JSONとは？

JSONはJavaScript Object Notationの略です。さまざまな種類のデータを共有できるように設計されたフォーマットです。JSONは主にJavaScriptを主要なプログラミング言語として利用します。また、Python, PHP, Ruby、およびJavaなどの他の言語でも動作します。読みやすく、非常に軽量で、多くのフォーマットを必要としません。このフォーマットの一般的な構文と構造については、次のチュートリアルを参照してください：JSONデータ共有フォーマットの概要.

JSONは単独で使用することも、別のファイル形式で定義することもできます。単独で使用する場合は、.json拡張子を使用します。別のフォーマットで使用する場合は、引用符内のJSON文字列として、または変数に割り当てられたオブジェクトとして表示されます。たとえば、JSONは.htmlフォーマットでも使用できます。このフォーマットを使用すると、サーバーとブラウザ間のデータ転送を比較的容易に行うことができます。

JSONフォーマットはテキストベースです。キーと値のデータは波括弧内に表示されます。一般的な.jsonファイルは次のようになります。

JSONオブジェクトが.jsまたは.htmlファイルにある場合、次のように変数として表示されます。

場合によっては、すべてが1行で表示されることもあります。これは、JavaScriptファイル内でJSONがオブジェクトではなく文字列としてレンダリングされる場合です。

JSONオブジェクトは文字列に変換できます。これは、迅速なデータ転送を行いたい場合に便利です。

JSONとJavaScriptオブジェクトの比較

前述のように、JSONは任意のプログラミング言語で動作します。ただし、JavaScriptオブジェクトはJavaScriptでのみ操作できます。JSONとJavaScriptの構文は似ています。違いは、JavaScriptオブジェクトが引用符ではなく文字列で表示される点です。さらに、JavaScriptオブジェクトは関数を値として使用できるため、制限が少なくなります。

次の例では、ユーザーのJavaScriptオプションを示しています。ユーザーはSammy Sharkで、現在オンラインです。

ご覧のとおり、first_name, last_name, online、またはfull_nameなどのキーの周囲に引用符はありません。また、最後の行には関数の値が配置されています。文字列形式でデータにアクセスしたい場合は、ドット記法を使用してuser.first_nameを呼び出すことができます。代わりにフルネームを取得したい場合は、関数であるためuser.full_name()を使用します。

JSONデータへのアクセス方法

前のセクションで触れたように、JavaScriptではドット記法を使用してJSONデータにアクセスできます。例として、sammy:

値にアクセスするためのドット記法は次のようになります。

最初に入力するのは変数です。その後にドットを配置します。最後に、アクセスしたいキーを指定します。

たとえば、JavaScriptで、次のfirst_nameキーの値を示すアラートを作成したいとします。ポップアップに表示させるには、JavaScriptのalert()関数を次のように使用します：

JSONからデータにアクセスするもう1つの方法は、角括弧（スクエアブラケット）構文を使用することです。キーは角括弧内にダブルクォーテーションで囲んで配置する必要があります。以下は、前の例の続きです：

ネストされた配列要素を扱う場合はどうでしょうか？この場合、配列内のアイテムのインデックス番号を指定する必要があります。次の例を見てみましょう：

たとえば、文字列facebookにアクセスしたいとします。ドット記法を使用して、インデックス番号で配列内のそのアイテムにアクセスする方法は次のとおりです：

ネストされた要素ごとに、ドットを追加することを忘れないでください。

JSONで使用される関数

次に、JSONで使用できるいくつかの関数を見ていきます。JSONをオブジェクトから文字列へ、または文字列からオブジェクトへと変換できるようになると、データの転送や保存が非常に簡単になります。ここでは、JSONをシリアライズ（文字列化）およびパース（解析）する2つの異なる方法について説明します：

• JSON.stringify()

データを軽量に転送したい場合は、文字列を使用する方が適しています。そのため、クライアントからサーバーへのデータの保存や転送に文字列が使用されます。次の例を考えてみましょう。たとえば、あるマシンでユーザーの設定データを収集しているとします。この情報をサーバーに送信する必要があります。この目的には文字列を使用します。その後、JSON.parse()を使用して元に戻すことで、データを読み取って操作することができます。

ここで取り上げる関数は、JSON.stringify()です。この関数は、JSONオブジェクトをJSON文字列に変換します。この例では、オブジェクトを変数objに代入します。そして、JSON.stringify()関数を使用して変換します。これを行うには、関数にobjを渡し、その文字列を変数sに次のように代入します：

変数sを呼び出すと、JSONが文字列として返されます：

• JSON.parse()

当然ながら、JSON.parse()は逆の機能を提供します。データの転送が終わったら、操作できるようにJSONオブジェクトに戻す必要があります。1つの方法として、eval()関数を使用することが挙げられます。しかし、このアプローチはあまり安全ではありません。そのため、私たちはJSON.parse()関数を使用することを好みます。

前の例をもう一度考えてみましょう。文字列sをJSON.parse()関数に渡します。そして、それを新しい変数に代入します：

これで、新しいオブジェクトはoになります。これはobjと同じになります。次のように、HTMLファイル内でJSON.parse()を使用することを考えると、より理解が深まります：

ここでは、文字列 s を取得可能なオブジェクトに変換した方法を実際に確認できます。したがって、JSON.parse() は、JSON文字列をオブジェクトに変換するための安全な選択肢です。

まとめ

このチュートリアルを通じて見てきたように、JSONはJavaScriptにおいて多くの実装方法があります。ほぼすべてのプログラミング言語で使用できるため、自然な選択肢となり、特に便利です。さらに、これはほんの入り口に過ぎません。JSONでできることはまだまだたくさんあります。すでにAPIでもサポートされています。

以下は、当ブログの、JavaScriptプログラミングに役立つ追加リソースです：

• 次の方法を学びましょう：JavaScriptにおけるプロトタイプと継承の仕組み.
• 詳細を見る：HTMLにJavaScriptを追加する方法.
• 独自のWebアプリケーションを構築している場合は、最適なサーバー設定の選択方法に関するガイドをご覧ください.

ハッピーコンピューティング！