コンソール
初級読み方：コンソール｜英語：Console
開発者ツール内の画面で、console.log() で文字を表示できるよ。
やさしい説明
コンソールとは、ブラウザの開発者ツールにあるメッセージ表示エリアです。console.log() で変数の値やメッセージを表示できます。
プログラムの「独り言」のようなものです。「ここまで動いてるよ」「この変数の値は○○だよ」と確認できます。デバッグ（バグ探し）に欠かせません。
ブラウザで F12 キーを押して「Console」タブを開くと見られます。ユーザーには見えないので、開発中に自由に使えます。
具体例・使い方
// メッセージを表示
console.log("ここまで動いた！");
// 変数の値を確認
const score = 85;
console.log("スコア:", score); // スコア: 85
// オブジェクトの中身を確認（展開して見られる）
const user = { name: "太郎", age: 15 };
console.log(user);
// 複数の値をまとめて表示
console.log("name:", user.name, "age:", user.age);consoleの種類
// log: 通常のメッセージ（白/グレー）
console.log("処理開始");
// info: 情報メッセージ（青アイコン）
console.info("データ取得完了");
// warn: 警告（黄色背景）
console.warn("非推奨のAPIを使用しています");
// error: エラー（赤背景 + スタックトレース）
console.error("APIエラー: 404 Not Found");
// table: 配列・オブジェクトを表形式で表示
const users = [
{ name: "太郎", score: 85 },
{ name: "花子", score: 92 },
];
console.table(users);
// time / timeEnd: 処理時間を計測
console.time("処理時間");
// ... 何らかの処理 ...
console.timeEnd("処理時間"); // 処理時間: 1.234msconsole.table() は配列やオブジェクトを見やすい表形式で表示します。複数のデータを確認するときに console.log より格段に読みやすくなります。
いつ使う？
- 変数の値が想定通りか確認したいとき
- 処理がどこまで進んだか知りたいとき
- APIのレスポンスデータの中身を確認するとき
- エラーの原因を探すとき（
console.error） - 処理速度を計測したいとき（
console.time）
間違いやすいポイント
❌ 本番環境にconsole.logを残す
開発中は便利ですが、公開サイトに残すとユーザーの開発者ツールに表示されます。機密情報が漏れる危険もあります。公開前に削除するか、ビルドツール（Vite等）の設定で自動削除しましょう。
❌ console.log だけに頼りすぎる
複雑なバグは console.log だけでは追いにくいです。ブラウザの「Sources」タブにある ブレークポイント（breakpoint）機能を使うと、処理を一時停止して変数の状態を詳しく調べられます。
よくある疑問
Q: console.logはページに表示される？
A: いいえ。開発者ツールのConsoleタブにのみ表示されます。ページに表示するにはDOM操作（textContent等）を使います。
Q: console.log以外のメソッドは？
A: console.error()（赤いエラー表示）、console.warn()（黄色い警告）、console.table()（表形式で表示）などがあります。
Q: 開発者ツールの開き方は？
A: F12キー、またはMacならCmd+Option+Iで開けます。右クリック→「検証」でも開けます。
関連用語
📖 関連レッスン
レッスンを見る →