【JavaScript】JSON.stringify()でJavaScriptのデータをJSON形式に変換する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年04月25日に投稿されました。)

JavaScriptでデータをJSON形式に変換する方法として、JSON.stringify()があります。

JSON.stringify()とは、JavaScriptのデータをJSON形式にエンコードするメソッドになります。

そのため、エンコードされたJavaScriptのデータはすべてJSONの文字列となって返されるようになります。

また、JSON.stringify()は最大で3つの引数を指定することができ、JSONデータとして変換するデータをカスタマイズすることができます。

そのため、こちらの関数はJSONを扱う際に必須になりますので、JavaScriptで作成したデータをJSON形式に変換したいと思った場合はJSON.stringify()を使用するようにしましょう。

今回はJavaScriptのJSON.stringify()でJavaScriptのデータをJSON形式に変換する方法について紹介していきます。

この記事はこんな方におすすめ
・JavaScriptで作成・取得したデータをJSONデータに変換したい場合
・JavaScriptで作成・取得したデータをカスタマイズし、JSONデータとして変換したい場合

JSON.stringify()とは

JSON.stringify()とはJavaScriptのデータをJSON形式にエンコードするメソッドになります。

エンコードするため、JavaScriptで作成したオブジェクトや値をJSONの文字列に変換することができるようになります。

そもそもJSONとは「JavaScript Object Notation」というものであり、さまざまな情報をやり取りするためのコンパクトな形式となります。

JSON.stringify()の書き方

JSON.stringify()の書き方は下記のようになります。

JSONの後ろにstringify()と追記し、括弧の中に必須な引数を指定します。

また、任意の引数をもう2つ指定することでも使用することができるようになります。

JSON.stringify()の引数

JSON.stringify()の引数は下記のようになります。

  1. データ(必須):
    JSON形式のデータに変換したい対象のデータを指定する
  2. 関数(任意):
    データをカスタマイズするためのリプレイサー(関数)を指定する
  3. 値(任意):
    データの前に挿入するための値を指定する

JSON.stringify()は、必須パラメータとして「データ」を指定します。

また、任意なパラメータとして「関数」や「値」を指定することができます。

JSON.stringify()の返り値

JSON.stringify()の返り値は変換されたJSON形式の文字列となります。

JSON.stringify()でJavaScriptのデータをJSON形式に変換するサンプルコード

JSON.stringify()でJavaScriptのデータをJSON形式に変換するサンプルコードをご紹介します。

ここでは下記の4パターンでJSON.stringify()を使用します。

  1. データがプリミティブ型である場合
  2. データが配列である場合
  3. データが関数である場合
  4. データがオブジェクトである場合

データがプリミティブ型である場合

データがプリミティブ型である場合は、指定した値をJSON形式へ変換するようになります。

● main.js

実行結果

データがプリミティブ型である場合にJSON.stringify()でJSON形式に変換した結果

JSON.stringify()でJavaScriptのプリミティブ型のデータをJSON形式に変換しています。

多少変わりはありませんが、文字列、数値、真偽値の値がJSON形式にとなって表示されています。

データが配列である場合

データが配列である場合は、配列全体をJSON形式へ変換するようになります。

● main.js

実行結果

データが配列である場合にJSON.stringify()でJSON形式に変換した結果

JSON.stringify()でJavaScriptの配列のデータをJSON形式に変換しています。

そのため、配列が横一列のJSON形式となって表示されています。

データが関数である場合

データが関数である場合は、関数で処理を行った後の値をJSON形式へ変換するようになります。

しかし、オリジナルで作成した関数はJSON形式に変換することができず空になります。

● main.js

実行結果

データが関数である場合にJSON.stringify()でJSON形式に変換した結果

JSON.stringify()でJavaScriptの関数のデータをJSON形式に変換しています。

そのため、関数で処理を行った後の値がJSON形式として表示されています。

また、オリジナルの関数は処理が行われないため、空が表示されています。

データがオブジェクトである場合

データがオブジェクトである場合は、オブジェクト全体をJSON形式へ変換するようになります。

● main.js

実行結果

データがオブジェクトである場合にJSON.stringify()でJSON形式に変換した結果

JSON.stringify()でJavaScriptのオブジェクトのデータをJSON形式に変換しています。

そのため、オブジェクトが横一列のJSON形式として表示されています。

JSON.stringify()でデータをカスタマイズしてJSON形式に変換する場合

JSON.stringify()でデータをカスタマイズしてJSON形式に変換する場合は2つ目の引数に「関数」を指定します。

