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()』で開始したグループを終了します。 |
サンプルコード
sample_consoleLog.js
// 基本的な出力
console.log("こんにちは"); // 『こんにちは』と出力されます。
console.log(42); // 『42』と出力されます。
console.log({ name: "八神庵", age: 20 }); // オブジェクトが出力されます。
// 複数の値をカンマ区切りで出力します。
var x = 10;
console.log("xの値:", x); // 『xの値: 10』と出力されます。
// エラーと警告
console.error("データの取得に失敗しました");
console.warn("この関数は非推奨です");
// テーブル形式で表示します。
var users = [
{ name: "八神庵", age: 20 },
{ name: "草薙京", age: 20 }
];
console.table(users);
// 処理時間の計測
console.time("ループ処理");
for (var i = 0; i < 100000; i++) {
// 何らかの処理
}
console.timeEnd("ループ処理"); // 『ループ処理: 2.5ms』のように経過時間が出力されます。
// グループ化
console.group("ユーザー情報");
console.log("名前: 八神庵");
console.log("年齢: 20");
console.groupEnd();
こんにちは
42
{ name: '八神庵', age: 20 }
xの値: 10
データの取得に失敗しました
この関数は非推奨です
┌─────────┬────────┬─────┐
│ (index) │ name │ age │
├─────────┼────────┼─────┤
│ 0 │ '八神庵' │ 20 │
│ 1 │ '草薙京' │ 20 │
└─────────┴────────┴─────┘
ループ処理: 2.5ms
ユーザー情報
名前: 八神庵
年齢: 20
概要
『console.log()』はJavaScriptの開発で最も頻繁に使用されるデバッグ用のメソッドです。変数の値や処理の流れを確認したい時に、コンソールへ手軽にメッセージを出力できます。
『console.error()』と『console.warn()』は色分けされて表示されるため、大量のログの中からエラーや警告を素早く見つけることが可能です。『console.table()』は配列やオブジェクトの内容をテーブル形式で整理して表示してくれるため、データ構造を把握したい場面で重宝します。
『console.log()』は開発中のデバッグ用です。本番環境にリリースする前に、不要な『console.log()』を削除することをおすすめします。大量のログ出力はパフォーマンスに影響を与えることがあり、また内部の情報が利用者に見えてしまう可能性もあります。
対応ブラウザ
デスクトップ
3.5 以前 ×
2 以前 ×
7 以前 ×
10 以前 ×モバイル
Android Browser
37 以降 ○
4 以前 ×
Chrome Android
36 以降 ○
17 以前 ×
Firefox Android
79 以降 ○
3 以前 ×記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。