便利なconsole APIの使い方

Web開発では、consoleオブジェクトはデバッグや情報の出力に欠かせないツールです。
バグの特定やパフォーマンスの測定など、多くの場面でconsole APIが活躍します。
この記事では、consoleオブジェクトの基本から、デバッグ時に特に役立つAPI群を紹介します。

console.log

最も一般的に使われるのがconsole.logです。
これは、デバッグ情報をコンソールに出力するために使用されます。

console.log("これはログのメッセージです");
// コンソールに "これはログのメッセージです" と出力されます。

このAPIは、開発中に変数の値を確認したり、コードの実行フローを追ったりするのに非常に役立ちます。
console.logはデバッグの基本として広く知られており、そのシンプルさと便利さから、ほかのconsole機能を使ったことがない開発者も多いのではないでしょうか。
個人的には、ほぼこれで足りるケースが多いので普段使いはこれ１本です。

ただ、consoleはlogだけではなく、さまざまな便利なAPIを提供しています。

console.time / console.timeEnd

パフォーマンス測定にはconsole.timeとconsole.timeEndが便利です。
これらを使ってコードの実行にかかる時間を簡単に計測できます。

const doTask = () => {
  console.time("タスク実行時間");
  // ここに実行したい処理を記述します。
  console.timeEnd("タスク実行時間");
};

doTask(); // "タスク実行時間: Xms" (Xは実際のミリ秒数)

実行時間はラベルによって管理されるので
関数の外側や異なるスコープ間でも時間計測を行うことができます。

// グローバルスコープでタイマーを開始
console.time("全体のタスク時間");

const doTask = () => {
  // この関数の中で別のタイマーを開始
  console.time("個別タスク時間");
  
  // 何らかのタスクを実行
  for (let i = 0; i < 10000; i++) {
    // タスク処理
  }
  
  // 個別タスクの終了時間を記録
  console.timeEnd("個別タスク時間");
};

doTask();

const anotherTask = () => {
  console.time("別のタスク時間");
  
  // 単純なタスクを実行
  for (let i = 0; i < 25000; i++) {
    // タスク処理
  }
  
  console.timeEnd("別のタスク時間");
};

anotherTask();

// 別の関数やスコープ外でタスクが完了したことを記録
console.timeEnd("全体のタスク時間");
// 個別タスク時間: 15.635ms
// 別のタスク時間: 32.245ms
// 全体のタスク時間: 47.880ms

console.count / console.countReset

ある関数がページのライフサイクル内で何度呼び出されたか
ユーザーによるクリックが何回起こったかなど、イベントの発生回数を知りたい時にconsole.countは非常に便利です。
カウンターは指定したラベルごとに管理されます。

const showCount = () => console.count("関数が呼ばれた回数");
showCount(); // "関数が呼ばれた回数: 1"
showCount(); // "関数が呼ばれた回数: 2"

リセットするにはconsole.countReset(label)を使用します。

showCount(); // "関数が呼ばれた回数: 1"
showCount(); // "関数が呼ばれた回数: 2"
console.countReset("関数が呼ばれた回数");
showCount(); // "関数が呼ばれた回数: 1" (カウントがリセットされた)

console.trace

コードの実行パスを追跡するのに非常に便利です。
特に複雑なイベントのフローや非同期処理のデバッグにおいて
console.traceはスタックトレースを提供してくれるため、問題の箇所を素早く特定することができます。

1 const traceExample = () => {
2  console.trace("トレース位置: traceExample");
3 }
4
5 const runTrace = () => {
6  traceExample();
7 }
8
9 runTrace();
// トレース位置: traceExample
//     @ traceExample (script.js:2)
//     @ runTrace (script.js:6)
//     @ script.js:9

トレースを通して、関数がどのようにして呼び出されたか
どのイベントやコールバックが連鎖的に作用しているかを可視化できます。
豆知識ですが、＠はat（の）と同じ意味です。

というわけで

本記事では、consoleオブジェクトの基本的な使用法から、デバッグプロセスを向上させるいくつかのAPIについて紹介しました。
console.logだけでなく、今回紹介したAPIは開発者がコードの挙動を正確に理解し、効率的に問題を解決するための強力なツールです。

これらのAPIは、それぞれが特定のデバッグシナリオでのニーズに応えるよう設計されており、その結果として開発者の生産性を大きく向上させることができます。
これらを活用しない手はないでしょう。

ただし、console APIは開発段階、特にデバッグ時に使用することを想定しています。
そのため、原則として本番環境のコードには含めないようにしてください。
例外的な状況（本番アカウントでしか再現しない不具合のトラブルシューティングなど）でのみ慎重に利用する必要があります。
パフォーマンスの低下を避けるためにも、プロダクションビルド時にはこれらのAPI呼び出しを除去することを忘れないでください。

consoleについて、さらに深い理解や、ほかの便利なAPIについて学ぶには、 MDN Web Docsなどのリソースを参照することをおすすめします。