JavaScriptの基礎 - デバッグのソースを表示

== 概要 ==
JavaScriptのデバッグとは、プログラムの動作上の問題を特定して修正するプロセスである。<br>
Web開発においてデバッグは必須のスキルであり、適切なツールと手法を習得することで開発効率が大幅に向上する。<br>
<br>
JavaScriptのデバッグには、主に以下の手段が活用される。<br>
<br>
<center>
{| class="wikitable"
|+ JavaScriptの主なデバッグツール
! ツール !! 説明
|-
| consoleオブジェクト || ブラウザのコンソールに変数の値やログを出力するための組み込みオブジェクト
|-
| ブラウザDevTools || Chrome、Firefox、Edgeなど主要ブラウザに搭載された開発者向け統合ツール
|-
| ブレークポイント || プログラムの実行を任意の行で一時停止させる機能
|-
| debugger文 || JavaScriptコード内に記述するデバッグ用のキーワード
|}
</center>
<br>
これらを組み合わせることにより、変数の状態確認、実行フローの追跡、パフォーマンスの計測が可能になる。<br>
特に、Chrome DevToolsのSourcesパネルを活用したブレークポイントデバッグは、複雑なバグの調査において強力な手段となる。<br>
<br><br>

== consoleオブジェクト ==
consoleオブジェクトは、JavaScriptに標準搭載されたデバッグ用の組み込みオブジェクトである。<br>
<br>
WebブラウザのコンソールパネルやNode.jsの標準出力にメッセージを送信するための多様なメソッドを提供する。<br>
<br>
==== 基本的な出力メソッド ====
下表に、最もよく使用される出力メソッドを示す。<br>
<br>
<center>
{| class="wikitable"
|+ consoleオブジェクトの主なメソッド
! メソッド !! 説明
|-
| <code>console.log()</code> || 標準ログを出力する。<br>デバッグ用途で最も汎用的に使用される。
|-
| <code>console.info()</code> || 情報レベルのメッセージを出力する。<br><code>console.log()</code> と同様の動作だが、情報を明示的に区別したい場合に使用する。
|-
| <code>console.warn()</code> || 警告メッセージを出力する。<br>コンソール上で黄色のアイコンと共に表示される。
|-
| <code>console.error()</code> || エラーメッセージを出力する。<br>コンソール上で赤色のアイコンと共に表示され、スタックトレースも自動で付加される。
|}
</center>
<br>
使用例を以下に示す。<br>
<br>
 <syntaxhighlight lang="javascript">
 const user = { name: "Alice", age: 30 };
 
 console.log("ユーザ情報:", user);
 console.info("処理開始");
 console.warn("非推奨のAPIを使用しています");
 console.error("接続に失敗しました");
 </syntaxhighlight>
<br>
==== データ表示メソッド ====
オブジェクトや配列を視覚的に分かりやすく表示するためのメソッドを以下に示す。<br>
<br>
<center>
{| class="wikitable"
|+ consoleオブジェクトの構造表示メソッド
! メソッド !! 説明
|-
| <code>console.table()</code> || 配列やオブジェクトを表形式で表示する。<br>データの比較や一覧確認に適している。
|-
| <code>console.dir()</code> || オブジェクトのプロパティをツリー構造で表示する。<br>DOM要素やネストされたオブジェクトの内部構造を確認する際に有用である。
|-
| <code>console.dirxml()</code> || DOM要素をHTML / XML構造として表示する。<br>Elementsパネルと同様の階層表示が得られる。
|}
</center>
<br>
使用例を以下に示す。<br>
<br>
 <syntaxhighlight lang="javascript">
 const users = [
    { name: "Alice", age: 30 },
    { name: "Bob",   age: 25 },
 ];
 
 // 配列を表形式で表示
 console.table(users);
 
 // オブジェクトをツリー構造で表示
 console.dir(document.body);
 </syntaxhighlight>
<br>
==== タイミング計測 ====
処理時間を計測するためのメソッドを以下に示す。<br>
同一のラベル文字列を使用することで、複数の計測を同時進行させることができる。<br>
<br>
<center>
{| class="wikitable"
|+ console.timeによる処理時間計測メソッド
! メソッド !! 説明
|-
| <code>console.time('label')</code> || 指定したラベルで計測を開始する。
|-
| <code>console.timeEnd('label')</code> || 計測を終了し、経過時間をコンソールに出力する。
|-
| <code>console.timeLog('label')</code> || 計測を継続したまま、その時点の経過時間を出力する。
|}
</center>
<br>
使用例を以下に示す。<br>
<br>
 <syntaxhighlight lang="javascript">
 console.time("処理時間");
 
 for (let i = 0; i < 1000000; i++) {
    // 重い処理のシミュレーション
 }
 
 console.timeLog("処理時間"); // 途中経過を出力
 
 for (let i = 0; i < 1000000; i++) {
    // 更に処理が続く
 }
 
 console.timeEnd("処理時間"); // 計測終了・合計時間を出力
 </syntaxhighlight>
