プログラミング

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

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

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

余談ですが、先日実務でJSONを使い、Laravelbladeファイルから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はオブジェクトに変換されています。

さいごに

理解していただきましたでしょうか?

ご質問やご指摘等ある方はコメントしていただければ返信させていただきます。

これからもエンジニアの方、プログラミング初学者の方に役に立つ記事を更新していきますのでよろしくお願いします!

Twitterでも情報発信をしていますので、よかったらフォローをお願いします(^^)

Webエンジニア
タクマ
埼玉県出身の31歳

30歳からプログラミングを始め31歳でWebエンジニアに転職成功。

現在は都内の受託開発企業にてサーバーサイドエンジニアをしています。

\ Follow me /

COMMENT

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

CAPTCHA