第 10 回 JSON を使用したデータ転送

JavaScript オブジェクトを直接操作する

Brett D. McLaughlin
配信 2007年 3月 27日

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です： Ajax をマスターする

https://www.ibm.com/developerworks/jp/views/global/libraryview.jsp?series_title_by=ajax+をマスターする

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です：Ajax をマスターする

このシリーズの続きに乞うご期待。

この連載をずっと読んでいれば、データ・フォーマットについてはもう、幅広い知識が身に付いているはずです。以前の記事で説明したのは、多くの非同期アプリケーションではプレーン・テキストと単純な名前と値のペアが極めて有効に機能するということです。例えば、以下のようなデータを組み立てられます。

firstName=Brett&lastName=McLaughlin&email=brett@newInstance.com

このデータにこれ以上必要な操作はありません。Web の経験があれば、これがGET 要求で送信された情報のフォーマットであることがわかるはずです。

続いて連載で取り上げたのは、XML です。XML は相当話題になっているため (賛否両論含め)、Ajaxアプリケーションに登場しているのも当然です。連載の以前の記事を読み返せば、XML がどのようにしてプレーン・テキストに代わるデータ・フォーマットを実現しているかがわかります。

  <firstName>Brett</firstName>
  <lastName>McLaughlin</lastName>
  <email>brett@newInstance.com</email>
</request>

上記は最初に記載したデータと同じものですが、今度は XML フォーマットで保管されています。ここで注目に値する点は何もありません。プレーン・テキストと名前と値のペアの代わりにXML を使用できる別のデータ・フォーマットというだけです。

この記事ではさらにもう 1 つのデータ・フォーマット、JSON (JavaScript ObjectNotation) を紹介します。今まで目にしてきたデータ・フォーマットと似ている面とまったく違う面を併せ持つJSON は、さらなる選択肢となります。このように選択肢を広げるのは、理想的なことです。

選択肢の効果

JSON フォーマットの詳細を掘り下げる前に、読者はすでに XML を使う方法もプレーン・テキストで名前と値のペアを使う方法もわかっているのになぜ、さらに何回かの記事で別のデータ・フォーマットを取り上げる価値があるのかを理解してもらわなくてはなりません(次回の記事でも、JSON を取り上げます)。理由はもともと単純ですが、簡単に説明すると、選択肢が増えて問題に対処するオプションが多くなればなるほど、単なるソリューションではなく最善のソリューションを見つけられる可能性が高くなるからです。

名前と値のペアと XML の復習

この連載ではすでに、名前と値のペアが理にかなっているシチュエーションと、XMLがそれよりも適切な選択となるシチュエーションについて十分に説明しました。簡単に復習すると、必ず最初に名前と値のペアを使うことを考えるべきだということです。大抵の非同期アプリケーションではほとんど常に、名前と値のペアがもっとも簡単なソリューションとなります。しかもこのソリューションには、JavaScriptの非常に基本的な知識以外に必要なものは何もありません。

実際には代わりのデータ・フォーマットを使用するかどうかさえ考えるべきではありませんが、ただし、XMLに変更せざるを得ないような制約がある場合はその限りではありません。例えば、XMLフォーマットの入力を必要とするサーバー・サイド・プログラムにデータを送信する場合には当然、XMLをデータ・フォーマットとして使用することになります。その一方で、アプリケーションに複数の部分的な情報を送信する必要があるサーバーでは大抵、XMLがよりふさわしい選択となります。つまり、XML は Ajax アプリケーションからの要求よりも、Ajaxアプリケーションへの応答に使用されるのが一般的です。

選択肢への JSON の追加

名前と値のペアまたは XML のいずれかを使用している場合、基本的には JavaScriptを使ってアプリケーションからデータを取り出し、取り出したデータをあるデータ・フォーマットにすることになります。この場合、JavaScriptは主にデータ操作言語として機能し、Web フォームからデータを取り出して操作し、そのデータをサーバー・サイド・プログラムに送信しやすいフォーマットにします。

一方、JavaScript をフォーマット言語以上のものとして使用することもあります。Webフォームと要求との間でデータをやり取りするだけではなく、JavaScript 言語のオブジェクトを使って実際にデータを表すような場合です。そうなると、JavaScriptのオブジェクトからデータを抽出し、そのデータを名前と値のペアあるいは XMLに組み込むという作業が増えることになりますが、そこで威力を発揮するのがJSON です。JSON を使うと、JavaScript オブジェクトを要求 (同期または非同期)の一部として送信できるデータに簡単に変換することができます。

