JavaScript

JavaScriptのconsoleの使い方を徹底解説！開発が10倍楽になるデバッグ方法

はじめに

JavaScriptを学び始めるとよく目にする「console.log()」。
でも、こんな疑問を持っていませんか？

「console.log()って何に使うの？」
「エラーを調べるときにどう活用すればいい？」
「他にも便利なconsoleの使い方ってあるの？」

この記事では、初心者でも理解できるように、JavaScriptのconsoleの使い方を徹底解説します！
これを読めば、デバッグ（エラーの確認・修正）がぐっと楽になります💪

JavaScriptの「console」とは？

🔹 「console」はブラウザの開発者ツールのこと

「console（コンソール）」とは、JavaScriptの動作状況やエラー情報を表示するツールのことです。

通常、Webページ上では見えませんが、
ブラウザの開発者ツール（DevTools）を開くことで確認できます。

🔸 開発者ツールの開き方（ショートカット）

ブラウザ開く方法
Google ChromeF12 または Ctrl + Shift + I（Windows） / Cmd + Option + I（Mac）
FirefoxCtrl + Shift + K
Safari開発メニュー → コンソールを表示

基本中の基本：console.log()の使い方

最もよく使うのが console.log()。
JavaScriptで変数の中身を確認したり、処理が実行されているかをチェックできます。

💡 使い方の例

let name = "Taro";
console.log(name);

🖥 出力結果（コンソール上）

Taro

✅ よくある使い方

console.log("スクリプトが実行されました！");
console.log("合計:", 10 + 20);
console.log("配列:", [1, 2, 3]);
console.log("オブジェクト:", { name: "Taro", age: 25 });

👉 文字列・数値・配列・オブジェクトなど、どんなデータでも確認可能です！

よく使うconsoleメソッド一覧（便利まとめ）

console.log()以外にも、実はたくさんのメソッドがあります👇

メソッド内容使用例
console.log()一般的なログ出力console.log("実行");
console.warn()警告を黄色で表示console.warn("注意: 値が未設定です");
console.error()エラーを赤文字で表示console.error("エラー発生！");
console.info()情報を青文字で表示console.info("読み込み完了");
console.table()配列やオブジェクトを表形式で表示console.table(users);
console.clear()コンソールを一括でクリアconsole.clear();
console.group() / console.groupEnd()グループ化して整理console.group("User Info");

console.table()の活用例（便利すぎる）

配列やオブジェクトを確認するときに便利なのが console.table()！

💡 例：

const users = [
  { name: "Taro", age: 25 },
  { name: "Hanako", age: 22 },
  { name: "Ken", age: 30 },
];

console.table(users);

🖥 コンソール出力：

(index)nameage
0Taro25
1Hanako22
2Ken30

👉 こんな感じで配列データが見やすい表形式で出力されます！

デバッグに使えるconsoleのテクニック

🧩 1. 条件付きログ出力

let score = 85;
if (score > 80) {
  console.log("合格ラインを超えています！");
}

→ 条件を満たしたときだけ出力できます。

🧩 2. ログをグループ化する

console.group("ユーザー情報");
console.log("名前: Taro");
console.log("年齢: 25");
console.groupEnd();

→ ログをまとめて見やすく整理できます。

🧩 3. console.time()で処理速度を測定

console.time("処理時間");

for (let i = 0; i < 1000000; i++) {
  Math.sqrt(i);
}

console.timeEnd("処理時間");

🕒 出力結果：

処理時間: 12.34ms

→ 処理の実行速度を測るのに便利！

よくある初心者の疑問

❓ Q1. alert()との違いは？

alert()はブラウザ上にポップアップを出す関数ですが、
console.log()は開発者だけが確認する用です。

👉 学習中の確認には console.log() を使うのがベスト！

❓ Q2. コンソールに「undefined」と出るのはなぜ？

これは「関数や式が値を返していない」ことを意味します。
エラーではないので、基本的には気にしなくてOKです。

初心者が覚えておくべきconsole活用のコツ

✅ デバッグ＝console.log()を活用すること！
✅ consoleを使って「どの部分が実行されているか」を確認する
✅ エラーが出たら赤文字のログをよく読む（原因が書かれている）
✅ 配列・オブジェクトの中身は console.table() で可視化

まとめ：consoleを使いこなせば開発が10倍スムーズに！

JavaScriptを学ぶ上で、consoleは最強の相棒です。
「動かない！」「何が間違ってるの？」というときこそ、
まず console.log() で確認しましょう。

💡 今日のまとめ

  • console はデバッグのためのツール
  • console.log() で変数や処理を確認
  • console.table() や console.time() など便利な機能も多数
  • 開発者ツールを使えば、エラーの特定が超スムーズ！

-JavaScript