Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript
実践編

  1. 超詳細解説 デジタル時計を作ってみよう(1)
  2. 超詳細解説 デジタル時計を作ってみよう(2)
  3. 超詳細解説 デジタル時計を作ってみよう(3)
  4. 超詳細解説 デジタル時計を作ってみよう(4)
  5. 超詳細解説 デジタル時計を作ってみよう(5)
  6. 超詳細解説 デジタル時計を作ってみよう(6)
  7. 超詳細解説 デジタル時計を作ってみよう(7)
  8. 超詳細解説 デジタル時計を作ってみよう(8)
  9. 超詳細解説 デジタル時計を作ってみよう(9)
  10. 超詳細解説 デジタル時計を作ってみよう(10)
  11. Ajax(XMLHttpRequest)について
  1. HTTPプロトコルとGETとPOSTについて(1)
  2. HTTPプロトコルとGETとPOSTについて(2)
  3. JSONとXMLについて(1)
  4. JSONとXMLについて(2)
  5. XMLHttpRequestの使い方(1)
  6. XMLHttpRequestの使い方(2)
  7. JSとAjaxを使った投稿フォームの構築(1) HTMLのおさらい
  8. JSとAjaxを使った投稿フォームの構築(2) 送信ボタンの処理について
  9. JSとAjaxを使った投稿フォームの構築(3) 各フォーム部品からデータを取得(1)
  10. JSとAjaxを使った投稿フォームの構築(4) 各フォーム部品からデータを取得(2)
  11. JSとAjaxを使った投稿フォームの構築(5) 取得した入力データをAjaxで送信
  1. トップページ
  2. JavaScript実践編 - JSONとXMLについて(1)

JSONとXMLについて(1)

みなさまどうも。

これまでの記事で『Ajax』に必要な知識の『HTTP通信』とかをやって来ましたがもう1つ必要なものである『JSON』って子が居るのでそれを確認していきましょう。

『JSON』の正式名称は『JavaScript Object Notation』になり、読み方は『ジェイソン』になります。13日の金曜日しか活動しないニート予備軍でアイスホッケーなお面を付けたガタイの良い彼とは一切関係はございません。

この『JSON』はデータ記述言語の1つになり、昨今のIT業界だと大体この子を使って通信しているわけでとっても偉い子になりますね。

んで「データ記述言語ってなんじゃらほい?」ってお話なんですがこれは「配列とか連想配列的な概念を使ったデータの表記方法」だと思ってしまってOKです。連想配列はJavaScriptになるとオブジェクトって呼ばれてるやつですね。

データ記述言語を説明するにあたってちょいと思い出して頂きたいのが配列とか連想配列についてです。配列とか連想配列とかって「『キー』と『値』をセットとする概念で構築されたデータ」って感じでしたよね。

JavaScriptで配列と連想配列(オブジェクト)を定義するとなると以下のようになります。

var arr = ['miku', 'IA']; // これは配列

var map = { // これは連想配列(オブジェクト)
	"name": "初音ミク",
	"category": "VOCALOID"
};

恐らく当記事をお読みの皆様は配列とか連想配列についてよく存じていると思うのですが「欲しいデータを的確に判定したり抽出したりする」ってなると配列とか連想配列の概念って凄く強力ですよね。

これは要するに各データに名前を付けたりカテゴリー分けしたりしてるだけなんですが「データの取扱においてこれほど強力な概念はないんじゃね?」ってレベルで有用に感じて頂けるのではないかと思います。

んでほぼ全てのプログラム言語に配列とか連想配列的な機能は組み込まれているのですがここで1つ問題が発生します。

それは配列とか連想配列の記述方法や裏側の動作が結構ちがうって事です。例えばPHPになると以下のように定義します。

$arr = ['miku', 'IA']; // これは配列

$map = [ // これは連想配列
	'name' => '個人アカウント',
	'category' => 'VOCALOID'
];

配列や連想配列の概念はほぼ同じなわけなんですがJavaScriptとはやはり記述が結構違ってしまっていますよね。

全ての処理を同じ言語で構築できれば良いのですがそういうわけにもいかないので「違う言語で定義されたデータを違う言語で受け取る」とかなるとここままだと上手く処理を組むことが出来ません。そこで生まれたのがデータ記述言語ってやつになります。

要するに「配列とか連想配列的な概念で構築されたデータを色々な言語で扱うことが出来るようにその部分だけ共通化した規格を用意しておこうぜー」って感じですね。

んで『JSON』が普及する前は『XML』(Extensible Markup Language)っていう子が良く使われていました。『XML』は以下のようなものになります。

<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/xsl" href="testxsl.xsl"?>
<VOCALOID>
	<name0>初音ミク</name0>
	<name1>IA</name1>
</VOCALOID>

これちょっとどこかで見たことありますよね。そうです、皆様が良く触っているであろう『HTML』でございます。

実は『HTML』って『XML』の構文を参考に設計された言語なので『XML』は『HTML』と同じように開始タグとか閉じタグとかを使ってデータをまとめる構造になっています。

さて、この『XML』くんも全然悪くはないのですがちょっと記述が面倒くさそうな感じありますよね。

『HTML』を書いていて誰しもが感じた事あるのではという予感なのですが開始タグとか閉じタグとかってタイピングが少々面倒くさいんですよね。閉じタグ忘れだったりミスが多くなりがちなのもあまりよろしくない感じです。

んで「配列とか連想配列とかの概念を使いつつもっと簡潔にデータを記述する方法は無いかなー」って偉い人達が思ったわけなんですがそこで注目されたのがJavaScriptくんです。

改めてJavaScriptくんの配列と連想配列の記述方法を見てみましょう。

var arr = ['miku', 'IA']; // これは配列

var map = { // これは連想配列(オブジェクト)
	"name", "初音ミク",
	"category": "VOCALOID"
};

なんだか『XML』と見比べると凄くシンプルで配列とか連想配列とかの概念もちゃんと存在しているし中々良さそうな感じですよね。

というわけでJavaScriptの記述方法を元に偉い人達が作ったデータ記述言語の1つが『JSON』になります。『JSON』は以下のように記述します。

{
	"name":"初音ミク",
	"category":"VOCALOID"
}

ご覧の通りJavaScriptの記述方法とほぼ同じです。しかも『XML』と比べるとかなり簡潔に書けるのでデータ量も凄く少なくなってそうですよね。そこも良い感じに感じて頂けたのではないかと思います。

そしてほぼ全ての言語(一部除く)に『JSONを処理する機能』は大体用意されているので通信する際は『JSON』を使うと色々と調子良かったりします。まあ仮に用意されてなくても文字列を分割して処理すればOKなので結構簡単に『JSON』化する処理は書けちゃったりします。

というわけで次の記事では『JSON』の記述方法について軽くやっていきましょう。ではではこの辺で失礼致します。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。