【JavaScript入門】JSON.stringifyについて徹底解説

みなさんこんにちは！今日はJavaScriptを使ってJSONを扱うJSON.stringifyについて解説していきます。

などは是非参考にしていただければ幸いです！

JavaScriptでJSONを扱おう！

さて、JSON.stringifyの説明に入る前の基礎知識としてJSでどのようにJSONを扱うのか見ていきましょう。

JSONをエンコードしよう

まずは、JSONをエンコードする方法からです。エンコードとは、データを別の形式に変換することです。JSONの場合に当てはめると、JSONはJavaScriptのオブジェクトのように記述しますが、中身のデータ形式は文字列にすぎません。

そのまま、JSONファイルを読み込んでもただの文字列なのでオブジェクトのように扱えないということです。そこでエンコードすることによって、JavaScriptのオブジェクトとして使えるようになるのです。

では実際にJavaScriptでJSONをエンコードする方法についてみておきましょう。

エンコードするにはJSON.stringifyを使います。

var json = '{"ID": 1,"name": "user01","gender": "women"}'
console.log(typeof(json))

var encoded_json = JSON.parse(json)
console.log(typeof(encoded_json))

var decoded_json = JSON.stringify(encoded_json)
console.log(typeof(decoded_json))

きちんとデコードできていることがわかりますね。

string
object
string

JSONをデコードしよう

さて、次はデコードをみてきましょう。デコードとは、エンコードされたものを元の形式に戻すことです。JSONで言えば、オブジェクトにエンコードされたものを文字列に戻すことが、デコードということになりますね。

デコードするには、JSON.parseを使います。

var json_s = '{"ID": 1,"name": "user01","gender": "women"}'
console.log(typeof(json_s))

var json_o = JSON.parse(json_s)
console.log(typeof(json_o))
console.log(json_o.ID)

json_sでjsonを定義しています。JSONはただの文字列という話はしましたね。それをJSON.parseによってobjectにエンコードしています。

string
object
1

きちんとできていますね。

JSON.stringify、JSON.parseについての理解をより深めたい方は、こちらの記事で説明してあるのでみておくとよいでしょう。

JSON.stringifyとは

さてここからが本題ですが、すでにJSON.stringifyが何かということについてはわかっていると思います。JSON.stringifyとはJSONをエンコードする関数でしたね。

JSON.stringifyでエンコードと同時に整形しよう

基本的な使い方は最初に説明しましたが、次はJSON.stringifyについて詳しく理解して完全に使えるようにマスターしていきましょう。JSON.stringify()は3つの引数をとることができます。

一つ目は例で挙げたとおりエンコードされた値、つまりオブジェクトを入れます。二つ目は、replacerといってコールバックを指定できます。と言ってもこの機能は、少し難しい上にあまり使うことはないので詳しくは説明しません。

なので、本記事ではnullを入れておきます。三つ目の引数には今回目的のフォーマットにするためのインデントを指定します。実際に見ていきましょう。

var json_obj = {"ID": 1,"name": "user01","gender": "women"}

var decoded_json = JSON.stringify(json_obj, null, "  ")
console.log(decoded_json)

このように、空白をいくつ入れるかを指定すると、

{
  "ID": 1,
  "name": "user01",
  "gender": "women"
}

そのインデント数で、フォーマットされます。

var json_obj = {"ID": 1,"name": "user01","gender": "women"}

var decoded_json = JSON.stringify(json_obj, null, "               ")
console.log(decoded_json)

{
          "ID": 1,
          "name": "user01",
          "gender": "women"
}

挙動がよく確認できますね。また、実際に空白を入れてもいいんですが明示的に何個インデントが指定されているかわかりにくいので、

var json_obj = {"ID": 1,"name": "user01","gender": "women"}

var decoded_json = JSON.stringify(json_obj, null, 2)
console.log(decoded_json)

{
  "ID": 1,
  "name": "user01",
  "gender": "women"
}

このように、数値を指定することもできます。

配列をJSON.stringifyでエンコードしよう

さて、次は配列をエンコードしてJSON文字列にする方法を見ていきます。配列だから少しやり方が変わるんじゃないかと思っている人は多いですが、何も変わることはなく今まで通り行えばいいです。

var arr = ["a","b","c"];

var decoded_json = JSON.stringify(arr)
console.log(decoded_json)
console.log(typeof(decoded_json))

["a","b","c"]
string

きちんとエンコードされていますね。

var arr = {"test": ["a","b","c"]};

var decoded_json = JSON.stringify(arr)
console.log(decoded_json)
console.log(typeof(decoded_json))

{"test":["a","b","c"]}
string

オブジェクトに配列が含まれている場合などでも関係ないですね。

オンラインツールでjsonをフォーマットしてみよう

オンラインツールを用いてjsonをフォーマットしていく方法について知りたい方は、以下の記事で詳しくjsonのformatterについて詳しく解説しているので参考にしてみてください。

まとめ

いかがでしたか。JSでエンコード、デコードする方法という基礎知識からJSON.strifyについてマスターするというところまで説明してきました。

エンコードとデコードの違いや概念などを掴むことがまずは大切なので自分なりにしっかり理解しておくようにしましょう！それでは！！