JavaScriptでデータをJSONに変換したり戻したりする方法まとめ

JSONは元々JavaScriptから派生したデータ形式

ですがそれはJavaScriptとは完全に独立したもので全く同じじゃありません。

なのでJS側にもJSONを扱うためのメソッドが存在します。

ここではそれらを使ってデータをJSONに変換したり元に戻す方法を解説

JSONの変換・解析のためのメソッド

そのメソッドというのが次の2つ

  • JSON.parse()
  • JSON.stringify()

どっちのメソッドもJSONオブジェクトに属しています。

名前を見れば分かるように parse  は変換、 stringify  は文字列化のためのもの

これらメソッドの使い方やコード例は次の通りです。

JSON.parse()

このメソッドはJSON文字列を戻のデータに戻すためのメソッド

元のデータというのは例えば数値とか文字列とか配列のことですね。

 

使い方は簡単でただ単にJSON文字列を渡すだけ

文字列 json  を定義し、その後 parse(json)  とすることで連想配列 obj  に変換

変換されたデータは普通のデータと同じように扱うことが可能です。

あと上のコードでは長い文字列を書きやすくするために文字列リテラルを使ってます。

これは 複数行文字列の代入方法 でも説明したように長い文字列を書くのに便利です。

 

ちなみに解析に失敗すると parse  は SyntaxError例外 を返してくる模様です。

なので例外が発生する可能性があるなら、次のように例外処理する必要もあり

 

また parse  ではJSON側で気を付けるべきことも1つあります。

それは配列などの末尾にコンマがあるのは認められないということ

つまり次のようなJSONは不正です。

なのでJSON文字列を渡すときは末尾のカンマに要注意

 

以上がJSON.parseを使ってJSON文字列をデータに変換する方法

細かな決まりはありますが、ただ文字列を渡すだけでいいので簡単です。

JSON.stringify()

こちらはあるデータをJSONとして文字列化するためのメソッド

さっきのparseメソッドのちょうど逆バージョンです。

 

例えば次は連想配列を文字列化しているコード例

ほんとにさっきのparseメソッドの例をそのまま逆にした感じです。

JSON.stringifyを使う時の注意点

以上がデータをJSON化したり、逆にデータに戻す方法

使い方もデータまたは文字列を渡すだけなので簡単です。

 

ただし JSON.stringify  を使う場合はいくつか注意点があります。

それは次に挙げるようなこと

  • 真偽値、文字列、数値は変換時に基本的な値に変換される
  • JSON中に undefined  や関数があると無視または null  に変換される

どういう意味かについては次で説明する通りです。

真偽値、文字列、数値は変換時に基本的な値に変換される

つまり Boolean 、 String 、 Number に当てはまる値がJSON中にある場合、

それらは一般的にJavaScript内で使われる形式に勝手に変換されます。

 

例えば次がいくつかの変換例(コメント内を参照)

シングルクォートで囲まれた文字列、数値や真偽値でない文字列とみなされる値

そういう値は変換後にダブルクォートで囲まれます。

また余計な空白なども一切削除されたコンパクトな形になるようです。

 

なので真偽値や数字をクォートで囲まないよう注意しましょう。

それらは全て文字列としてみなされてしまいます。

JSON中にundefinedや関数があると無視またはnullに変換される

もう1つ注意が必要なのが undefined  や関数がJSON内に含まれる場合

 

まず連想配列 undefined  や関数が見つかった場合は無視されます。

例えば次が無視されてしまうコード例

コメント内に書いたのが実際のJSON文字列の中身

このようにJSON的に無効なキーや値を持つペアがあると無視されるので注意です。

 

また配列内で見つかった場合は無視ではなく null  に変換されます。

例えば次が null  に変換されてしまうコード例

どの変換されたかはコード内のコメントに書いた通りです。

 

こういう風にJSONでサポートされてないものを値にとることは不可能です。

しかも例外が返されるわけでもないので少し注意が必要ですね。

ここまでのまとめ

ということでJSONを扱う方法をもう一度まとめ

  • JSON文字列をデータに変換
    文字列を JSON.parse  に渡すことで解析されたデータが取得可能
    ただし解析に失敗した場合は例外が発生するので処理が必要
  • データをJSON文字列に変換
    データを JSON.stringify  に渡すことでJSON文字列が取得可能
    ただし undefined  や関数などの値を含めると無視または null  に変換される

以上JavaScriptでJSONを扱うメソッドについてでした。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください