デバッグ

コンソール出力

console.log()：プログラムの中身をのぞき見る魔法

コンソール＝開発者の「聴診器」

Webサイトを作っていて「あれ？ボタンを押しても動かない」「計算結果がおかしい」という壁にぶつかった時、真っ先に頼るのがコンソールです。プログラムの内部状態を可視化し、目に見えないエラーやデータの流れを診断するための必須ツールです。

最も頻繁に使うメソッドです。文字列、数値、変数、オブジェクトなど、あらゆるデータを表示できます。

JavaScript

const user = "Tanaka";
console.log("Welcome,", user); // カンマで区切るとスペースが入る
console.log(`Hello ${user}`);  // テンプレートリテラルも便利

ただ表示するだけでなく、メッセージの重要度に応じてメソッドを使い分けると、ログが見やすくなります。

エラーメッセージとして赤色で表示されます。プログラムが予期せぬ状態で止まった時などに使います。

if (age < 0) {
    console.error("年齢に負の数は設定できません！");
}

警告メッセージとして黄色で表示されます。「エラーではないが注意が必要」な場合（例：非推奨の機能を使っている、データが空など）に使います。

console.warn("この画像はサイズが大きすぎます。圧縮を推奨します。");

配列やオブジェクトのデータを、見やすい表形式で表示します。リストデータの確認に革命的に便利です。

const fruits = [
    { name: "Apple", price: 100 },
    { name: "Banana", price: 150 },
    { name: "Orange", price: 200 }
];
console.table(fruits);

関連するログを折りたたみ可能なグループにまとめます。ループ処理のログなど、大量に出力される情報を整理するのに役立ちます。

console.group("ユーザー詳細");
console.log("名前: 佐藤");
console.log("年齢: 30");
console.groupEnd();

プログラムの実行にかかった時間をミリ秒単位で計測します。パフォーマンス改善（高速化）を行いたい時に重宝します。

console.time("Loop処理");
for (let i = 0; i < 10000; i++) {
    // 重い処理...
}
console.timeEnd("Loop処理"); // "Loop処理: 15.23ms" のように表示される

`console.log` は開発中は便利ですが、世界中に公開する本番環境のコードには残さないのがマナーです。機密情報（パスワードやAPIキーなど）が表示されてしまうリスクがあるほか、サイトの表示速度をわずかに低下させる原因にもなります。

コンソールは単なる文字出力ではありません。表形式で見たり、エラーを目立たせたり、時間を計ったりと、多機能な診断ツールです。これらを使いこなせば、バグ修正の時間は劇的に短縮されます。