<br>
==== グループ化 ====
関連するログをグループにまとめて表示する機能を以下に示す。<br>
<br>
ネストしたグループの作成も可能であり、複雑なデータ構造のデバッグに役立つ。<br>
<br>
<center>
{| class="wikitable"
|+ consoleオブジェクトのグループ化メソッド
! メソッド !! 説明
|-
| <code>console.group('label')</code> || 指定したラベルでグループを開始する。<br>グループは展開された状態で表示される。
|-
| <code>console.groupCollapsed('label')</code> || グループを折りたたんだ状態で開始する。<br>ログが多い場合に視認性を保つために有用である。
|-
| <code>console.groupEnd()</code> || 現在のグループを終了する。
|}
</center>
<br>
使用例を以下に示す。<br>
<br>
 <syntaxhighlight lang="javascript">
 console.group("ユーザ処理");
    console.log("ユーザを取得中...");
    console.group("バリデーション");
       console.log("メールアドレスを確認");
       console.log("パスワードを確認");
    console.groupEnd();
    console.log("処理完了");
 console.groupEnd();
 </syntaxhighlight>
<br>
==== その他のメソッド ====
下表に、上記以外の有用なconsoleメソッドを示す。<br>
<br>
<center>
{| class="wikitable"
|+ consoleオブジェクト その他のメソッド一覧
! メソッド !! 用途
|-
| <code>console.assert()</code> || 条件が偽 (false) の場合のみエラーメッセージを出力する。
|-
| <code>console.count()</code> || 同じラベルで呼び出された回数をカウントして出力する。
|-
| <code>console.countReset()</code> || 指定したラベルのカウンタをリセットする。
|-
| <code>console.clear()</code> || コンソールの表示内容をクリアする。
|-
| <code>console.trace()</code> || その時点のコールスタック (スタックトレース) を出力する。
|-
| <code>console.debug()</code> || デバッグレベルのメッセージを出力する。(デフォルトでは非表示の場合あり)
|}
</center>
<br>
<code>console.assert()</code> の使用例を以下に示す。<br>
<br>
 <syntaxhighlight lang="javascript">
 const value = -5;
 
 // 条件が偽の場合のみ出力される
 console.assert(value > 0, "valueは正の値である必要があります:", value);
 </syntaxhighlight>
<br><br>

