シェアする
About JSON and XML (Part 2) - Japanese Only
みなさまどうもでございます。
続きまして『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』について解説をしていきたいと思います。
ではではこの辺で。失礼致します。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
