【JavaScript】console.logの3段活用で開発効率UP

2025.01.03

JavaScript開発において、console.logはデバッグや情報表示に欠かせないツールです。本記事では、console.logの基本的な使い方から、スタイリッシュな出力方法、そして構造化データの確認まで、3つの活用法を紹介します。

その１　基本ログ：デバッグの最初の一歩

console.logは、変数や関数の結果を確認する基本的な方法です。コードがどのように動作しているかを追跡するのに便利です。

例:

const userName = "Alice";
console.log("User Name:", userName); // User Name: Alice

ポイント:

複数の値をカンマで区切ることで、コンパクトに情報を表示可能。
エラーが発生している箇所を特定するための第一歩として役立つ。
console.error()やconsole.warn()を使うと強調できたりする

その２　フォーマットログ：スタイリッシュな出力

文字列にスタイルを適用して、ログを視覚的に整理できます。%cを使ってカスタマイズするのがコツです。

例:

console.log("%cSuccess!", "color: green; font-size: 16px; font-weight: bold;");
console.log("%cWarning!", "color: orange; font-size: 16px; font-weight: bold;");
console.log("%cError!", "color: red; font-size: 16px; font-weight: bold;");

以下、実行結果です。

テキストに色やフォントスタイルを加えることで、重要なメッセージを強調。
特に、成功・警告・エラーのログを視覚的に区別するのに便利。

その３　オブジェクトログ：構造化データの確認

オブジェクトや配列を出力するときは、console.logで構造化されたビューを得られます。console.tableを使うとさらに見やすくなります。

例:

const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 35 },
];

console.log("User List:", users); // 標準的なオブジェクト表示
console.table(users); // テーブル形式で表示

以下、console.table実行結果です。