== Webブラウザ : DevTools ==
WebブラウザのDevTools (Developer Tools) は、Chrome、Firefox、Edge等の主要なWebブラウザに搭載された開発者向けの統合デバッグ環境である。<br>
DevToolsを開くには、以下に示すショートカットを使用する。<br>
<br>
* [F12]キー
*: DevToolsの表示・非表示を切り替える。
* [Ctrl] + [Shift] + [I]キー
*: Elementsパネルを表示してDevToolsを開く。
* [Ctrl] + [Shift] + [J]キー
*: Consoleパネルを表示してDevToolsを開く。
* [Ctrl] + [Shift] + [C]キー
*: Element Inspectorモードを起動する。(ページ上の要素を直接クリックして選択できる)
<br>
==== Elementsパネル ====
ElementsパネルはページのDOM構造をリアルタイムに表示するパネルである。<br>
<br>
HTML要素の階層構造を視覚的に確認でき、CSSスタイルの適用状況も確認・編集が可能である。<br>
<br>
下表に、Elementsパネルでできる主な操作を示す。<br>
<br>
<center>
{| class="wikitable"
|+ Elementsパネルの機能
! 機能 !! 説明
|-
| DOM構造の確認 || ページを構成する全HTML要素をツリー形式で表示する。<br>要素を選択すると、対応するスタイル情報が右側のStylesペインに表示される。
|-
| スタイルの確認と編集 || Stylesペインで適用されているCSSプロパティを確認し、<br>値を一時的に変更してレイアウトを調整できる。
|-
| 要素の検査 || ページ上の任意の要素を右クリックして[検査]を選択すると、対応するHTML要素にジャンプする。
|-
| DOMの編集 || 要素をダブルクリックしてHTMLを直接編集し、ページへの影響をリアルタイムで確認できる。
|}
</center>
<br>
==== Consoleパネル ====
Consoleパネルは、JavaScriptの実行ログを確認するための中心的なパネルである。<br>
<br>
consoleオブジェクトによる全ての出力 (<code>console.log()</code>、<code>console.error()</code> 等) がここに表示される。<br>
<br>
下表に、Consoleパネルでできる主な操作を示す。<br>
<br>
<center>
{| class="wikitable"
|+ ConsoleパネルのDevTools機能
! 機能 !! 説明
|-
| ログの確認 || <code>console.log()</code> 等で出力したメッセージを確認する。<br>エラーや警告はそれぞれ異なる色と記号で表示される。
|-
| JavaScriptコマンドの直接実行 || パネル下部の入力欄にJavaScriptを入力してその場で実行できる。<br>ページの変数やDOM要素に直接アクセスして値を確認・変更することが可能である。
|-
| ログのフィルタリング || ログレベル (All / Info / Warnings / Errors) でフィルタリングし、<br>必要な情報のみを表示できる。
|}
</center>
<br>
==== Sourcesパネル ====
SourcesパネルはJavaScriptのソースコードを閲覧し、ブレークポイントを使用したステップ実行を行うためのパネルである。<br>
<br>
実行中のコードの状態 (変数の値、コールスタック等) をリアルタイムで確認できる。<br>
<br>
下表に、Sourcesパネルでできる主な操作を示す。<br>
<br>
<center>
{| class="wikitable"
|+ Sourcesパネルの機能
! 機能 !! 説明
|-
| ソースコードの表示 || ページで読み込まれているJavaScriptファイルの一覧と内容を確認できる。
|-
| ブレークポイントの設定 || コードの行番号をクリックしてブレークポイントを設定する。<br>ブレークポイントに達すると実行が一時停止し、その時点の変数の値を確認できる。
|-
| ステップ実行 || 実行を1行ずつ進めながら変数の変化を追跡できる。
|-
| ソースコードの一時編集 || ファイルを一時的に編集して動作を確認することができる。(ページ再読み込みで元に戻る)
|}
</center>
<br>
==== Networkパネル ====
Networkパネルは、WebブラウザとサーバとのHTTP通信を全て監視するためのパネルである。<br>
<br>
APIリクエストのデバッグや、ページの読み込み速度に影響する通信を特定する時に活用する。<br>
<br>
[Ctrl] + [Shift] + [E]キーのショートカット (Chromeの場合) でConsoleパネルから直接移動できる。<br>
<br>
下表に、Networkパネルでできる主な操作を示す。<br>
<br>
<center>
{| class="wikitable"
|+ NetworkパネルのDevTools機能
! 機能 !! 説明
|-
| HTTPリクエスト / レスポンスの監視 || ページが送受信する全てのHTTPリクエストを一覧表示する。<br>各リクエストのヘッダ、ボディ、レスポンスの内容を詳細に確認できる。
|-
| ステータスコードの確認 || 各リクエストのステータスコード (200、404、500等) を一目で確認できる。
|-
| 応答時間とデータサイズの確認 || リクエストごとの応答時間とデータサイズを計測し、ボトルネックを特定できる。
|-
| リクエストのフィルタリング || XHR、Fetch、JS、CSS等の種別でフィルタリングして、目的のリクエストを素早く見つけられる。
|}
</center>
<br>
下表に、DevToolsの主要パネル一覧を示す。<br>
<br>
<center>
{| class="wikitable"
|+ Chrome DevTools パネル一覧
! パネル名 !! 主な用途 !! ショートカット
|-
| Elements || DOM構造の確認・CSSの編集 || [Ctrl] + [Shift] + [I]キー
|-
| Console || ログ確認・JavaScript直接実行 || [Ctrl] + [Shift] + [J]キー
|-
| Sources || ブレークポイント設定・ステップ実行 || [F12]キー
|-
| Network || HTTP通信の監視・APIデバッグ || [Ctrl] + [Shift] + [E]キー
|-
| Performance || ページのパフォーマンス分析 || -
|-
| Memory || メモリリーク検出・ヒープ分析 || -
|}
</center>
<br><br>

