console.log デバッグ
もっとも簡単で、もっとも効くデバッグ手段
⏱ 想定 ~5 分
01 · 読む
ブレークポイント、ウォッチ式、ステップ実行のような派手なデバッグツールはあります。あとで学びます。でも 一番よく 使うツールは、シニアエンジニアでも、地味な console.log() です。
アイデアはすごく単純： 値を出力して、実際に何が起きているか見る 。プログラムの挙動が期待と違うとき、もっとも早く理由を掴むのは、各ステップで値をログし、 期待 と 現実 を見比べることです。
華やかではありません。洗練もされていません。でも効きますし、速いです。
💡 想像してみてくださいconsole.log デバッグは、森に追跡カメラを仕掛けるようなものです。すべての木を常に見るのは無理ですが、要所にカメラを置けば何が通ったか分かります。意外なものが現れたら、どこを見ればいいかすぐ分かります。
02 · 読む
バグありのショップ app を渡されました。 getAffordableElectronics 関数は、指定価格内で在庫のある電化製品を返すはずです。でも、高くて在庫切れのものを返しています。調査していきましょう。
03 · ターミナル演習
まず出力ログを読み、関数が実際に何を返しているか、期待値とのずれを見ましょう。
（このセクションはインタラクティブです — JavaScript を有効にしてください。）
04 · ターミナル演習
今度はコードを読んでロジックを追います。フィルタの手順を見ましょう —— その中のひとつに、細かい演算子のバグがあります。
（このセクションはインタラクティブです — JavaScript を有効にしてください。）
05 · コード例
各ステップにデバッグログを入れた場合の様子です。中間結果を見比べて、どこで間違ったか追いましょう。
デバッグログを追加
function getAffordableElectronics(items, maxPrice) {
console.log('Input:', items.length, 'items, max price:', maxPrice);
const electronics = items.filter(item => item.category === 'electronics');
console.log('After category filter:', electronics.map(i => i.name));
const affordable = electronics.filter(item => item.price > maxPrice);
console.log('After price filter:', affordable.map(i => i.name));
// ^ This would show ['Laptop', 'Monitor'] — WRONG direction!
const available = affordable.filter(item => item.inStock);
console.log('After stock filter:', available.map(i => i.name));
return available.map(item => item.name);
}
各ステップにログがあれば、バグはすぐ浮かびます：価格フィルタの後、安いアイテムではなく高いアイテムが残っているのが見えます。 > は < のはずです。ログなしだと推測に時間がかかりますが、ログありなら数秒で見つかります。
06 · 読む
戦略的にログを置くのは技です。あちこちにばらまかず、データ変換や壊れそうな箇所に置きましょう。
ポイントまとめ
- 関数の 冒頭 でログ（呼ばれた？何で？）
- 変換の 前後 でログ（何が変わった？）
- 各ログにラベル： console.log('step 3 - data:', data)
- コミット前にデバッグログは消す
07 · 空欄補充
console.log でデバッグするとき、どのログがどれか分かるように必ず _____ を付けましょう。
08 · クイズ
なぜ console.log には必ずラベルを付けるべきか？
- プログラムが速くなるから
- どのログがどの出力か区別できるから
- JavaScript が console.log にラベルを要求するから
- ラベルが必要なのは本番コードだけだから
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。