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

ブラウザの開発者ツールのコンソールにメッセージやデータを出力します。デバッグ作業で最もよく使われるメソッドです。

構文

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

メソッド一覧

メソッド	概要
console.log()	一般的なメッセージを出力します。文字列、数値、オブジェクト、配列など、あらゆる値を出力できます。カンマ区切りで複数の値を同時に出力することも可能です。
console.error()	エラーメッセージを赤色で出力します。スタックトレースも表示されるため、エラーの発生箇所を特定しやすくなります。
console.warn()	警告メッセージを黄色で出力します。エラーではないが注意が必要な場合に使用します。
console.table()	配列やオブジェクトをテーブル形式で見やすく表示します。
console.time("ラベル")	タイマーを開始します。処理にかかる時間を計測する際に使用します。
console.timeEnd("ラベル")	『console.time()』で開始したタイマーを停止し、経過時間を出力します。
console.group("ラベル")	コンソールの出力をグループ化します。ネストしたログの整理に便利です。
console.groupEnd()	『console.group()』で開始したグループを終了します。

サンプルコード

// 基本的な出力
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();

概要

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

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

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