== ブレークポイント ==
ブレークポイントとは、JavaScriptの実行を任意の行で一時停止させるための機能である。<br>
<br>
実行が一時停止した時点での変数の値、コールスタック、スコープの内容をリアルタイムで確認できる。<br>
<br>
==== 行ブレークポイント ====
行ブレークポイントは最も基本的なブレークポイントである。<br>
設定方法を以下に示す。<br>
<br>
# [F12]キー等を押下して、Chrome DevToolsを開く。
# [Sources]パネルを選択する。
# 対象のJavaScriptファイルを開く。
# 一時停止させたい行の行番号を選択する。
# 行番号が青いマーカーで強調表示されれば、ブレークポイントの設定は完了である。
<br>
ページを操作してブレークポイントが設定された行に到達すると、実行が自動的に一時停止する。<br>
<br>
==== 条件付きブレークポイント ====
条件付きブレークポイントを使用すると、指定した条件式が真 (true) の場合のみ実行を一時停止させることができる。<br>
<br>
ループ処理の特定のイテレーションや特定の値を持つ場合のみ調査したい場合に有効である。<br>
<br>
設定方法を以下に示す。<br>
<br>
# [Sources]パネルで対象の行番号を右クリックする。
# [Add conditional breakpoint]を選択する。
# 入力ボックスに条件式を入力する。
#: 例: <u>index > 100</u>
#: 例: <u>user.name === "Alice"</u>
# [Enter]キーを押下して確定する。
<br>
条件式が真と評価された場合のみブレークポイントが機能し、それ以外の場合は実行が継続される。<br>
<br>
==== DOMブレークポイント ====
DOMブレークポイントは、DOM要素の変化を検知して実行を一時停止させる機能である。<br>
<br>
どのJavaScriptコードがDOMを操作しているのかを特定する時に有効である。<br>
<br>
設定方法を以下に示す。<br>
<br>
# Elementsパネルで対象のDOM要素を選択する。
# 要素を右クリックする。
# [Break on]を選択する。
# 下表の種別から目的に合ったものを選択する。
<br>
下表に、選択できる種別を示す。<br>
<br>
<center>
{| class="wikitable"
|+ DOMブレークポイントの種類
! 種類 !! 説明
|-
| Subtree modifications || 対象要素の子孫ノードが追加・変更・削除された場合に停止する。
|-
| Attribute modifications || 対象要素の属性 (class、id等) が変更された場合に停止する。
|-
| Node removal || 対象要素がDOMから削除された場合に停止する。
|}
</center>
<br>
==== イベントリスナーブレークポイント ====
イベントリスナーブレークポイントは、特定のイベントが発生した時に実行を一時停止させる機能である。<br>
クリックやキー入力等、特定のユーザ操作に対応したコードの動作を追跡する場合に有効である。<br>
<br>
設定方法を以下に示す。<br>
<br>
# [Sources]パネルを開く。
# 右側のサイドバーにある[Event Listener Breakpoints]セクションを展開する。
# 停止させたいイベントのカテゴリ (Mouse、Keyboard、Clipboard等) を展開する。
# 対象のイベント (click、keydown等) にチェックを入力する。
<br>
以降、そのイベントが発生するたびに実行が自動的に一時停止する。<br>
<br>
==== ステップ実行 ====
ブレークポイントで実行が一時停止した後は、ステップ実行機能を使用して、処理を1行ずつ進めることができる。<br>
<br>
各ステップで変数の値の変化を確認しながら、バグの原因を追跡する。<br>
<br>
<center>
{| class="wikitable"
|+ ステップ実行 操作・ショートカット一覧
! コマンド !! ショートカット !! 説明
|-
| Resume || [F8]キー || 次のブレークポイントまで実行を再開する。
|-
| Step Over || [F10]キー || 次の行に進む。関数呼び出しがあっても関数内には入らない。
|-
| Step Into || [F11]キー || 次の行に進む。関数呼び出しがある場合は関数の中に入る。
|-
| Step Out || [Shift] + [F11]キー || 現在の関数から抜け出し、呼び出し元の次の行に進む。
|}
</center>
<br><br>

== debugger文 ==
<code>debugger</code> 文は、JavaScriptコード内に直接記述するデバッグ用のキーワードである。<br>
<br>
DevToolsが開いている状態でこの文に到達すると、ブレークポイントと同様に実行が自動的に一時停止する。<br>
<br>
==== 基本構文 ====
<code>debugger</code> 文の基本的な記述方法を以下に示す。<br>
<br>
 <syntaxhighlight lang="javascript">
 debugger;
 </syntaxhighlight>