関数を指定することで、一部のデータを変更することができます。

そのため、先ほどJSONデータとして変換できなかったオリジナルの関数もJSONデータとして変換することができるようになります。

● main.js

実行結果

JSON.stringify()でデータをカスタマイズしてJSON形式に変換した結果

JSON.stringify()でデータをカスタマイズしてJSON形式に変換しています。

そのため、条件にあう値がJSON形式として表示されています。

また、「undefined」を指定したため、対象のデータをJSON形式に変換しないようにしています。

JSON.stringify()でデータの前に値を挿入してJSON形式に変換する場合

JSON.stringify()でデータの前に値を挿入してJSON形式に変換する場合は、3つ目の引数に「値」を指定します。

値を指定することで、データの前に値を追加した状態でJSON形式として変換するようになります。

また、数値を指定すると、数値の数だけスペースが追加されるようになります。

● main.js

実行結果

JSON.stringify()でデータの前に値を挿入してJSON形式に変換した結果

JSON.stringify()でデータの前に値を挿入してJSON形式に変換しています。

今回は「method」という文字列を指定したため、「method」という値が入った状態のjSON形式が表示されています。

また、「5」を指定したため、スペースが5文字空けた状態のJSON形式が表示されています。

JSON.stringify()を実際に使用したケース

JSON.stringify()を実際に使用したケースについてご紹介します。

例えば、ボタンを押すことで、それぞれのボタンの項目にあったJSONデータを表示するような画面を作成します。

● main.js

● charactor.json

● main.js

実行結果

JSON.stringify()でJSON形式に変換したデータをAjaxの非同期通信で取得した結果

JSON.stringify()によって取得したデータを画面用として一度JSON形式に変換しています。

そのため、それぞれのキャラクターのボタンをクリックすると、そのキャラクターの名前や攻撃技、説明が表示されていいます。

Sossy

Ajaxの非同期通信で取得したデータはそのまま取得できますが、念のためローカルでもJSON形式へと変換しています。
そのため、JSON.stringify()でエンコードを行った後にJSON.parse()でデコードしています。

JSONを使用する際に便利なメソッド

先ほどまで、JSON.stringify()で日付情報をJSONデータに変換してきましたが、他にもJSONデータを扱うためのメソッドが存在します。

そのため、ここではJSONを使用する際に便利なメソッドについてご紹介します。

JSON.parse()

JSON.parse()とはJSONデータをデコードするメソッドとなります。

こちらのメソッドを使用することで、変換されたJSONデータを取得することができるようになります。

● sample.json

実行結果

JSON.parse()でJSONデータをデコードした結果

JSON.parse()によって、JSONデータをデコードして取得しています。

今回は3番目のデータを指定したため、{“lang”: ‘PHP’,”fw”: ‘Leravel’}」というデータが表示されています。

また、繰り返し処理を使用することで、オブジェクト内にあるすべてのデータが表示されています。

toJSON()

toJSON()とは日付情報をJSON形式のデータに変換するメソッドとなります。

こちらのメソッドを使用することで、タイムスタンプや日付のData型データをJSONデータに変換することができます。

● sample.json

実行結果

toJSON()で日付情報をJSON形式のデータに変換した結果

toJSON()によって日付情報をJSONデータに変換しています。

そのため、日付形式やタイムスタンプで作成した日付情報がJSONデータに変換されて表示されています。

もし、toJSON()について詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ JSON.stringify()とはJavaScriptのデータをJSON形式にエンコードするメソッドである

⚫︎ JSON.stringify()は下記の引数を指定して使用する
・データ(必須)
・関数(任意)
・値(任意)

⚫︎ データがプリミティブ型である場合にJSON.stringify()を使用すると問題なくJSON形式に変換することができる

⚫︎ データが配列である場合にJSON.stringify()を使用すると問題なくJSON形式に変換することができる

⚫︎ データが関数である場合にJSON.stringify()を使用するとJavaScriptで準備されている関数はJSON形式に変換することができる
(オリジナルの関数はJSON形式に変換することができない)

⚫︎ データがオブジェクトである場合にJSON.stringify()を使用すると問題なくJSON形式に変換することができる

⚫︎ JSON.stringify()の第2引数を指定することで、データをカスタマイズしてJSON形式に変換することができる

⚫︎ JSON.stringify()の第3引数を指定することで、データの前に値を挿入してJSON形式に変換することができる

⚫︎ 日付情報をJSONデータに変換するにはtoJSON()を使用する

⚫︎ エンコードされたJSONデータを取得するにはJSON.parse()を使用する