結論を言えば、JSON はある種の特効薬ではなく、極めて特定的な状況では理想的なオプションになるということです。そのような状況には決して出くわさないと決めてかからず、この記事と次回の記事を読んでJSON について学んでください。そうすれば、この種の問題に突き当たった場合に備えることができます。

JSON の基礎

簡単に言うと、JSON では JavaScript オブジェクト内の一連のデータを関数間、あるいは(非同期アプリケーションの場合は) Web クライアントからサーバー・サイド・プログラムに渡しやすいストリングに変換できます。ストリングは多少奇妙に見えますが(この後すぐ、例を記載します)、JavaScript で容易に解釈されるので、JSON では名前と値のペアよりも複雑な構造を表現できます。例えば、単なる単純なキーと値のリストではなく、配列や複雑なオブジェクトを表現することも可能です。

単純な JSON の例

極めて単純な例として、JSON では基本的には名前と値のペアを以下のように表現できます。

{ "firstName": "Brett" }

上記はかなり基本的なもので、実際には以下のようにプレーン・テキストの名前と値のペアで表現する場合よりも場所を取ります。

firstName=Brett

ただし、名前と値のペアをいくつもつなぎ合わせだすと、ついに JSON の真価が見えてきます。まず、名前と値のペアを複数持つデータのレコードは基本的に以下のように作成できます。

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

構文からすると、名前と値のペアと比べてそれほどの利点はありませんが、上記のJSON の方が断然使いやすく、読みやすさの点でも勝っています。具体的には、3つすべての値が同じレコードに組み込まれるのは明らかであり、中括弧がこれらの値に関連性があることをはっきりさせています。

値の配列

一連の値を表さなければならない場合、JSON のほうが読みやすくなるだけでなく、冗長さもなくなります。例えば人のリストが必要だとすると、XMLでは、多くの開始タグと終了タグに苦戦することになります。典型的な名前と値のペア(連載の以前の記事で説明したようなペア) を使うとしても、結局は専有データ・フォーマットに行き着くか、あるいはキー名をperson1-firstName のように変更することになります。

一方 JSON を使うと、中括弧で囲んだ複数のレコードをグループ分けするだけで済みます。

{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
]}

上記は難なく理解できるはずです。ここには people という名前の変数が 1 つだけあり、その値は3 つの項目を含む配列になっていて、その各項目が、名前、姓、E メール・アドレスを持つ個人のレコードになっています。上記の例を見れば、レコードをまとめて送信する方法、そして項目を中括弧で囲んで1 つの値にする方法がわかります。もちろん以下のように、同じ構文を使って(それぞれに複数のレコードを持つ) 複数の値を持つようにすることもできます。

{ "programmers": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
 ],
