スタックトレースを読む
エラーの発生元をたどります。
「スタックトレースを読む」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
スタックトレースとは
スタックトレースは、エラーが発生した時点で実行中だった関数呼び出しの一覧です。プログラムが失敗箇所に到達するまでにたどった経路を示します。
上から下へ読む
トレースの最上位フレームは、エラーがスローされた場所です。その下の各行には呼び出し元が表示され、プログラム本来のエントリーポイントまで続きます。
フレームの構造
通常、各フレームには関数名、呼び出しが発生したファイル、行番号、列番号が示されます。これにより正確な場所を特定できます。
エラーメッセージ
フレームの上には、TypeError のように何が問題だったかを説明するエラー名とメッセージがあります。原因が説明されていることが多いため、まずこれを読んでください。
function getName(user) {
return user.name
}
// calling getName with undefined would throw a TypeError
console.log("Reading the message tells you what failed")呼び出しの連鎖をたどる
下方向に読み進めると、どの関数がどの関数を呼び出し、それが失敗した行につながったのかという順序を再構成できます。
自分のコードとライブラリコード
トレースにはライブラリのフレームが含まれることもあります。通常はそこに修正すべき箇所があるため、自分のソースファイルに属する最上位のフレームに注目してください。
非同期スタックトレース
最新の DevTools は非同期の呼び出しをつなぎ合わせ、プロミスやタイマーが始まったコンテキストを表示します。そのため、境界でトレースが途切れません。
トレースを手動で生成する
console.trace はエラーをスローせずに現在のコールスタックを出力するため、関数がどのように呼び出されたかを確認できます。
function inner() {
console.trace("reached inner")
}
function outer() {
inner()
}
outer()Error の stack プロパティ
Error オブジェクトには、トレースをテキストとして含む stack プロパティがあります。これをログに記録したり、エラー報告サービスに送信したりできます。
const err = new Error("Something failed")
console.log(typeof err.stack)縮小されたコードとソースマップ
本番コードは縮小されていることが多く、トレースがわかりにくくなります。ソースマップを使うと、縮小された位置を元のファイルに対応付けて、読みやすいトレースにできます。
トレースから修正へ
メッセージ、ユーザーコードの最上位フレーム、行番号を組み合わせてバグの場所を特定します。次に、その場所の変数を調べて原因を確認してください。
確認問題
スタックトレースに関する知識を確認しましょう。
まとめ
まとめ: スタックトレースは、エラーに至った経路を明らかにします。
- 最上位フレームは、エラーがスローされた場所です
- 下位のフレームは呼び出し元です
- 自分のコードにある最上位のフレームに注目してください
- ソースマップを使うと、縮小されたトレースを読みやすくできます
const err = new Error("fail")
console.log(typeof err.stack)よくある質問
「スタックトレースを読む」レッスンは無料ですか？
はい。「スタックトレースを読む」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「スタックトレースを読む」で何を学びますか？
エラーの発生元をたどります。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「スタックトレースを読む」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- console.log の先へ
- ブレークポイントを設定する
- コードをステップ実行する
- スタックトレースを読む