👻 console.log を書いたのに何も表示されない

😰 こんな症状

console.log() を書いたのに、ブラウザに何も表示されない。開発者ツールを開いていないときに起きるよ。

🔍 原因

console.log()はブラウザの画面ではなく開発者ツールのコンソールに表示されるよ。開発者ツールを開いていない、「Console」タブが選ばれていない、またはそもそもスクリプトファイルが読み込まれていない（パスミス）場合に「何も表示されない」状態になるよ。

❌ エラーが起きるコード

<script src="app.js"></script>
<!-- body の前に配置、DOM未構築 -->

✅ 直し方

1. F12キー（MacはCmd+Option+I）で開発者ツールを開く。 2. 「Console」タブをクリックする。 3. それでも表示されない場合は<script>タグのファイルパスが正しいか確認する。 4. Networkタブでスクリプトが404になっていないか確認する。

✅ 修正後のコード

<script src="app.js" defer></script>
<!-- defer で DOM 構築後に実行 -->

🔗 関連するエラー

• Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
• Uncaught TypeError: Cannot read properties of null — getElementById の id が存在しない
• 404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
• ボタンを押しても何も起きない — getElementById の id 不一致
• 計算結果が NaN になる — 文字列を数値に変換していない

🔗 別カテゴリの関連エラー

• scriptが読み込めない（404）
• localStorageが使えない
• Invalid left-hand side

📖 この問題を学べるレッスン

JavaScriptコースで基礎から学ぶ →

📝 関連ブログ記事

• プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
• JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
• JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説

📖 関連する用語

• JavaScript
• コンソール
• Java・JavaScript の違い

❓ 関連するQ&A

• console.logの結果はどこで見る？
• ボタンクリックで何も起きない
• letとconstどっちを使う？