JavaScriptでスタックトレースを取得する方法【例外発生時のデバッグ術】
JavaScriptの開発では、エラーの原因を特定するためにスタックトレース（呼び出し履歴）を確認することが非常に重要です。例外がスローされた箇所だけでなく、そこに至るまでの関数の呼び出し経路を把握できれば、バグの特定は格段に早くなります。
Errorオブジェクトのstackプロパティを使う
JavaScriptでスタックトレースを取得する最もシンプルな方法は、new Error() でエラーオブジェクトを生成し、その stack プロパティを参照することです。コードにわずか数行追加するだけで、現在時点の呼び出し履歴を文字列として取得できます。
サンプルコード
<html>
<head>
<script>
// スタックトレースを取得する関数
function stackTrace() {
var err = new Error();
return err.stack;
}
// コンソールと画面に出力
console.log(stackTrace());
document.write(stackTrace());
</script>
</head>
<body>
<p>上記にスタックトレースが出力されます。</p>
</body>
</html>
実行結果
このコードを実行すると、stackTrace() 関数が呼ばれた位置から、new Error() が生成された行までの呼び出し履歴が表示されます。ブラウザの開発者ツール（コンソール）でも同じ内容を確認できます。
try〜catch文で例外発生時のスタックトレースを取得する
実際のデバッグでは、例外がスローされた瞬間のスタックトレースを取得したいケースがほとんどです。try〜catch 文と組み合わせれば、キャッチしたエラーオブジェクトから直接スタックトレースを取り出せます。
try {
throw new Error('テスト用の例外');
} catch (e) {
console.error(e.stack); // 例外発生時のスタックトレースを出力
}
console.error() を使うことで、コンソール上でエラーとして強調表示されるため、問題の切り分けがさらに容易になります。
まとめ
new Error().stackを参照すれば、任意の場所でスタックトレースを取得できる。- 例外処理では
catch (e)のe.stackを出力するのが定石。 - 開発者ツールのコンソールと併用すると、デバッグ効率が大きく向上する。
スタックトレースはエラー発生箇所の特定だけでなく、意図しない呼び出し経路の発見にも役立ちます。日頃の開発にぜひ取り入れてみてください。
-
JavaScriptでセレクトボックスの選択に応じて非表示のdivを表示・切り替える方法
Webフォームを作成していると、セレクトボックス（select要素）で特定のオプションが選ばれたときだけ、隠しておいたdiv要素を表示したいという場面によく出くわします。このような動的な表示切り替えは、JavaScriptの「style.display」プロパティを操作することで簡単に実現できます。表示したいタイミングで値を「block」に設定し、非表示にしたいときは「none」に戻すだけでOKです。実装例以下に、セレクトボックスで2番目のオプション（Javascript）が選択されたときに、非表示のdivを表示するサンプルコードを紹介します。<!DOCTYPE html> <
-
JavaScriptでh1のinnerTextを取得する方法｜子要素のテキストを除外する
h1タグ内に子要素（spanなど）が含まれている場合、単純にinnerTextを取得すると子要素のテキストまで一緒に取られてしまいます。h1直下のテキストのみを取得したい場合は、childNodesとtextContentを組み合わせることで実現できます。 childNodes[0].textContent; 仕組みの解説 querySelector()で取得したh1要素に対してchildNodesを使うと、その子ノードの一覧（NodeList）が返されます。[0]で最初の子ノード、つまりh1直下のテキストノードにアクセスし、そこからtextContentを取得することで、子要素内のテキストを