コードを書いても動かない時どうする？

✅ 回答

まず深呼吸。コードが動かないのは日常です。プロのエンジニアも1日の半分はデバッグ（バグ探し）に使っています。

4ステップのデバッグ手順

1. エラーメッセージを読む — 赤い文字は「ここがおかしい」というヒント。行番号が書いてあることが多い
2. スペルミスを確認 — 原因の8割はタイプミス。class名、タグ名、ファイル名を目視チェック
3. 最後に動いた状態に戻す — Ctrl+Z で1つずつ戻して、どこで壊れたか特定する
4. 1行ずつ追加して確認 — 動く状態から少しずつコードを足して、壊れるポイントを見つける

よくある原因トップ5

言語	よくある原因	確認方法
HTML	閉じタグ忘れ	インデントがずれていないか確認
CSS	クラス名のスペルミス	開発者ツールで要素を選択して確認
CSS	セミコロン忘れ	その行以降のスタイルが全部効かなくなる
JS	変数名の大文字/小文字違い	Console に ReferenceError が出る
JS	DOMが読み込まれる前にスクリプト実行	scriptタグをbodyの最後に移動

具体例：CSSが効かない

<!-- デバッグの例：CSSが効かないとき -->

<!-- ❌ 動かない（なぜ？） -->
<p class="highlight">テスト</p>
<style>
  .hightlight { color: red; }  <!-- スペルミス！ -->
</style>

<!-- ✅ 修正後 -->
<p class="highlight">テスト</p>
<style>
  .highlight { color: red; }
</style>

highlight と hightlight — 「l」と「t」の順番が逆。こういう1文字の違いが原因の大半です。

開発者ツール（F12）を味方にする

• Elements タブ — HTMLの構造とCSSの適用状況を確認。取り消し線が入っていたら上書きされている
• Console タブ — JavaScriptのエラーが表示される。赤い文字を読む
• Network タブ — 画像やCSSファイルが404（見つからない）になっていないか確認

「動かない→原因を探す→直す→動いた！」のサイクルを繰り返すうちに、エラーの原因を予測できるようになります。最初は30分かかった修正が、慣れれば30秒で終わるようになります。

デバッグの手順

// Step 1: console.logで値を確認する
const btn = document.getElementById('submit');
console.log(btn); // null → id名が間違っている！

// Step 2: エラーメッセージを読む
// "Cannot read properties of null (reading 'addEventListener')"
// → nullに対してaddEventListenerを呼んでいる
// → getElementByIdがnullを返している

// Step 3: 原因を特定する
// - id名のスペルミス？
// - scriptがHTML要素より前にある？
// - 要素がまだ読み込まれていない？

// Step 4: 修正して確認
document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('submit'); // ✅ 要素読み込み後に実行
  btn.addEventListener('click', handler);
});

鉄則：「動かない」と思ったら、まず console.log で変数の中身を確認する。これだけで8割のバグは見つかります。