1. 導入：なぜconsole.timeLogが重要なのか
Web開発をしていると、「この処理、どれくらい時間がかかっているんだろう？」と気になったことはありませんか？通常、処理時間を測るために開始と終了でDateオブジェクトを使って引き算をすることが多いですが、コードが煩雑になりがちです。
今回紹介するconsole.timeLogは、計測を開始してからその行に到達するまでの経過時間を、一行でスマートに出力できる便利なAPIです。デバッグ時のパフォーマンス計測を格段に効率化してくれます。
2. 基礎知識：timeシリーズの仕組み
console.timeLogを理解するには、セットで使われる3つのメソッドを知る必要があります。
・console.time(label)：計測タイマーを開始します。
・console.timeLog(label)：タイマーを開始してからの経過時間をコンソールに表示します。
・console.timeEnd(label)：タイマーを終了し、最終的な経過時間を表示します。
ここで重要なのは、すべてに「label（ラベル）」をつけることです。同じ名前のラベルを指定することで、プログラム内のどこからでもそのタイマーを呼び出すことができます。
3. 実装・解決策
使い方は非常にシンプルです。まず計測したい処理の冒頭でconsole.timeを呼び出し、計測したい地点でconsole.timeLogを差し込むだけです。これにより、処理を中断させずに「途中経過」を追いかけることが可能になります。
4. サンプルプログラム
以下のコードをブラウザのコンソール（F12キー）に貼り付けて実行してみてください。
// 1. タイマーを開始（ラベル名は任意）
console.time("データ処理タイマー");
// 重い処理を想定した待機時間
setTimeout(() => {
// 2. 途中経過を出力
console.timeLog("データ処理タイマー", "：データ取得完了時点");
}, 1000);
setTimeout(() => {
// 3. 別の途中経過を出力
console.timeLog("データ処理タイマー", "：データ整形完了時点");
// 4. タイマーを終了
console.timeEnd("データ処理タイマー");
}, 2000);
5. 応用・注意点
現場で使う際に注意すべきポイントが2つあります。
一つ目は「ラベルの一致」です。timeとtimeLogでラベル名が異なると、計測が正しく行われません。大規模なアプリケーションでは、ラベル名を定数として管理することをおすすめします。
二つ目は「本番環境への残存」です。console系メソッドはデバッグ用です。開発が終わったら不要な計測コードは削除するか、本番環境では無効化するような仕組み（環境変数による制御など）を導入しましょう。
これらを活用して、皆さんのデバッグ作業をより快適なものにしてくださいね！