<h2 id="javascriptオブジェクトとjson">JavaScriptオブジェクトとJSON<a aria-hidden="true" tabindex="-1" href="#javascriptオブジェクトとjson"></a></h2>
JavaScriptオブジェクトは、プロパティ名と値のペアを保持するコンテナです。一方、JSONはデータの構造をテキスト形式で表現するための軽量データ交換形式です。この2つの間でデータを変換することが、Webアプリケーションの中心的な処理となります。
<h2 id="jsonstringify">JSON.stringify()<a aria-hidden="true" tabindex="-1" href="#jsonstringify"></a></h2>
JavaScriptの<code>JSON.stringify()</code>関数は、JavaScriptオブジェクトをJSON形式の文字列に変換します。
この関数は主に、データをサーバーに送信する前にJavaScriptのオブジェクトを文字列に変換するために使用されます。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">let data = {
 name: "John",
 age: 30,
 city: "New York"
};

let jsonData = JSON.stringify(data);

console.log(jsonData); // '{"name":"John","age":30,"city":"New York"}'
</code></pre></div>
この例では、JavaScriptオブジェクト<code>data</code>がJSON形式の文字列<code>jsonData</code>に変換され、その結果がコンソールに出力されます。
<h2 id="jsonparse">JSON.parse()<a aria-hidden="true" tabindex="-1" href="#jsonparse"></a></h2>
反対に、サーバーから受け取ったJSON形式の文字列データをJavaScriptのオブジェクトに変換するには<code>JSON.parse()</code>関数を使用します。以下にその例を示します：
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">let jsonData = '{"name":"John","age":30,"city":"New York"}';

let data = JSON.parse(jsonData);

console.log(data); // { name: 'John', age: 30, city: 'New York' }
</code></pre></div>
この例では、JSON形式の文字列<code>jsonData</code>がJavaScriptオブジェクト<code>data</code>に変換され、その結果がコンソールに出力されます。
<h2 id="httpレスポンスとjson">HTTPレスポンスとJSON<a aria-hidden="true" tabindex="-1" href="#httpレスポンスとjson"></a></h2>
Next.jsのAPI routes（あるいは他のNode.jsベースのフレームワーク）を使用してHTTPレスポンスを作成する際、以下のようなコードを書くことがよくあります：
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">res.status(200).json(data);
</code></pre></div>
ここで<code>res</code>はHTTPレスポンスオブジェクトで、<code>.json()</code>メソッドはレスポンスのボディをJSON形式で送信します。
そのため、上記のコードはステータスコード200（成功）を持つレスポンスを生成し、そのボディにJavaScriptオブジェクト<code>data</code>をJSON形式で
含めています。
<h2 id="クライアント側でのレスポンスの処理">クライアント側でのレスポンスの処理<a aria-hidden="true" tabindex="-1" href="#クライアント側でのレスポンスの処理"></a></h2>
クライアント側でレスポンスを受け取った後の定番の処理は、以下のように<code>fetch()</code>関数と<code>.json()</code>メソッドを使用することです：
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const response = await fetch('/api/product');
const data = await response.json();
</code></pre></div>
このコードは、指定したURLから非同期にデータを取得し、その結果をJavaScriptのオブジェクトとして<code>data</code>に格納します。
ここでも、<code>.json()</code>メソッドが使われており、これはレスポンスボディをJSON形式として解析し、結果をJavaScriptのオブジェクトとして返します。
<h2 id="レスポンスデータのデバッグ">レスポンスデータのデバッグ<a aria-hidden="true" tabindex="-1" href="#レスポンスデータのデバッグ"></a></h2>
複雑なオブジェクト構造を持つレスポンスデータをデバッグする際には、<code>console.log()</code>だけでなく、<code>console.dir()</code>や<code>JSON.stringify()</code>を使うこともあります。
<code>console.log()</code>を使うと、一部のブラウザではネストされたオブジェクトの一部しか表示されないことがあります。そのような場合、<code>console.dir()</code>を使うと、ネストされたオブジェクトもすべて展開して表示することができます：
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">console.dir(data, { depth: null });
</code></pre></div>
また、<code>JSON.stringify()</code>を使うと、オブジェクトを整形して表示することもできます。以下のコードでは、<code>JSON.stringify()</code>の第2引数と第3引数を使って、オブジェクトを整形し、インデントを設定しています：
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">console.log(JSON.stringify(data, null, 2));
</code></pre></div>
このコードは、<code>data</code>オブジェクトを整形して（第2引数の<code>null</code>はフィルタリングを行わないことを示し、第3引数の<code>2</code>はインデントのスペース数を指定します）、その結果をコンソールに出力します。
以上、JavaScriptオブジェクトとJSONの変換についてのガイドでした。このガイドがJavaScriptとAPIの組み合わせでの開発をスムーズに進める助けとなることを願っています。
<hr>
<h2 id="要約">要約<a aria-hidden="true" tabindex="-1" href="#要約"></a></h2>
本ガイドでは、JavaScriptとAPIを組み合わせた開発におけるJavaScriptオブジェクトとJSONの変換技術を解説します。また、ネストされたオブジェクト構造を持つレスポンスデータのデバッグについて、<code>console.log()</code>、<code>console.dir()</code>、そして<code>JSON.stringify()</code>を用いた詳細な説明も提供します。これらの知識を通じて、開発者は効率的にデータを操作し、問題を特定できるようになります。

Tag: debugging