Ký sự BrSE

Những nẻo đường kỹ sư cầu nối

[IT読解] Bài 6 : JSON là khỉ gì

Tuần này xin gửi đến mọi người bài viết giới thiệu về JSON. Tác giả là 1 supper man của NTT Data chuyên về JavaScript. Mình cũng từng làm 1 project có dùng JSON nên hiểu được nhiều cái hay của nó. Qua bài viết này nếu bạn nào đã biết rồi thì nên đào sâu hơn. Còn chưa biết thì cứ tập làm 1 web nhỏ nhỏ xem thử nó hoạt động thế nào. Lý do đưa bài viết chuyên kỹ thuật lên để mọi người quen, sau này onsite khách hàng giao tài liệu thì sẽ biết cách đọc sao cho nhanh – cho đúng.

JSONとは何か? – JSON là khỉ gì

JSONとはJavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマットです。

その名前の由来の通りJSONはJavaScriptのオブジェクト表記構文のサブセットとなっており、XMLと比べると簡潔に構造化されたデータを記述することができるため、記述が容易で人間が理解しやすいデータフォーマットと言えます。

なお、JSONは2006年に「RFC 4627(http://www.rfc-editor.org/rfc/rfc4627.txt)」として公開されています。

例としてXMLとJSONで同じデータを記述したものをリスト1とリスト2に示します(図1)。

リスト1のXMLではすべての情報をタグで囲んだテキストノードとして記述していますが、XMLでデータを表現する場合、データの記述方法として属性とテキストノードの使い分けが必要になります。

JSONの場合、そのようなことを気にする必要はありません。また、XMLには閉じタグが必要となりますが、JSONの場合カッコに対応する閉じカッコ以外は不要です。JSONはXMLと比べるとタイプ数も少なく、きちんとインデントされていれば可読性も高いことがわかります。

図1:同データのXMLとJSONの記述例とAjaxの概念図(クリックで拡大)

JSONの利用シーン – Sử dụng JSON

JSONは前述の通り、JavaScriptのサブセットなのでeval()関数で評価することでJavaScriptオブジェクトに変換することができるという特徴があります。eval()関数は引数で渡された文字列をJavaScriptコードとして評価し、その結果を返します。

このようにJavaScriptとの親和性の高さから現在ではAjaxでのデータ交換フォーマットとして広く利用されるようになりました。

AjaxはもともとAsynchronous JavaScript + XMLの略で、Webブラウザ上で動作するJavaScriptでサーバからXMLデータを取得し、取得したデータをDHTMLを活用してコンテンツに動的に反映するという手法です(図1)。

このXMLの代わりにJSONが使われているわけです。JSONを利用することで冗長なXMLと比べて通信時のデータ量を削減できるなどのメリットもあります。

AjaxのサーバサイドはJavaやPHPなどの言語を利用して実装されることが多いのですが、すでに主要なプログラミング言語にはJSONの生成や読み込みを行うライブラリが存在するため、JavaScriptに限らず言語をこえたデータ交換のためのデータフォーマットとしてJSONを利用することができます。

JSONの記法 – Notation of JSON

それではJSONの記法について詳しく見ていきましょう。

JSONはオブジェクトと配列の組み合わせで構造化されたデータを表現します。

オブジェクトは{}で全体を囲み、キーと値のペアをコロン(:)で区切って記述します。カンマ(,)で複数のキーと値を記述することも可能です。キーには文字列のみ使用可能です。リスト3にオブジェクトの記述例を示します(図2)。

配列は繰り返し項目を表現する際に使用します。全体を[]で囲み、値をカンマ(,)で区切って列挙します。リスト4に配列の記述例を示します(図2)。

構造化されたデータを表現するために、オブジェクトと配列を自由にネストさせることができます。リスト5にオブジェクトと配列をネストさせた場合の記述例をします(図2)。

図2:JSONの記法

JSONで利用可能なデータ型 – Các kiểu dữ liệu trong JSON

続いてJSONで利用可能なデータ型について説明します。

JSONでは「数値」「文字列」「真偽値(true、false)」「配列」「オブジェクト」「null」のデータ型を利用することができます。

オブジェクトと配列の記述方法についてはすでに説明しました。ここでは数値と文字列について補足しておきましょう。

数値型は10進数で表記します。多くのプログラミング言語と同様整数および小数部、指数部の記述が可能です。

また、文字列はダブルクオートで囲み、改行やタブ文字、ダブルクオートなどの特殊文字はバックスラッシュ(\)でエスケープします。こちらも一般的なプログラミング言語をご存知の方にはお馴染みでしょう。

JSONの基本的な文法の説明は以上です。XMLでは表記の冗長さに加え、DTDやXML スキーマ、XMLスキーマの豊富なデータ型、名前空間などさまざまな事柄を意識する必要がありますが、それと比べるとJSONは非常にシンプルで覚えることが少ないことがわかります。

JavaScriptでJSONを使う – Sử dụng JSON trong JavaScript

実際にJavaScriptではどのようにJSONを扱うのでしょうか?

JSON形式の文字列をeval()関数で評価し、JavaScriptのオブジェクトに変換する例をリスト6に示します(図3)。

JSONのオブジェクトや配列は、JavaScriptでもオブジェクトのプロパティ、配列のインデックスを利用して参照することができます。

リスト6ではeval()関数でJSONをJavaScriptに変換していますが、eval()関数では任意のJavaScriptコードを実行可能なため、評価するJSONデータが悪意あるものであった場合にセキュリティ上の問題となってしまう可能性があります。

そのため実際にはJSONをパースし、JavaScriptのオブジェクトに変換するパーサを利用することが望ましいでしょう。参考までに「json.orgで公開されているJSONパーサ(http://www.json.org/json2.js)」を使ってJSONを読み込む例をリスト7に示します(図3)。

リスト7のJSON.parse()メソッドは最終的にはeval()関数でJavaScriptオブジェクトへの変換を行いますが、変換前に引数で渡されたJSONテキストがJSONの仕様に従っているかどうかをチェックし、不正なデータの場合は例外を投げます。

上記の例ではcatch節で例外の詳細メッセージをダイアログで表示していますが、実際のアプリケーションでは状況に応じて適切な例外処理を行うようにしましょう。

図3:JavaScriptでのJSONの各利用例(クリックで拡大)

JSONを生成する

AjaxアプリケーションではJSONデータを受信するだけでなく、JavaScriptからXMLHttpRequestでJSONデータを送信することもあります。

先ほど紹介したJSONパーサではJSONをJavaScriptのオブジェクトに変換するだけでなく、リスト8のコード例が示すように、JavaScriptのオブジェクトをJSONに変換することもできます(図3)。

なお、実際にAjaxアプリケーションを開発する際は今回紹介したような単体のJSONパーサよりも「prototype.js(http://prototypejs.org/)」などの高機能なライブラリを使用することの方が多いでしょう。

今回はJSONの基礎知識と利用シーン、JavaScriptからの利用方法について簡単に解説しました。

本記事でも述べたとおり、JSONはAjaxのデータフォーマットのほか、JavaScriptに限らずさまざまな言語で利用可能な汎用データフォーマットとしても利用されはじめています。

次回は実際にJSONを使用したAjaxアプリケーションを開発していきます。

https://thinkit.co.jp/article/70/1?page=0%2C2

5/5 - (1 vote)
Nếu thấy hay thì đừng ngại