【初心者向け】JavaScriptでconsole.log()が表示されない原因と解決方法

JavaScriptを学び始めたばかりの時に、「console.log()が表示されない」「開発者ツールの意味が分からない」と感じていませんか？

この記事では、初心者が最初につまずきやすいconsole.log()が表示されない原因と、まず動かすための解決方法を解説します。

先に結論

console.log()が表示されない原因の多くは、以下の3つです。

1. 開発者ツールを開いていない
2. ConsoleタブではなくElementsタブを見ている
3. ページを再読み込みしていない

---

問題の再現

以下のコードを書いたのに、何も表示されない...

// HTMLファイルに書いたコード
console.log("こんにちは、JavaScript！");

このコードを実行しても、Webページの画面には何も表示されません。

---

問題の解説

よくある間違い1: 開発者ツールを開いていない

なぜ起きるか

console.log()は、Webページの画面には表示されません。
開発者ツール（F12で開く）のコンソール画面に表示されます。

どう直すか

1. F12キーを押して開発者ツールを開く
   • Windows: F12キーまたはCtrl + Shift + I
   • macOS: Cmd + Option + I
2. Consoleタブをクリック
3. ページを再読み込み

操作例

<!DOCTYPE html>
<html>
<head>
    <title>JavaScriptテスト</title>
</head>
<body>
    <script>
        console.log("こんにちは、JavaScript！");
    </script>
</body>
</html>

ブラウザでこのHTMLファイルを開き、F12キーで開発者ツールを開いてConsoleタブを確認すると、「こんにちは、JavaScript！」 と表示されます。

---

よくある間違い2: ConsoleタブではなくElementsタブを見ている

なぜ起きるか

開発者ツールには複数のタブがあります。

• Elements - HTMLの構造を見る
• Console - JavaScriptの結果を見る ← ここを見る必要がある
• Network - ネットワーク通信を見る

Consoleタブを開いていないと、console.log()の結果は見えません。

どう直すか

開発者ツールの上部にあるタブから、「Console」 をクリックします。

---

よくある間違い3: ページを再読み込みしていない

なぜ起きるか

HTMLファイルを編集して保存しても、ブラウザは自動的に再読み込みしません。
ページを再読み込み（リロード）しないと、新しいコードは実行されません。

どう直すか

ページを再読み込み（リロード）しましょう。

• Windows: F5キーまたはCtrl + R
• macOS: Cmd + R

または、ブラウザの更新ボタンをクリックします。

実践例: 正しい手順

ステップ1: HTMLファイルを作成

test.htmlというファイルを作成し、以下のコードを書きます。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScriptテスト</title>
</head>
<body>
    <h1>JavaScriptテスト</h1>
    <script>
        console.log("こんにちは、JavaScript！");
        console.log(10 + 5);
        console.log("私の名前は" + "山田太郎" + "です");
    </script>
</body>
</html>

ステップ2: ブラウザで開く

作成したHTMLファイルをブラウザで開きます。

ステップ3: 開発者ツールを開く

• Windows: F12キーを押す
• macOS: Cmd + Option + Iを押す

ステップ4: Consoleタブを開く

開発者ツールの上部にあるタブから、「Console」 をクリックします。

ステップ5: 結果を確認

コンソール画面に以下のように表示されます。

こんにちは、JavaScript！
15
私の名前は山田太郎です

---

もっと学びたい方へ

この記事でconsole.logの基礎を理解できた方は、次のステップとして実践的な学習を進めてみませんか？

LTech では、JavaScriptを体系的にコードを書きながら学べるカリキュラムを提供しています。

LTechで学べること

• JavaScript基礎講座 - JavaScriptの基礎構文を段階的に学習
• Node.js講座 - Promise、async/awaitを段階的に学習
• Express.js講座 - 非同期処理を使ったWebアプリケーション開発
• 実践的な演習 - コードエディタで実際に手を動かしながら学習
• 理解度チェック - クイズで知識を定着

すべてのコースで、初心者でも理解しやすい説明と実際に動かせるコード例を用意しています。

👉 LTechでJavaScriptを学ぶ

---

この記事が、console.logで困っている方の助けになれば幸いです。質問やフィードバックがあれば、コメントでお知らせください！