<br>
この1行を任意の箇所に挿入するだけで、DevToolsが起動中であればその行で実行が停止する。<br>
<br>
DevToolsが閉じている場合は、<code>debugger</code> 文は無視され、処理はそのまま実行される。<br>
<br>
==== 使用例 ====
* ループ内の条件に応じて停止させる例
 <syntaxhighlight lang="javascript">
 function calculateTotal(items) {
    let total = 0;
    for (let i = 0; i < items.length; i++) {
       if (items[i].price > 100) {
          debugger; // 高額商品の処理時に停止
       }
       total += items[i].price;
    }
    return total;
 }
 </syntaxhighlight>
*: <br>
* エラーステータスの場合のみ停止させる例
*: <syntaxhighlight lang="javascript">
 function processData(data) {
    if (data.status === "error") {
       debugger; // エラーステータスの場合のみ停止
    }
    // 以降の処理...
 }
 </syntaxhighlight>
<br>
==== 注意事項 ====
<code>debugger</code> 文を使用する場合は、以下に示す事柄に注意する必要がある。<br>
<br>
* DevToolsが閉じている場合は効果がない。
*: DevToolsを開いていない状態では、<code>debugger</code> 文は完全に無視される。
*: 本番環境のユーザには影響を与えない。(ただし削除することを強く推奨する)
*: <br>
* 本番コードには残さない。
*: デプロイ前には必ず <code>debugger</code> 文を全て削除すること。
*: ESLintの <code>no-debugger</code> ルールを有効化することにより、削除漏れを自動検出できる。
*: <br>
* ローカル開発環境のみで使用する。
*: パフォーマンスに影響する可能性があるため、ローカル開発時のみ使用する。
*: CIパイプラインやテスト環境へのコードに含めないよう注意する。
<br><br>

== デバッグの実践パターン ==
==== 一般的なデバッグ手順 ====
不具合を効率的に解決するための手順を以下に示す。<br>
<br>
# 問題を再現する。
#: バグが発生する具体的な操作手順を特定する。
#: 同じ条件で必ず再現するかどうかを確認する。
#: 再現条件が複雑な場合は、最小限の再現コードに絞り込む。
#: <br>
# 原因を特定する。
#: <code>console.log()</code> で怪しい変数の値を確認する。
#: ブレークポイントを設定して実行フローを追跡する。
#: エラーメッセージのスタックトレースから問題箇所を特定する。
#: <br>
# 修正を実装する。
#: 根本原因を特定した上で最小限の修正を行う。
#: 修正箇所が他の機能に影響しないかを確認する。
#: <br>
# 修正を検証する。
#: 同一の再現条件で問題が解決されたことを確認する。
#: 関連する機能のテストも実行して副作用がないことを確認する。
<br>
==== よくあるエラーと対処法 ====
===== Uncaught TypeError: Cannot read properties of undefined =====
* 原因
*: 未初期化または存在しないオブジェクトのプロパティにアクセスしようとしている。
*: <br>
* 対処方法
*: <code>console.log()</code> で対象変数の値を確認する。
*: オプショナルチェーン (<code>?.</code>) を使用してアクセス前にnullチェックを行う。
<br>
===== Uncaught ReferenceError: xxx is not defined =====
* 原因
*: 未宣言の変数を参照している、あるいは、スコープ外の変数にアクセスしている。
*: <br>
* 対処方法
*: 変数の宣言位置とスコープを確認する。
*: ESLintを導入して事前に検出する。
<br>
===== Uncaught SyntaxError =====
* 原因
*: シンタックスエラー
*: 括弧やセミコロンの不一致や予約語の誤用等
*: <br>
* 対処方法
*: エラーメッセージに示された行番号を確認する。
*: ESLintで事前に検出する。
<br>
===== CORS error =====
* 原因
*: クロスオリジンリクエストがサーバ側のCORSポリシーによって拒否されている。
*: <br>
* 対処方法
*: サーバ側で適切な <code>Access-Control-Allow-Origin</code> ヘッダを設定する。
<br>
===== Failed to fetch =====
* 原因
*: ネットワーク通信エラー
*: APIサーバへの接続に失敗している。
*: <br>
* 対処方法
*: Networkパネルでリクエストの詳細を確認する。
*: サーバの起動状態とURLが正しいかを確認する。
<br><br>

== 関連情報 ==
* [[JavaScriptの基礎 - エラーハンドリング]]
* [[JavaScriptの基礎 - コールバック関数]]
* [[JavaScriptの基礎 - thisキーワード]]
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Web]]