JSONは元々JavaScriptから派生したデータ形式
ですがそれはJavaScriptとは完全に独立したもので全く同じじゃありません。
なのでJS側にもJSONを扱うためのメソッドが存在します。
ここではそれらを使ってデータをJSONに変換したり元に戻す方法を解説
このページの目次
JSONの変換・解析のためのメソッド
そのメソッドというのが次の２つ
- JSON.parse()
- JSON.stringify()
どっちのメソッドもJSONオブジェクトに属しています。
名前を見れば分かるように parse は変換、 stringify は文字列化のためのもの
これらメソッドの使い方やコード例は次の通りです。
JSON.parse()
このメソッドはJSON文字列を戻のデータに戻すためのメソッド
元のデータというのは例えば数値とか文字列とか配列のことですね。
使い方は簡単でただ単にJSON文字列を渡すだけ
|
1 2 3 4 5 6 7 8 9 |
/** JSON（文字列） */ var json = `{ "apple": "リンゴ", "banana": "バナナ", "cherry": "チェリー" }`; /** JSONをデータに変換 */ var obj = JSON.parse(json); |
文字列 json を定義し、その後 parse(json) とすることで連想配列 obj に変換
変換されたデータは普通のデータと同じように扱うことが可能です。
あと上のコードでは長い文字列を書きやすくするために文字列リテラルを使ってます。
これは 複数行文字列の代入方法 でも説明したように長い文字列を書くのに便利です。
ちなみに解析に失敗すると parse は SyntaxError例外 を返してくる模様です。
なので例外が発生する可能性があるなら、次のように例外処理する必要もあり
|
1 2 3 4 5 6 |
try{ var obj = JSON.parse(json); console.log(obj); }catch(e){ console.error(e); } |
また parse ではJSON側で気を付けるべきことも１つあります。
それは配列などの末尾にコンマがあるのは認められないということ
つまり次のようなJSONは不正です。
|
1 |
["one", "two", "three", ] |
|
1 |
{"one": 1, "two": 2, "theree": 3, } |
なのでJSON文字列を渡すときは末尾のカンマに要注意
以上がJSON.parseを使ってJSON文字列をデータに変換する方法
細かな決まりはありますが、ただ文字列を渡すだけでいいので簡単です。
JSON.stringify()
こちらはあるデータをJSONとして文字列化するためのメソッド
さっきのparseメソッドのちょうど逆バージョンです。
例えば次は連想配列を文字列化しているコード例
|
1 2 3 4 5 6 7 8 9 |
/** JSON化したいデータ */ var obj = { "apple": "リンゴ", "banana": "バナナ", "cherry": "チェリー" }; /** データをJSON文字列に変換 */ var json = JSON.stringify(obj); |
ほんとにさっきのparseメソッドの例をそのまま逆にした感じです。
JSON.stringifyを使う時の注意点
以上がデータをJSON化したり、逆にデータに戻す方法
使い方もデータまたは文字列を渡すだけなので簡単です。
ただし JSON.stringify を使う場合はいくつか注意点があります。
それは次に挙げるようなこと
- 真偽値、文字列、数値は変換時に基本的な値に変換される
- JSON中に undefined や関数があると無視または null に変換される
どういう意味かについては次で説明する通りです。
真偽値、文字列、数値は変換時に基本的な値に変換される
つまり Boolean 、 String 、 Number に当てはまる値がJSON中にある場合、
それらは一般的にJavaScript内で使われる形式に勝手に変換されます。
例えば次がいくつかの変換例（コメント内を参照）
|
1 2 3 4 5 6 |
JSON.stringify('hoge'); /// => "hoge" JSON.stringify([1, 'two', 3]); /// => [1,"two",3] JSON.stringify({PI: 3.14}) /// => {"PI":3.14} |
シングルクォートで囲まれた文字列、数値や真偽値でない文字列とみなされる値
そういう値は変換後にダブルクォートで囲まれます。
また余計な空白なども一切削除されたコンパクトな形になるようです。
なので真偽値や数字をクォートで囲まないよう注意しましょう。
それらは全て文字列としてみなされてしまいます。
JSON中にundefinedや関数があると無視またはnullに変換される
もう１つ注意が必要なのが undefined や関数がJSON内に含まれる場合
まず連想配列に undefined や関数が見つかった場合は無視されます。
例えば次が無視されてしまうコード例
|
1 2 3 4 |
var obj = {'value': undefined}; console.log(JSON.stringify(obj)); /// => {} |
|
1 2 3 4 |
var obj = {'func': function(x, y){return x * y;}}; console.log(JSON.stringify(obj)); /// => {} |
コメント内に書いたのが実際のJSON文字列の中身
このようにJSON的に無効なキーや値を持つペアがあると無視されるので注意です。
また配列内で見つかった場合は無視ではなく null に変換されます。
例えば次が null に変換されてしまうコード例
|
1 2 3 4 5 6 |
var obj = { 'array': [undefined, 'hoge'] }; console.log(JSON.stringify(obj)); /// => {"invalid":[null,"hoge"]} |
|
1 2 3 4 5 6 |
var obj = { 'func': [function(x, y){return x * y;}] }; console.log(JSON.stringify(obj)); /// => {"func":[null]} |
どの変換されたかはコード内のコメントに書いた通りです。
こういう風にJSONでサポートされてないものを値にとることは不可能です。
しかも例外が返されるわけでもないので少し注意が必要ですね。
ここまでのまとめ
ということでJSONを扱う方法をもう一度まとめ
- JSON文字列をデータに変換
文字列を JSON.parse に渡すことで解析されたデータが取得可能
ただし解析に失敗した場合は例外が発生するので処理が必要 - データをJSON文字列に変換
データを JSON.stringify に渡すことでJSON文字列が取得可能
ただし undefined や関数などの値を含めると無視または null に変換される
以上JavaScriptでJSONを扱うメソッドについてでした。
