console.log() / error() / warn() / table()対応: ES5（ECMAScript 2009）

console.log(値);      // 一般的なメッセージ
console.error(値);    // エラーメッセージ
console.warn(値);     // 警告メッセージ
console.table(配列);  // テーブル形式で表示

// 基本的な出力
console.log("こんにちは"); // 『こんにちは』と出力されます。
console.log(42); // 『42』と出力されます。
console.log({ name: "太郎", age: 25 }); // オブジェクトが出力されます。

// 複数の値をカンマ区切りで出力します。
var x = 10;
console.log("xの値:", x); // 『xの値: 10』と出力されます。

// エラーと警告
console.error("データの取得に失敗しました");
console.warn("この関数は非推奨です");

// テーブル形式で表示します。
var users = [
	{ name: "太郎", age: 25 },
	{ name: "花子", age: 30 }
];
console.table(users);

// 処理時間の計測
console.time("ループ処理");
for (var i = 0; i < 100000; i++) {
	// 何らかの処理
}
console.timeEnd("ループ処理"); // 『ループ処理: 2.5ms』のように経過時間が出力されます。

// グループ化
console.group("ユーザー情報");
console.log("名前: 太郎");
console.log("年齢: 25");
console.groupEnd();

上記のコードを実行すると、ブラウザの開発者ツールのコンソールに以下のように出力されます。

"こんにちは"
42
{ name: "太郎", age: 25 }
"xの値:" 10
// console.error() は赤色の背景で表示
"データの取得に失敗しました"
// console.warn() は黄色の背景で表示
"この関数は非推奨です"
// console.table() はテーブル形式で表示
// console.time() / console.timeEnd()
"ループ処理: 2.5ms"

『console.log()』はJavaScriptの開発で最も頻繁に使用されるデバッグ用のメソッドです。変数の値や処理の流れを確認したい時に、コンソールへ手軽にメッセージを出力できます。

『console.error()』と『console.warn()』は色分けされて表示されるため、大量のログの中からエラーや警告を素早く見つけることが可能です。『console.table()』は配列やオブジェクトの内容をテーブル形式で整理して表示してくれるため、データ構造を把握したい場面で重宝します。

『console.log()』は開発中のデバッグ用です。本番環境にリリースする前に、不要な『console.log()』を削除することをおすすめします。大量のログ出力はパフォーマンスに影響を与えることがあり、また内部の情報が利用者に見えてしまう可能性もあります。