[ JavaScript 基礎 ] parseメソッド, stringifyメソッドの使い方

JavaScript

フロントエンドの現場では、APIからデータを取得し、データを画面に反映させるような作業があります。取得するデータは、JSON形式であることが殆どで、必要なデータのみを取り出して使用します。

このように単純に取得して、反映させるだけであれば分かりやすいのですが、JSON形式の文字列をJavaScriptのオブジェクト、JavaScriptのオブジェクトをJSON形式の文字列に変換する必要が出ることも御座います。

そこで今回は、JSON形式の文字列をJavaScriptのオブジェクト、JavaScriptのオブジェクトをJSON形式の文字列に変換する方法についてサンプルコードを用いながらご紹介していきます。

  1. JSONとは
  2. HTML・JSファイルを準備
  3. JSON形式の文字列をJavaScriptのオブジェクトに変換
    1. JavaScriptのオブジェクトを取り出す
  4. JavaScriptのオブジェクトをJSON形式の文字列に変換
  5. JSON形式の文字列を取り出す
  6. まとめ

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のオブジェクトに変換

JSON -> JavaScript
  • 1
    JSON形式の文字列を準備

    // JSON形式の文字列を準備
const jsonString = `{"name": "伊東太郎", "gender" : "男", "age" : 24}`;

  • 2
    変換前の状態を確認

    // 変換前の状態を確認
console.log("変換前", jsonString);

    ブラウザで確認すると、キーも値も””(ダブルクォーテーション)で囲まれていることに加え、全て黒文字ですので、JSON形式の文字列であることが分かります。

    JSON形式の文字列_変換前

  • 3
    JSON形式の文字列をJavaScriptのオブジェクトへ変換

    JavaScriptのオブジェクトに変換する際には、JSON.parseメソッドを使用します。

    // JSON.parseメソッドを用いて、JavaScriptのオブジェクトへ変換
const change_obj = JSON.parse(jsonString);

  • 4
    変換されているか確認

    // 変換されているか確認
console.log("変換後", change_obj);

    ブラウザで確認すると、JavaScriptのオブジェクトへ変換されていることが分かります。

    jsonをjsに変換

JavaScriptのオブジェクトを取り出す

JavaScriptのオブジェクトの場合は、オブジェクト名.key で値を取り出すことが可能ですので、nameの値を取り出してみようと思います。

// 値の取得 例
console.log("値の取得" , change_obj.name);

ブラウザで確認してみると、以下のように表示されていることが分かります。

jsオブジェクト_値取得

 

JavaScriptのオブジェクトをJSON形式の文字列に変換

JavaScript -> JSON
  • 1
    JavaScriptのオブジェクトを準備

    // JavaScriptのオブジェクトを準備
const js_obj = { id : 01, title : "テスト", content : "テスト投稿"};

  • 2
    変換前の状態を確認

    // 変換前の状態を確認
console.log("変換前", js_obj);

    ブラウザで確認してみると、以下のように表示されます。

    jsオブジェクト_変換前

  • 3
    JavaScriptのオブジェクトをJSON形式の文字列へ変換

    JSON形式の文字列へ変換する際には、JSON.stringifyメソッドを使用します。

    // JSON.stringifyメソッドを用いて、JSON形式の文字列に変換
const change_json = JSON.stringify(js_obj);

  • 4
    変換されているか確認

    // 変換されているか確認
console.log("変換後", change_json);

    以下のように表示されていれば変換完了です。

    js->json_変換後

JSON形式の文字列を取り出す

値が取得できなかった場合、「取得できませんでした。」と表示させたいので、??(NULL合体演算子)を使って、書いてあげます。

// 値の取得 例
console.log("値の取得" , change_json.title ?? "取得できませんでした。");

結果を確認してみると、以下のように「取得できませんでした。」と表示されていることが分かります。

jsonString_取得できませんでした

つまり、JSON形式の文字列をJavaScriptコード上では、分解できないということです。

もし、JavaScriptで何かしらのAPIデータを取得する場合には、XMLHttpRequest を活用しましょう。

 

NULL合体演算子の詳細についてはこちら

[ JavaScript 基礎 ] Null合体演算子の使い方 & 注意点
本記事では、JavaScript・TypeScriptの構文であり、&&(AND)や||(OR)と同じ論理演算子の1種である「Null合体演算子」の使い方や注意点について、ご紹介しております。if文やswitch文など条件分岐に適した他の構文と比較したサンプルコードも載せてますので、参考になればと思います。
utubou-tech.com
2022.12.26

まとめ

  • JSON形式の文字列をJavaScriptのオブジェクトに変換 : parseメソッドを使用
  • JavaScriptのオブジェクトをJSON形式の文字列に変換 : stringifyメソッドを使用

 

コメント

タイトルとURLをコピーしました