【JavaScript】console.log・info・warn・errorの違いを解説!

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・info・warn・errorの違い(Google Chrome)
  • console.log()console.info()
    • 通常のログとして出力されます(Google Chromeでは違いなし)。
  • console.warn()
    • 黄色の警告メッセージとして表示され、警告アイコンが左側に付きます。
  • console.error()
    • 赤いエラーメッセージとして表示され、エラーアイコンが付きます。

ブラウザによってはconsole.info()に情報アイコンが表示されることがあります。たとえば「Firefox」では以下に示すようにconsole.info()に情報アイコンが表示されます。

console.log・info・warn・errorの違い(Firefox)

また、Google Chromeデベロッパーツールでは、コンソールのログをフィルタすることができます。例えば、エラーのみを表示するようにフィルタをかけると、console.log()console.warn()のメッセージは非表示になり、console.error()だけが表示されます。

フィルタなしの場合(すべてのログを表示)

console.log・info・warn・errorのフィルタ前

エラーのみを表示した場合

console.log・info・warn・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(): エラー(処理の失敗や例外)

これらのメソッドを適切に使い分けることで、デバッグがスムーズになり、問題の特定がしやすくなります。ぜひ、開発時に意識して活用してみてください!

お読み頂きありがとうございました。