フロントエンドの現場では、APIからデータを取得し、データを画面に反映させるような作業があります。取得するデータは、JSON形式であることが殆どで、必要なデータのみを取り出して使用します。
このように単純に取得して、反映させるだけであれば分かりやすいのですが、JSON形式の文字列をJavaScriptのオブジェクト、JavaScriptのオブジェクトをJSON形式の文字列に変換する必要が出ることも御座います。
そこで今回は、JSON形式の文字列をJavaScriptのオブジェクト、JavaScriptのオブジェクトをJSON形式の文字列に変換する方法についてサンプルコードを用いながらご紹介していきます。
JSONとは
JSONは汎用なデータ形式であり、以下の用途で用いられます。
- サーバーとの通信(データのやり取り)
- 外部ファイルとしてデータ(値)を保存する
また、以下のようなメリットがあるため、様々な現場で活用されてます。
- JavaScriptやTypeScriptのみではなく、PHPやJava、Pythonなど他の言語でも利用できる
- テキストエディター(VSCode, Atomなど)で編集が可能
- どの言語からでも読み込みが簡単
- 複雑なデータでも柔軟にまとめることが出来る
HTML・JSファイルを準備
まずは、実行用のHTMLファイルとJSファイルを準備しましょう。
今回は、HTMLファイルをjs-json-change.html 、JSファイルをjs-json-change.jsという名前で作成します。
HTMLファイル内には以下のコードを記述してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./js-json-change.js"></script>
</body>
</html>
JSON形式の文字列をJavaScriptのオブジェクトに変換
- 1JSON形式の文字列を準備
// JSON形式の文字列を準備 const jsonString = `{"name": "伊東太郎", "gender" : "男", "age" : 24}`;
- 2変換前の状態を確認
// 変換前の状態を確認 console.log("変換前", jsonString);
ブラウザで確認すると、キーも値も””(ダブルクォーテーション)で囲まれていることに加え、全て黒文字ですので、JSON形式の文字列であることが分かります。
- 3JSON形式の文字列をJavaScriptのオブジェクトへ変換
JavaScriptのオブジェクトに変換する際には、JSON.parseメソッドを使用します。
// JSON.parseメソッドを用いて、JavaScriptのオブジェクトへ変換 const change_obj = JSON.parse(jsonString);
- 4変換されているか確認
// 変換されているか確認 console.log("変換後", change_obj);
ブラウザで確認すると、JavaScriptのオブジェクトへ変換されていることが分かります。
JavaScriptのオブジェクトを取り出す
JavaScriptのオブジェクトの場合は、オブジェクト名.key で値を取り出すことが可能ですので、nameの値を取り出してみようと思います。
// 値の取得 例
console.log("値の取得" , change_obj.name);
ブラウザで確認してみると、以下のように表示されていることが分かります。
JavaScriptのオブジェクトをJSON形式の文字列に変換
- 1JavaScriptのオブジェクトを準備
// JavaScriptのオブジェクトを準備 const js_obj = { id : 01, title : "テスト", content : "テスト投稿"};
- 2変換前の状態を確認
// 変換前の状態を確認 console.log("変換前", js_obj);
ブラウザで確認してみると、以下のように表示されます。
- 3JavaScriptのオブジェクトをJSON形式の文字列へ変換
JSON形式の文字列へ変換する際には、JSON.stringifyメソッドを使用します。
// JSON.stringifyメソッドを用いて、JSON形式の文字列に変換 const change_json = JSON.stringify(js_obj);
- 4変換されているか確認
// 変換されているか確認 console.log("変換後", change_json);
以下のように表示されていれば変換完了です。
JSON形式の文字列を取り出す
値が取得できなかった場合、「取得できませんでした。」と表示させたいので、??(NULL合体演算子)を使って、書いてあげます。
// 値の取得 例
console.log("値の取得" , change_json.title ?? "取得できませんでした。");
結果を確認してみると、以下のように「取得できませんでした。」と表示されていることが分かります。
つまり、JSON形式の文字列をJavaScriptコード上では、分解できないということです。
もし、JavaScriptで何かしらのAPIデータを取得する場合には、XMLHttpRequest を活用しましょう。
NULL合体演算子の詳細についてはこちら

まとめ
- JSON形式の文字列をJavaScriptのオブジェクトに変換 : parseメソッドを使用
- JavaScriptのオブジェクトをJSON形式の文字列に変換 : stringifyメソッドを使用
コメント