導入: なぜ今、console.timeなのか
フロントエンド開発において、処理の遅延はUXに直結する深刻な課題です。特に複雑なデータ処理や重いレンダリングを行う際、「どこで時間がかかっているのか」を正確に把握することは最適化の第一歩です。デベロッパーツールでプロファイラを開くほどではないが、特定の関数の実行時間をざっくり測定したい。そんな時、標準APIであるConsole.timeを活用すれば、ブラウザのコンソールだけで手軽かつ正確に計測が可能です。
基礎知識: console.time とは
Console.timeは、JavaScriptの標準的なデバッグ用APIです。特定のラベルを指定してタイマーを開始し、Console.timeEndを呼び出すことで、開始から終了までの経過時間をミリ秒単位でコンソールに出力します。
類似のものにDateオブジェクトを使った計算（Date.now()の差分をとる等）がありますが、それよりもコードが簡潔で、ブラウザエンジンが最適化した計測値を取得できるため、より信頼性の高い数値が得られます。
実装/解決策
基本的な使い方は、測定したい処理を挟むように関数を配置するだけです。
1. console.time(‘ラベル名’) で計測開始。
2. 測定したいロジックを実行。
3. console.timeEnd(‘ラベル名’) で計測終了とログ出力。
もし、さらに細かい中間ポイントを知りたい場合は、console.timeLog(‘ラベル名’) を使用します。これにより、タイマーを止めずに現時点までの経過時間を確認できます。
サンプルプログラム
以下のコードは、大量のデータ処理にかかる時間を計測する実用的な例です。
// 計測開始：ラベルに「DataProcessing」を指定
console.time('DataProcessing');
const data = Array.from({ length: 1000000 }, (_, i) => i);
// 重い処理のシミュレーション
const filteredData = data.filter(item => item % 2 === 0);
// 中間地点の計測（タイマーは止まらない）
console.timeLog('DataProcessing', 'フィルタリング完了');
const mappedData = filteredData.map(item => item 2);
// 計測終了：開始からの合計時間を表示
console.timeEnd('DataProcessing');
応用・注意点
現場で活用する上で、以下の3点に注意してください。
1. ラベル名の重複を避ける: 同じスコープで同じラベル名を使うと、タイマーが上書きされて正確な値が取れなくなります。複雑なコンポーネント内では、コンポーネント名や一意なIDを含めるのが安全です。
2. 本番環境での削除: 開発効率を上げるためのツールですが、本番環境のログに残るのは好ましくありません。ビルドツール（WebpackやViteなど）のプラグインを使い、本番環境では自動で削除されるように設定するか、あるいはeslint-plugin-no-consoleで警告を出すルール設定を推奨します。
3. 非同期処理への対応: 非同期処理（Promise等）を計測する場合、処理が終わるまで待機する必要があります。単に処理を囲むだけでは期待した値にならないため、async/awaitを使って正確に終了タイミングを制御してください。
Console.timeは非常にシンプルですが、日々のパフォーマンス改善の積み重ねにおいて、最も手軽で強力な武器になります。まずは明日のデバッグから、積極的に取り入れてみてください。