JavaScriptのconsole.logの使い方【初心者向け】

console.log とは？

JavaScriptで console.log() は、プログラムの動きを確認するための命令です。

「この変数に正しい値が入っているか？」「この処理は実行されているか？」を確かめたいとき、console.log() を使います。

innerHTML との違い

innerHTML はページ上に文字を表示する命令です。一方、console.log() はページには何も表示されません。出力結果はブラウザの「開発者ツール」の Console タブでのみ確認できます。

基本の使い方

console.log() の括弧の中に、表示したい値を入れます。文字列・数値・真偽値（true/false）など、どんな値でも表示できます。

// 文字列を表示
console.log("こんにちは！");       // こんにちは！

// 数値を表示
console.log(42);                  // 42

// 真偽値（boolean）を表示
console.log(true);                // true

// 計算結果を表示
console.log(10 + 5);             // 15

文字列（テキスト）は "..." または '...' で囲みます。数値や真偽値はそのまま書けばOKです。

複数の値を表示する

カンマ（,）で区切ると、複数の値を一度に表示できます。"変数名:", 変数 のようにラベルをつけるパターンがデバッグの定番です。

const name = "太郎";
const age = 15;

// カンマ区切りで複数の値を表示
console.log(name, age);            // 太郎 15

// ラベルをつけて確認する（デバッグの定番）
console.log("名前:", name);        // 名前: 太郎
console.log("年齢:", age);         // 年齢: 15

// 計算の途中経過を確認する
const score = 80;
const bonus = 10;
const total = score + bonus;
console.log("合計スコア:", total); // 合計スコア: 90

ラベルがないと「どの値がどの変数のものか」が分からなくなります。複数の変数を確認するときは、必ずラベルをつける習慣をつけましょう。

📖 変数についてもっと学びたい方は JavaScriptレッスン1 から始めましょう。

開発者ツールで確認する方法

console.log() の出力は、ブラウザの 開発者ツール（DevTools） の Console タブ に表示されます。

開き方（Windows）

キーボードの F12 キーを押す、または Ctrl + Shift + I で開きます。「Console」タブをクリックします。

開き方（Mac）

Cmd + Option + I で開きます。「Console」タブをクリックします。

確認の流れ

1. HTMLファイルをブラウザで開く
2. 開発者ツールを開く（F12）
3. 「Console」タブをクリック
4. console.log() の出力が表示されていることを確認

🔗 開発者ツールの詳しい使い方は 開発者ツールの使い方 で解説しています。

console.warn と console.error

console.log() の仲間に console.warn() と console.error() があります。色で区別でき、問題の種類を伝えるのに役立ちます。

// 通常のログ（黒）
console.log("処理が開始されました");

// 警告（黄色） — 注意が必要なとき
console.warn("データが空です。デフォルト値を使います。");

// エラー（赤） — 重大な問題が起きたとき
console.error("ファイルが見つかりませんでした！");

3つを使い分けると、Console タブで「どのログが重要か」が一目でわかるようになります。

🔥 エラーハンドリング入門 で try/catch と組み合わせた活用法も学べます。

よくあるミス

初めて console.log() を使うときに起きやすいミスを紹介します。

// ❌ ミス①：大文字で書いてしまう
// Console.log("hello"); // Uncaught ReferenceError: Console is not defined

// ✅ 正しい書き方：すべて小文字
console.log("hello");

// ❌ ミス②：括弧を忘れる（何も表示されない）
// console.log

// ✅ 正しい書き方：括弧でしっかり呼び出す
console.log("表示される");

// ❌ ミス③：スコープ外の変数を参照する
function greet() {
  const message = "こんにちは";
}
// console.log(message); // Uncaught ReferenceError: message is not defined

// ✅ 正しい書き方：同じスコープ内で使う
const greeting = "こんにちは";
console.log(greeting); // こんにちは

ミス①：大文字で書いてしまう

console はすべて小文字です。Console.log() と大文字で書くと Uncaught ReferenceError: Console is not defined というエラーが出ます。JavaScriptは大文字・小文字を区別します。

ミス②：括弧を忘れる

console.log（括弧なし）と書いても値は出力されません。console.log() は「関数の呼び出し」なので、括弧は必須です。

ミス③：スコープ外の変数を表示しようとする

関数の中で宣言した変数は、関数の外では使えません。Uncaught ReferenceError: ○○ is not defined と表示されたら、変数が宣言されたスコープ（の範囲）を確認しましょう。

❓ エラーが出て直し方が分からないときは console.logの結果はどこで見る？ も参考にしてください。

まとめ

console.log() はプログラミングの入口にして最強の道具です。まずはコードを書いて、積極的に活用してみましょう。

あわせて読みたい・試してみよう

• 📚 JavaScriptレッスン1 — console.logから始めよう
• 🖥️ console.logシミュレーター — 開発者ツール不要でブラウザ上で試す
• ❓ console.logの結果はどこで見る？
• 🔧 開発者ツールの使い方 — Console・Elementsを使いこなす