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

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

  • JSでJSONを扱う方法がわからない方
  • エンコード、デコードについてイマイチわかっていない方
  • JSON.stringifyについて詳しく知りたい方
  • オンライン上でJSONをいじりたい方

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

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についての理解をより深めたい方は、こちらの記事で説明してあるのでみておくとよいでしょう。

【JavaScript入門】JSONの作成とparse() / stringify()の使い方!
更新日 : 2019年4月23日

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について詳しく解説しているので参考にしてみてください。

オンラインJSON Validatorを使って整形とバリテーションしよう!
更新日 : 2019年7月4日

まとめ

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

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

プログラミング学習を効率良く進めたいなら…

学習を始めたけどエラーが解決できない
作りたいものはあるけど、何から始めればいいかわからない
プログラミングに対して、このような悩みを持っている方も多いですよね。

そんな方には、弊社が運営するサブスク型のプログラミングスクール「SAMURAI ENGINEER Plus+がおすすめです。



月額2980円(税別)で、主に4つのサービスを提供させていただきます。

  • 現役エンジニアによる月1度の「マンツーマン指導」
  • 平均回答時間30分の「Q&Aサービス」
  • 作りながら学べる28種類の「教材」
  • 学習を記録&仲間と共有できる「学習ログ」

目的にあった教材を選べば、どなたでも効率よく学習できるほか、Q&Aサービスやマンツーマン指導を活用することで、挫折せずにプログラミングの習得が可能です。

プログラミングを効率的に学びたい人はもちろん、何から始めたらよいのかわからない方は、ぜひ「SAMURAI ENGINEER Plus+」をご利用ください。
まずは30日無料体験

書いた人

かい

日向徹かこよすぎか

[email protected]