JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのJSON.stringify()とは？使い方とサンプルコードでわかりやすく解説

JSON.stringify()メソッドとは？

JavaScriptのJSON.stringify()は、JavaScriptオブジェクトをJSON形式の文字列に変換するためのメソッドです。Webサーバーへデータを送信する際や、localStorageにデータを保存する際など、データを文字列として扱いたい場面で特に役立ちます。

基本構文

JSON.stringify(value, replacer, space)
  • value：JSON文字列に変換したいオブジェクトや配列（必須）
  • replacer：出力するプロパティを関数や配列で選択できる（省略可能）
  • space：インデント用の空白の数。指定すると見やすく整形されたJSONが出力される（省略可能）

なお、undefined、関数、シンボルはJSON文字列に変換されず、自動的に除外される点には注意が必要です。

JSON.stringify()のサンプルコード

以下は、オブジェクトをJSON文字列に変換して画面に表示する具体的なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
      color: red;
   }
</style>
</head>
<body>
<h1>JSON.stringify()</h1>
<div class="sample"></div>
<div style="font-weight: bold;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、オブジェクトがJSON文字列に変換されます
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let resultEle = document.querySelector(".result");
   let obj = {name: "Rohan",sports: ["Cricket", "Football"],Country: "India"};
   sampleEle.innerHTML ="Name = " +obj.name +"<br>" +" Country = " +obj.Country +
      " <br>" +"sports = " +obj.sports;
   document.querySelector(".Btn").addEventListener("click", () => {
      resultEle.innerHTML = JSON.stringify(obj);
   });
</script>
</body>
</html>

このコードでは、名前・国・好きなスポーツを持つオブジェクトを作成し、ボタンがクリックされたタイミングでJSON.stringify()を実行して結果を表示しています。

実行結果

ページを読み込むと、まずオブジェクトの各プロパティの値が画面に表示されます。

JavaScriptのJSON.stringify()とは？使い方とサンプルコードでわかりやすく解説

続いて、「CLICK HERE」ボタンをクリックすると −

JavaScriptのJSON.stringify()とは？使い方とサンプルコードでわかりやすく解説

オブジェクト全体が {"name":"Rohan","sports":["Cricket","Football"],"Country":"India"} という1行のJSON文字列に変換されて表示されます。

まとめ

  • JSON.stringify()を使うと、オブジェクトをサーバー送信や保存に適した文字列形式へ変換できる
  • 第2引数・第3引数を活用すれば、出力内容の絞り込みや整形も可能
  • 逆にJSON文字列からオブジェクトへ戻したい場合は、JSON.parse()を使用する
  1. JavaScriptにおける継承の基本を具体例で解説

    JavaScriptは、クラスベースではなくプロトタイプベースのオブジェクト指向言語です。そのため、継承はprototype（プロトタイプ）オブジェクトを通じて実現されます。コンストラクタ関数のprototypeプロパティにメソッドやプロパティを追加すると、そのコンストラクタから生成されたすべてのインスタンスが、それらを共有して利用できるようになります。 プロトタイプによる継承の仕組み JavaScriptでは、インスタンスからプロパティやメソッドが参照されるとき、まずオブジェクト自身を検索し、見つからなければプロトタイプチェーンをたどって上位のオブジェクトへと探しに行きます。これにより、各イ

  2. 【初心者向け】JavaScriptでオブジェクトのディープクローンを作成する方法を実例付きで解説

    はじめにJavaScriptでは、単純な代入（=）やObject.assign()などによるコピーはシャローコピー（浅いコピー）となり、元のオブジェクトとプロパティへの参照が共有されてしまいます。そのため、一方を変更するともう一方にも影響が及びます。これを防ぐには、参照関係まで完全に切り離したディープクローン（深いコピー）を作成する必要があります。本記事では、JSON.parse(JSON.stringify()) を使ったシンプルな方法で、オブジェクトのディープクローンを作成する例を紹介します。ディープクローンのサンプルコード以下のコードでは、ボタンをクリックすると元のオブジェクト obj