コンソール
初級読み方：コンソール｜英語：Console
開発者ツール内の画面で、console.log() で文字を表示できるよ。いつ使う？ 変数の中身を確認したい、処理がどこまで進んだか確認したい、エラーの原因を調べたいときに使うよ。デバッグの基本ツールだよ。間違いやすいポイント: console.logはブラウザの画面には表示されないよ。F12で開発者ツールを開いてConsoleタブを見よう。本番公開前にconsole.logは削除しよう。
やさしい説明
コンソールとは、ブラウザの開発者ツールにあるメッセージ表示エリアです。console.log() で変数の値やメッセージを表示できます。
プログラムの「独り言」のようなものです。「ここまで動いてるよ」「この変数の値は○○だよ」と確認できます。デバッグ（バグ探し）に欠かせません。
ブラウザで F12 キーを押して「Console」タブを開くと見られます。ユーザーには見えないので、開発中に自由に使えます。
具体例・使い方
// メッセージを表示
console.log("ここまで動いた！");
// 変数の値を確認
const score = 85;
console.log("スコア:", score); // スコア: 85
// オブジェクトの中身を確認
console.log({ name: "太郎", age: 15 });
// エラーメッセージ（赤く表示される）
console.error("エラーが発生しました");いつ使う？
「変数の値が想定通りか確認したい」「処理がどこまで進んだか知りたい」「エラーの原因を探したい」ときに使います。開発中は常に使うツールです。
間違いやすいポイント
❌ 本番環境にconsole.logを残す
開発中は便利ですが、公開するサイトに残すとユーザーの開発者ツールに表示されてしまいます。公開前に削除するか、ビルドツールで自動削除しましょう。
よくある疑問
Q: console.logはページに表示される？
A: いいえ。開発者ツールのConsoleタブにのみ表示されます。ページに表示するにはDOM操作（textContent等）を使います。
Q: console.log以外のメソッドは？
A: console.error()（赤いエラー表示）、console.warn()（黄色い警告）、console.table()（表形式で表示）などがあります。
Q: 開発者ツールの開き方は？
A: F12キー、またはMacならCmd+Option+Iで開けます。右クリック→「検証」でも開けます。
関連用語
📖 関連レッスン
レッスンを見る →