JavaScriptのデバッグにconsole.log()をよく使いますが、コンソールにログとして文字列を出力するメソッドには、console.info()、console.warn()、console.error()もあります。
これらメソッドの違いをご存じでしょうか？
この記事ではそれぞれの違いと役割などをわかりやすく解説します。
console.log・info・warn・errorの違い
JavaScriptのconsoleオブジェクトには、コンソールにログを出力するためのメソッドがいくつか用意されています。その中でもよく使われるのが次の4つのメソッドです。
| メソッド | 役割 | 見た目（ブラウザDevTools） |
console.log() | デバッグや通常のログ出力に使用 | 普通のメッセージ |
console.info() | ユーザーに情報を伝えるために使用 | console.log()とほぼ同じ（ブラウザによってはアイコン付き） |
console.warn() | 注意喚起（非推奨の API の使用など） | 黄色の警告メッセージと 警告アイコンが表示される |
console.error() | エラー（処理の失敗や例外） | 赤いエラーメッセージと エラーアイコンが表示される |
それぞれのメソッドを「Google Chromeデベロッパーツール」で実行した場合、以下のようになります。
console.log()・console.info()- 通常のログとして出力されます（Google Chromeでは違いなし）。
console.warn()- 黄色の警告メッセージとして表示され、警告アイコンが左側に付きます。
console.error()- 赤いエラーメッセージとして表示され、エラーアイコンが付きます。
ブラウザによってはconsole.info()に情報アイコンが表示されることがあります。たとえば「Firefox」では以下に示すようにconsole.info()に情報アイコンが表示されます。
また、Google Chromeデベロッパーツールでは、コンソールのログをフィルタすることができます。例えば、エラーのみを表示するようにフィルタをかけると、console.log()やconsole.warn()のメッセージは非表示になり、console.error()だけが表示されます。
フィルタなしの場合（すべてのログを表示）
エラーのみを表示した場合
このように、適切なメソッドを使い分けることで、コンソールのログが整理され、デバッグやエラーの特定がしやすくなります。
console.log・info・warn・errorの使い分けの例
例えば、APIを呼び出してデータを取得するコードがあったとします。
async function fetchData() {
console.info('データ取得を開始します...');
try {
const response = await fetch('https://example.com/api/1');
if (!response.ok) {
throw new Error('ネットワークエラー: ' + response.status);
}
const data = await response.json();
console.log('データ取得成功！', data);
} catch (error) {
console.error('データの取得に失敗しました！', error);
}
console.warn('このAPIは今後非推奨になります。');
}
fetchData();
console.log()→「データ取得成功！」console.info()→「データ取得を開始します...」console.warn()→「このAPIは今後非推奨になります。」（黄色の警告メッセージ）console.error()→「データの取得に失敗しました！」（赤色のエラーメッセージ）
このように、適切に使い分けるとログが整理され、わかりやすくなります。
本記事のまとめ
この記事ではconsole.log()、console.info()、console.warn()、console.error()の違いについて説明しました。
console.log(): デバッグや通常のログ出力に使用console.info(): ユーザーに情報を伝えるために使用console.warn(): 注意喚起（非推奨の API の使用など）console.error(): エラー（処理の失敗や例外）
これらのメソッドを適切に使い分けることで、デバッグがスムーズになり、問題の特定がしやすくなります。ぜひ、開発時に意識して活用してみてください！
お読み頂きありがとうございました。