<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>を用いた詳細な説明も提供します。これらの知識を通じて、開発者は効率的にデータを操作し、問題を特定できるようになります。

JavaScriptオブジェクトとJSONの変換、APIとデバッグについてのガイド

HTML、CSS、JavaScript を書き始めた頃、「JavaScript は body タグの最下部に書く」のようなことを聞いたことがあるかもしれません。
これは <code>レンダーブロック</code> 対策の一環です。
<h2 id="レンダーブロックとは">レンダーブロックとは<a aria-hidden="true" tabindex="-1" href="#レンダーブロックとは"></a></h2>
ブラウザがHTML文書をサーバーからレスポンスとして受け取ったとき、ブラウザはHTMLをパースしてDOMツリーを構築します。
解析している時に スタイリングの CSS だったり、JavaScript だったりが見つかった場合は、そのファイルを取得して解析、実行をします。
その間、ブラウザはDOMツリーの構築を一時停止します。
この一時停止のことを <code>レンダーブロック</code> と呼びます。
ページの一部または全部の描画がブロックされ、これが結果的にページロード時間の増加やユーザー体験の低下を引き起こします。
<h2 id="レンダーブロックの影響が深刻化する原因">レンダーブロックの影響が深刻化する原因<a aria-hidden="true" tabindex="-1" href="#レンダーブロックの影響が深刻化する原因"></a></h2>
ブラウザがHTMLを解析している間に、大きなCSSファイルやJavaScriptファイルがあると、それらが大きければ大きいほど、レンダーブロックの深刻度が増加します。
<h2 id="レンダーブロックされていると何が表示されるのか">レンダーブロックされていると何が表示されるのか<a aria-hidden="true" tabindex="-1" href="#レンダーブロックされていると何が表示されるのか"></a></h2>
JavaScriptやCSSのダウンロード・解析・実行が完了するまで、それらのスクリプトやスタイルシートに依存する部分の描画が遅延またはブロックされます。
<h3 id="cssのレンダーブロック">CSSのレンダーブロック<a aria-hidden="true" tabindex="-1" href="#cssのレンダーブロック"></a></h3>
CSSはページのレイアウトとスタイルを決定します。つまり、すでに読み込まれている HTML はあるが、そこにあてられるべき CSS 
がまだ読み込まれていなかったら、取得と解析のためにレンダーブロックされている間はブラウザはスタイルやレイアウトが適用されていない文章を表示することがあります。
このようなページを読み込んだ際、スタイルが適用されていない状態が一瞬表示されてしまう現象を<code>FOUC（Flash of unstyled content）</code>といいます。
CSSを head 内に配置すると、ブラウザはスタイリング情報をすべて取得してから、HTMLを解析することになります。なので、<code>FOUC（Flash of unstyled content）</code>を防ぐことができます。
(HTMLの解析の前にスタイリングを読み込んで、スタイリングされていない見た目の表示をさせないというだけで head内で読み込んでいれば、そこでレンダーブロックは起きています。)
<h3 id="javascriptのレンダーブロック">JavaScriptのレンダーブロック<a aria-hidden="true" tabindex="-1" href="#javascriptのレンダーブロック"></a></h3>
JavaScriptは、HTML文書の解析が一時停止され、スクリプトがダウンロードおよび実行されるまで、その後のコンテンツの表示がブロックされることがあります。したがって、JavaScriptファイルがロードされるまで、その下にあるHTMLコンテンツは表示されません。
<h2 id="レンダーブロックの影響を軽減するための指針">レンダーブロックの影響を軽減するための指針<a aria-hidden="true" tabindex="-1" href="#レンダーブロックの影響を軽減するための指針"></a></h2>
上記の説明の通り、レンダーブロックは大きいCSSファイルやJavaScriptファイルの取得と解析・実行によって HTML の解析が停止して、ページの描画の遅延を引き起こします。
つまり、<code>HTML の解析を一時中断させないような実装をすれば良い</code>ことになります。
そのためには、<code>ページの最初の描画に必要な最小限のCSSをインライン化し、JavaScript をページのフッターに移動する</code>ことです。
この JavaScript をフッターに移動させることが冒頭の「JavaScript は body タグの最下部に書く」という部分に繋がってきます。
また埋め込む JavaScript がもし DOM を操作するスクリプトだったら、HTML の解析が終わっていなければ DOM を取得できないので、そういった観点でも下に書く必要があります。
しかし、<code>全ての JavaScript をフッターに移動させれば良いわけではありません</code>。
Google Tag Manager タグの埋め込みスクリプトだったり、メタタグ、CSS、Polyfill などのスクリプトなど、<code>ページのレンダリングの前に必要なものは、head 内に書く必要</code>があります。
<h3 id="余談">余談<a aria-hidden="true" tabindex="-1" href="#余談"></a></h3>
CSSとJavaScriptファイルをHTMLのどこに埋め込むかといった話をしていると、ReactやVue.jsといったモダンなフロントエンドフレームワークを使っている場合は、HTMLに直接書くことがないので関係なさそうです。
しかし、これらのフレームワークを使っていても、最終的にクライアントがブラウザで見るときは HTML になっているので、全く無関係の話ではないです。
<h2 id="レンダーブロックの影響を軽減するための具体的な方法">レンダーブロックの影響を軽減するための具体的な方法<a aria-hidden="true" tabindex="-1" href="#レンダーブロックの影響を軽減するための具体的な方法"></a></h2>
<h3 id="cssのレンダーブロックを軽減する方法">CSSのレンダーブロックを軽減する方法<a aria-hidden="true" tabindex="-1" href="#cssのレンダーブロックを軽減する方法"></a></h3>
CSSは、HTML文書の<code>headタグ内に配置するのが最も一般的</code>です。
これにより、スタイルシートが最初に読み込まれ、ページのレンダリング中に適用されます。
しかし、CSSが大きい場合やネットワーク速度が遅い場合、HTMLの解析が完了する前にCSSの読み込みが終わらない可能性があり、それがレンダリングをブロックする可能性があります。
この場合、以下の3パターンを今回は紹介します。
<ul>
<li>
<code>&#x3C;link rel="preload"></code>を使用する :
<ul>
<li>CSSファイルを予めダウンロードしておくために<link rel="preload">を使用します。これにより、CSSファイルが早期にダウンロードされ、実際に必要になったときにすぐに適用することができます。</li>
<li><code>rel="preload"</code>はダウンロードだけするので、解析用に別途<code>&#x3C;link rel="stylesheet"></code>を使用する必要があります。しかし、<code>onload</code> 
属性を追加してダウンロードして、そのまま適用ができます。</li>
<li>使用方法 :
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- まずCSSをプリロードします -->
 &#x3C;link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

 &#x3C;!-- その後、通常のリンクタグでCSSを適用します -->
 &#x3C;!-- &#x3C;link rel="stylesheet" href="styles.css"> -->