"authors": [
  { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
  { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
  { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
 ],
"musicians": [
  { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
 ]
}

上記で明らかなのは、複数の値を配列として持つ各値を、複数個表現できるということです。一方、レコード内の実際の名前と値のペアは、メイン・エントリー(programmers、authors、musicians) によって変わるという点も見逃せません。JSONは完全に動的なので、JSON 構造の途中でデータの表現方法を変更することができます。

言い方を変えれば、JSON フォーマットのデータを扱う際に従わなくてはならない制約は、あらかじめ定義されていないということです。つまり、表現方法を変更することも、さらには同じものをさまざまに表現することも、すべて1 つのデータ構造で対応できます。

JSON を JavaScript で使用する方法

JSON のフォーマットを理解してしまえば、JavaScript 内でこのフォーマットを使用するのは簡単です。JSONはネイティブ JavaScript フォーマットです。つまり、JavaScript 内でJSON データを操作するのに必要な特殊なAPI やツールキットはありません。

JSON データを変数に割り当てる

以下は、新しい JavaScript 変数を作成して、その変数に JSON フォーマットのデータのストリングを割り当てるという単純な例です。

var people =
  { "programmers": [
    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
   ],
  "authors": [
    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
   ],
  "musicians": [
    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
   ]
  }

何も複雑なことはありません。people に、これまで説明してきた JSON フォーマットのデータが含まれるようになっただけです。だたしデータは明らかに便利なフォーマットにはまだなっていないので、この変更に大きな意味はありません。

データにアクセスする

一目ではわからないかもしれませんが、上記の長々としたストリングは単なる配列なので、この配列をJavaScript 変数に組み込めば簡単にアクセスできるようになります。配列を区切るには、ピリオド区切り文字を使うだけで済みます。以上のことから、programmersリストの最初のエントリーに含まれる姓にアクセスするには、JavaScript で以下のようなコードを使います。

people.programmers[0].lastName;

インデックスはゼロを基準として付けられていることに注意してください。つまり、このコードはpeople 変数内のデータから始まり、programmers という項目に移ってから最初のレコード([0]) を抽出します。最後にアクセスするのは lastName キーの値です。その結果、ストリング値は"McLaughlin" となります。

以下に、同じ変数を使った例をいくつか記載します。

people.authors[1].genre                 // Value is "fantasy"

people.musicians[3].lastName            // Undefined. This refers to the fourth entry,
 and there isn't one

people.programmers.[2].firstName        // Value is "Elliotte"

このちょっとした構文を使用すれば、どんな種類の JSON フォーマットのデータでも操作できます。しかも、追加しなければならないJavaScript ツールキットや API は一切ありません。

JSON データを変更する

上記のドットと大括弧の表記を使用してデータにアクセスできるように、データの変更も同じように簡単に行えます。

people.musicians[1].lastName = "Rachmaninov";

ストリングを JavaScript オブジェクトに変換してしまえば、たったこれだけのコードで変数内のデータを変更できます。

ストリングに再び変換する

当然ながら、JavaScript オブジェクトを元のテキスト形式に簡単に変換できなければ、簡単にデータを変更できてもあまり価値はありません。このテキスト形式への変換も、JavaScriptではわけないことです。

String newJSONtext = people.toJSONString();

たったこれだけのコードで、どこででも使えるテキスト・ストリングにできます。このストリングを、例えばAjax アプリケーションで要求ストリングとして使うといったことも可能です。

それにも増して重要なのは、あらゆる JavaScript オブジェクトを JSON テキストに変換できるという点でしょう。JSONフォーマットのストリングが元々割り当てられている変数だけを操作する必要はありません。以下のようなコマンドを実行するだけで、例えばmyObject という名前のオブジェクトを変換できます。

String myObjectInJSON = myObject.toJSONString();

これが、JSON と、この記事で取り上げた他のデータ・フォーマットとの最大の違いです。JSONでは単純な関数を呼び出すだけで、そのまま使用できるフォーマット設定済みのデータを取得できます。他のデータ・フォーマットでは、生データとフォーマット設定済みデータとの間の変換を自分で処理しなければなりません。固有のデータ構造からテキストに変換する関数を提供するDOM (Document Object Model) のような API を使用するにしても、ネイティブのJavaScript オブジェクトと構文ではなく、API を調べてその API のオブジェクトを使用する必要がでてきます。

JavaScript オブジェクトの操作経験を積めば、データをサーバー・サイド・プログラムへの要求に組み込んで送信しやすいフォーマットに簡単に変換するにはほぼ間違いなく、JSONが有力候補となるはずです。

まとめ

非同期アプリケーションを突き詰めると、ほとんどすべてと言っていいほどデータに行き着きます。そのため、この連載ではデータ・フォーマットに多くの時間を費やしてきました。さまざまなツールと手法で、あらゆる種類のデータをそれぞれのデータ型に最適かつ最も効率的な方法で送受信できるようであれば、Ajaxのプロへの道を順調に進んでいます。XML とプレーン・テキストを使用する手腕の他に、ぜひJSON を加えてください。そうすれば、JavaScript のさらに複雑なデータ構造にも対処できるようになります。

この連載の次回の記事では、単なるデータ送信の枠を超えて、サーバー・サイド・プログラムでJSON フォーマットのデータを受信して処理する仕組みを詳しく説明します。また、サーバー・サイド・プログラムがスクリプトやサーバー・サイド・コンポーネントにJSON フォーマットのデータを送り返し、XML、プレーン・テキスト、そしてJSONの要求および応答をうまく組み合わせて使う方法も取り上げます。目標は柔軟性です。あなたは着実に、これらのツールを考えられるほとんどすべての組み合わせで組み合わせられるようになってきています。

ダウンロード可能なリソース

このコンテンツのPDF

目次