console.logの結果はどこで見るの？

✅ 回答

console.log() の結果は、ページ上には表示されません。ブラウザの「開発者ツール」のConsoleタブに表示されます。

開発者ツールの開き方

1. ブラウザ（Chrome）でページを開く
2. キーボードの F12 キーを押す（Macは Cmd+Option+I）
3. 画面の右側や下に開発者ツールが表示される
4. 「Console」タブをクリック

Consoleタブに こんにちは と表示されていれば成功です。

console.logの3つの使い方

// パターン1：変数の中身を確認する
const name = "田中";
const age = 16;
console.log(name);       // → "田中"
console.log(age);        // → 16
console.log(name, age);  // → "田中" 16（カンマで複数出力）

// パターン2：処理がここまで来ているか確認する
console.log("ボタンクリック処理に入った");
// ...何か処理...
console.log("処理が完了した");

// パターン3：オブジェクトや配列の中身を確認する
const student = { name: "田中", score: 85 };
console.log(student);    // → {name: "田中", score: 85}

デバッグ（バグ探し）では「変数の中身を確認する」使い方が最も多いです。「ここまで処理が来ているか」を確認するのにも使います。

console.log以外のメソッド

// console.log 以外の便利メソッド
console.warn("注意：この値は0です");   // ⚠️ 黄色で表示
console.error("エラー：データが見つかりません"); // ❌ 赤色で表示

// console.table：配列やオブジェクトを表形式で見やすく表示
const scores = [
  { name: "田中", score: 85 },
  { name: "鈴木", score: 72 },
];
console.table(scores); // → 表形式で表示される

console.table() は配列データを見やすく表示してくれるので、学園祭サイトの出し物リストなどを確認するときに便利です。

よくある間違い

間違い	正しい理解
「console.logで画面に表示できる」	画面表示はDOM操作（textContent等）を使う
「console.logを本番コードに残す」	デバッグ用なので、完成したら消す
「Consoleタブが見つからない」	開発者ツール上部のタブを左右にスクロールする

「画面に表示したい」場合は？

console.log() は開発者向けの確認ツールです。ユーザーに見せたい場合は別の方法を使います：

• document.getElementById("msg").textContent = "こんにちは" — 特定の要素に表示
• alert("こんにちは") — ポップアップで表示（学習用）