&#x3C;/head>
</code></pre></div>
</li>
</ul>
</li>
<li>
ファイルの分割 :
<ul>
<li>大きなCSSファイルはパースと実行に時間がかかり、ページのレンダリングをブロックする可能性があります。 
ファイルを複数の小さなファイルに分割し、必要に応じて読み込むことで、この問題を軽減することができます。</li>
<li>webpackなどのモジュールバンドラーを使用している場合は、CSSをモジュールごとに分割することもできます。</li>
</ul>
</li>
<li>
クリティカルCSSのインライン化 :
<ul>
<li>クリティカルCSSとは、最初のページ表示（ページロード直後の画面）に必要なスタイルのことを指します。 
これをHTML内に直接記述（インライン化）することで、ページロード時にこれらのスタイルがすぐに利用可能になり、ファーストビューのレンダリングが高速化されます。</li>
</ul>
</li>
</ul>
<h3 id="javascriptのレンダーブロックを軽減する方法">JavaScriptのレンダーブロックを軽減する方法<a aria-hidden="true" tabindex="-1" href="#javascriptのレンダーブロックを軽減する方法"></a></h3>
基本的にはレンダリングの前に実行するスクリプトは限られているので、それを除けば、途中でHTML解析を停止させない、またはDOMを操作できるようにするために body 
タグの最下部に書きますが、それ以外にも以下の方法があります。
<ul>
<li>
<code>&#x3C;link rel="preload"></code>を使用する :
<ul>
<li>JavaScriptファイルを予めダウンロードしておくために<code>&#x3C;link rel="preload"></code>を使用します。 これにより、JavaScriptファイルが早期にダウンロードされます。</li>
<li>ダウンロードだけで<code>別途任意のタイミングで実行する必要</code>があります。</li>
<li>任意のタイミングで実行できるのが<code>script タグの async と defer 属性を使った方法との違い</code>です。</li>
<li>使用方法 :
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- まずJavaScriptをプリロードします -->
 &#x3C;link rel="preload" href="script.js" as="script">
&#x3C;/head>
&#x3C;body>
 &#x3C;!-- HTML要素 -->

 &#x3C;!-- HTML文書の最後、すなわち&#x3C;body>タグの最後でスクリプトを実行します -->
 &#x3C;script src="script.js">&#x3C;/script>
&#x3C;/body>
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>async</code>および<code>defer</code>属性を使用する :
<ul>
<li><code>async属性</code> 
は、JavaScriptのダウンロードとHTMLの解析を並行して行い、スクリプトのダウンロードが完了したらすぐに実行します。ダウンロードされるとすぐに実行されるため、レンダリングをブロックする可能性があります。</li>
<li><code>defer属性</code> 
は、JavaScriptのダウンロードとHTMLの解析を並行して行いe、全てのHTMLの解析が終わった後にスクリプトを実行します。これにより、HTMLの解析がJavaScriptによってブロックされるのを防ぎます。</li>
<li>async属性とdefer属性の<code>両方を同時に書くべきではない</code>です。
<blockquote>
asyncとdeferの両方を使うことはアンチパターンで、defer部分は無視されてasyncが優先されるので避けるべきものです。
</blockquote>
引用元: <a href="https://almanac.httparchive.org/ja/2022/javascript#javascript%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%81%95%E3%82%8C%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F" title="almanac">almanac</a></li>
<li>使用例 :
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- async属性を使用する -->
 &#x3C;script async src="script.js">&#x3C;/script>

 &#x3C;!-- defer属性を使用する -->
 &#x3C;script defer src="script.js">&#x3C;/script>
&#x3C;/head>
</code></pre></div>
</li>
</ul>
</li>
<li>
スクリプトの分割
大きなJavaScriptファイルもパースと実行に時間がかかり、ページのレンダリングを遅延させます。JavaScriptのコードを複数の小さなファイルに分割し、必要に応じて読み込むことで、この問題を軽減することができます。
</li>
<li>
クリティカルJavaScriptのインライン化
クリティカルなJavaScript（ページの初回描画に必要なJavaScript）をHTML内に直接記述（インライン化）することで、スクリプトがすぐに利用可能になります。これにより、特に重要な機能のレンダリングが高速化されます。
</li>
</ul>
<h2 id="まとめ">まとめ<a aria-hidden="true" tabindex="-1" href="#まとめ"></a></h2>
HTML についての学習はweb開発において初心者の頃にする傾向があると思うので、意外と読み込みの手法については知らない場合があると思います。自分はそのパターンだったので今回まとめました。

Tag: java-script