JSONとXMLについて(2)

みなさまどうもでございます。

続きまして『JSON』の記述方法について色々見ていきましょう。

まず最初にJavaScriptには『JSON』を扱う処理が用意されているのでそれをちょいと紹介しておきます。それは以下の『JSON.stringify()』くんと『JSON.parse()』くんになりますね。使い方もそこまで難しくはないと思います。

// JavaScriptの配列とか連想配列をJSON化(文字列)にしたい場合は以下です。
var json = {"text":"test", "number": 1, "bool": true, "null": null};
JSON.stringify(json);

// JSON(文字列)をJavaScriptの配列とか連想配列に変換したい場合は以下です。
JSON.parse('{"text":"test", "number": 1, "bool": true, "null": null}');

JavaScriptはブラウザの開発ツールとかでさくっと実行できる言語なので普段JavaScriptを書いていない人でも上記の処理を覚えておくと色々と楽ちんになるかもでございます。

続きまして『JSON』の概要についてですが、基本的な概念としましては配列と連想配列をイメージしてしまってOKです。さくっと書いてみると以下のような感じになりますね。

{"text":"test", "number": 1, "bool": true, "null": null}

そんでもって『JSON』は半角スペースとかタブ文字とか改行とかは良い感じで無視してくれるので以下のように読みやすくインデントすることも可能です。

{
	"text":"test",
	"number": 1,
	"bool": true,
	"null": null
}

ただちょいと注意点があるのですがJavaScriptでは文字列内の改行は不可なので上記のようにインデントされた状態でそのまま『JSON.parse()』の『()』の中に貼り付けるともれなくエラーになっちゃうのでそこはちょいと気をつけて下さい。

// JavaScriptでは文字列内の改行は出来ないので以下はエラーです。
JSON.parse('
	{
		"text":"test",
		"number": 1,
		"bool": true,
		"null": null
	}
');

そしたら『JSON』の形式について解説していきます。まず以下のように値をぽんっと置く感じの全く構造が無いような『JSON』も可能です。

1

上記は『1』が書いてあるだけなんですがこれも一応『JSON』に該当します。ただこの状態だとほぼ意味がないのでこのパターンで『JSON』を使用する事はまず無いと思います。

そこで登場するのが配列と連想配列になるわけなんですがこれはJavaScriptとほぼ同じ記号を使って構築する感じになります。配列なら『[]』で、連想配列(オブジェクト)なら『{}』を使用し、連想配列の場合のキーと値を紐付ける記号は『:』になります。以下のような感じですね。

[0, 1, 2]

{"test": 0, "test1": 1}

JavaScriptと同じように配列または連想配列の入れ子も許可されているのでそれも注目ですね。

[
	{"test": 0, "test1": 1},
	{"test2": 2, "test3": 3}
]

配列または連想配列の内部の区切り文字は『,』になります。

ここでちょっと気をつけて頂きたいのが配列または連想配列の内部の最後の要素の末尾に『,』を置くとさくっとエラーになります。以下のような感じですね。

[
	{"test": 0, "test1": 1},
	{"test2": 2, "test3": 3}, // このように『,』をここに置くとエラーです。
]

JavaScriptでは上記の記述で全然OKなんですが『JSON』はNGになっちゃいます。多言語で差が無く実行できるよう構成された『JSON』は凄く構文が厳しいのでこういうとこは色々と気をつけて下さい。まあ『JSON.parse()』とかを使って毎回確認するだけでミスは防げると思うので特に問題は無いかなって感じです。

あと『JSON』にはコメント構文が用意されていませんので上記のように『//』を使ったコメントなんかも使えませんのでご注意です。個人的にコメント構文は用意して欲しかったなーって気持ちなのですが仕様として決まってしまっているのでここはスパッと諦めるしかないですね。

続きまして『JSON』の値に取れるものは数値、文字列、真偽値、nullって感じですね。

数値は『3.14』とかの浮動小数点もOKで、『-3.14』とか書けばマイナスの値も取ることが出来ます。ただし『+3.14』っていうのはNGになります。正の値ならそのままの数値を記述しちゃって下さい。あと使用出来るのは10進数のみとなります。16進数とかは使えませんのでご注意です。

真偽値はいつも通りの『true』と『false』、『null』はそのままnullと書けばOKでございます。ただここも気をつけなければいけない点があり、『true』を『True』と書いたり『null』を『NULL』と書くとエラーになります。『NULL』って言語によってはやりがちなとこなのでめっちゃご注意ですね。これについては「『JSON』は全部小文字で！」って丸暗記しちゃうと良いかもでございます。

さて続いてちょっと気をつけるとこが多い文字列の解説にいきます。まずJavaScriptでは『'』と『"』、どちらを使っても文字列として表記ができましたが『JSON』は『"』しか使えません。なので以下はエラーです。ここ超間違いやすいとこなんでむっちゃご注意ポイントでございます。

['初音', 'miku']

あと『\』を使ったエスケープ処理も用意されているわけなんですがここも超ご注意ポイントがあります。『\』を使ったエスケープ処理、ってことなんで文字列としての『"』を表記したい場合は『\"』と書けば動きそうですよね。以下のような感じです。

["\"初音\"", "\"miku\"]

しかしこれはエラーになっちゃいます。

ちょっとややこしいのですが『\』はその記号自体がエスケープ文字になっているため、文字列としての『"』を表記したい場合は『\"』ではなく『\\"』と書かなければNGです。これはハマりやすいとこなので超絶お気をつけ頂ければと思います。

["\\"初音\\"", "\\"miku\\"]

そして連想配列のキーで許可されているのは文字列のみとなっています。JavaScriptだと以下のように

var obj = {
	test: 0,
	"test1": 1
};

キーをそのまま書いてもOKだし『"』とか『'』でくくってもOKだしって感じでしたよね。これ『JSON』になるとNGになっちゃいます。

そしてキーは文字列ならOK、ってことなので以下のように

{"1": 1}

キーを『"1"』みたいに数値のみにして記述したり『"true"』や『"null"』とかにしたりって事も『JSON』ではOKなんですがこれは著者的にあまり推薦しません。

というのも、プログラム言語によってはキーが『1』だった場合とキーが『"1"』だった場合で同じデータとして扱ってしまったりっていう場合があったりするので少々危険な感じなんですよね。こういう曖昧なとこを残すと事故の元になりがちだし『1』とか『"true"』とか『"null"』とかにするメリットもそれほど無いしで避けたほうが無難かなって感じです。

そんでもって最後に拡張子のお話なんですが『JSON』の拡張子は『.json』が使われるのが普通です。ただ『JSON』って実はただのテキストデータなので『json.txt』とかに『JSON』を書いて読み込ませる事も余裕で可能なのでこの辺は好き好きでOKかなと思います。ただ『.json』にした方が分かりやすいので特に目的がない場合は『.json』にしたほうが無難かもでございます。

というわけで『JSON』の解説は以上になりますね。続いての記事では『Ajax』の要である『XMLHttpRequest』について解説をしていきたいと思います。

ではではこの辺で。失礼致します。

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

著者が愛する小型哺乳類

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

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

トップページへ

前の記事へ

次の記事へ

Tweet

シェア