【JSON】JSON.parse()とJSON.stringify()について解説

タクマ

こんにちは！タクマです。

31歳未経験からエンジニア転職に成功し、

2021年3月より都内の受託開発企業にてWebエンジニアとして働いています。

本日はJSON、およびJSONのメソッドのparse()とstringify()について解説します。

「そもそもJSONってなに？」

「JSONってなんとなく聞いたことがあるけど、よくわからないな。」

「JSONは知ってるけど、parse()とstringify()は知らないな。」

プログラミング初学者の方や駆け出しエンジニアの方はこのように思う方がいると思います。

僕も先日まではJSONについてよくわかっていませんでした。笑

ですが、この記事を最後まで読んでもらえれば、JSONおよびメソッドのparse()とstringify()について理解できる内容となっております。

ぜひ、最後まで読んで頂けると嬉しいです。

JSONとは
JSONの書き方
JSON.stringify()メソッドとは
JSON.parse()メソッドとは
さいごに

JSONとは

そもそもJSONとはなんなのでしょうか？

JSONとは、JavaScript Object Notation の略です。
データ交換フォーマットの一種で、プログラミング言語を問わず利用できます。
JavaScriptのオブジェクトの記法を元に記述します。

と言われてもよくわからないですよね。

簡単に言うと、JavaScriptのオブジェクトの記法で書くデータの定義方法であり、言語を問わないため、異なる言語間でのデータのやりとりが簡単にできるものと覚えてもらえればいいと思います。

余談ですが、先日実務でJSONを使い、LaravelのbladeファイルからVueファイルのpropsへデータの受け渡しを行いましたが簡単にでき、非常に便利だと感じました。

JSONの書き方

基本の書き方は下記のようになります。

{
  "vegetableId": 1,
  "vegetableName": "キャベツ",
  "price": 100
}

keyは" "で囲む
valueは文字列(string型)の場合は" "で囲み、数値（integer型）はそのまま書く。
{ 　} の中に書く

[
  {
    "vegetableId": 1,
    "vegetableName": "キャベツ",
    "price": 100
  },
  {
    "vegetableId": 2,
    "vegetableName": "レタス",
    "price": 150
  },
  {
    "vegetableId": 3,
    "vegetableName": "白菜",
    "price": 200
  }
]

このように配列にしてオブジェクトを格納することもできます。

配列にしてオブジェクトを格納するときは [ ] で囲む。

JSON.stringify()メソッドとは

JSON.stringify()とはJSONオブジェクトを文字列に変換するメソッドです。

さっそく例を見てみましょう！

const vegetables = [
  {
    "vegetableId": 1,
    "vegetableName": "キャベツ",
    "price": 100
  },
  {
    "vegetableId": 2,
    "vegetableName": "レタス",
    "price": 150
  },
  {
    "vegetableId": 3,
    "vegetableName": "白菜",
    "price": 200
  }
]

#JSON.stringifyでオブジェクトだったvegetablesを文字列にし、strVegetablesに代入している
const strVegetables = JSON.stringify(vegetables);


console.log(vegetables);
#実行結果
(3) [{…}, {…}, {…}]
  0: {vegetableId: 1, vegetableName: "キャベツ", price: 100}
  1: {vegetableId: 2, vegetableName: "レタス", price: 150}
  2: {vegetableId: 3, vegetableName: "白菜", price: 200}


console.log(typeof(vegetables));   ←※typeof()とはデータ型を調べるメソッドです
#実行結果
object


console.log(strVegetables);
#実行結果
[{"vegetableId":1,"vegetableName":"キャベツ","price":100},{"vegetableId":2,"vegetableName":"レタス","price":150},{"vegetableId":3,"vegetableName":"白菜","price":200}]


console.log(typeof(strVegetables));
#実行結果
string

わかりましたでしょうか？

元々オブジェクトだった定数vegetablesですが、JSON.stringify(vegetables)を代入した定数strVegetablesは文字列に変換されています。

JSON.parse()メソッドとは

JSON.parse()とは文字列をJSONとして解析し、オブジェクトに変換するメソッドです。

さっそく例を見てみましょう！

const vegetables = [
  {
    "vegetableId": 1,
    "vegetableName": "キャベツ",
    "price": 100
  },
  {
    "vegetableId": 2,
    "vegetableName": "レタス",
    "price": 150
  },
  {
    "vegetableId": 3,
    "vegetableName": "白菜",
    "price": 200
  }
]

#JSON.stringify()でオブジェクトだったvegetablesを文字列にし、strVegetablesに代入している
const strVegetables = JSON.stringify(vegetables);

#JSON.parse()で文字列だったをstrVegetablesオブジェクトにし、parseVegetablesに代入している
const parseVegetables = JSON.parse(strVegetables);


console.log(strVegetables);
#実行結果
[{"vegetableId":1,"vegetableName":"キャベツ","price":100},{"vegetableId":2,"vegetableName":"レタス","price":150},{"vegetableId":3,"vegetableName":"白菜","price":200}]


console.log(typeof(strVegetables));
#実行結果
string


console.log(parseVegetables);
#実行結果
(3) [{…}, {…}, {…}]
  0: {vegetableId: 1, vegetableName: "キャベツ", price: 100}
  1: {vegetableId: 2, vegetableName: "レタス", price: 150}
  2: {vegetableId: 3, vegetableName: "白菜", price: 200}


console.log(typeof(parseVegetables));
#実行結果
object

わかりましたでしょうか？

文字列だった定数strVegetablesですが、JSON.stringify(strVegetables)を代入した定数parseVegetablesはオブジェクトに変換されています。