性能計測（console.time / console.timeEnd） — console.time('t'); console.timeEnd('t')
JavaScript には 処理時間を計測するための簡単な仕組みとして console.time / console.timeEnd があります。
初心者は「処理の前に console.time、終わったら console.timeEnd を書くと、かかった時間が表示される」と覚えると理解しやすいです。
基本のコード例
console.time("t"); // タイマー開始
for (let i = 0; i < 1000000; i++) {
// 何か重い処理
}
console.timeEnd("t"); // タイマー終了
出力例（ブラウザのコンソールや Node.js の標準出力に表示）:
t: 12.345ms
console.time(label)→labelという名前でタイマーを開始。console.timeEnd(label)→ 同じlabelのタイマーを終了し、経過時間を表示。
よく使うテンプレート集
関数の処理時間を測る
function heavyTask() {
console.time("heavy");
let sum = 0;
for (let i = 0; i < 1e6; i++) sum += i;
console.timeEnd("heavy");
return sum;
}
heavyTask();
// 出力例: heavy: 8.765ms
複数の処理を比較
console.time("loop1");
for (let i = 0; i < 1e6; i++) {}
console.timeEnd("loop1");
console.time("loop2");
Array.from({ length: 1e6 }).forEach(() => {});
console.timeEnd("loop2");
- どちらの処理が速いかを簡単に比較できる。
ネストした計測
console.time("outer");
for (let i = 0; i < 1e5; i++) {
if (i % 10000 === 0) {
console.time("inner");
// 部分的な処理
console.timeEnd("inner");
}
}
console.timeEnd("outer");
例題: API呼び出しの計測
async function fetchData() {
console.time("api");
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const data = await res.json();
console.timeEnd("api");
console.log("取得件数:", data.length);
}
fetchData();
// 出力例: api: 123.456ms
- 効果: ネットワーク処理にどれくらい時間がかかるかを確認できる。
実務でのコツ
- ラベルは必ず一致させる:
console.time("x")とconsole.timeEnd("x")のラベルが違うと計測できない。 - 複数同時に計測可能: ラベルを変えれば複数の処理を並行して測れる。
- 軽量な計測: 本格的な性能測定ツールより簡易だが、ちょっとした確認に便利。
- ブラウザ/Node.js 両方で使える: 開発環境を問わず利用可能。
ありがちなハマりポイントと対策
- ラベルのタイプミス:
console.time("task");
// ...
console.timeEnd("Task"); // → エラー（ラベルが違う）
→ 大文字小文字も区別されるので注意。
- 本格的な計測には不十分:
→ 簡易的な目安として使い、詳細な性能分析は専用ツール（Performance API や profiler）を使う。
練習問題（配列操作の速度比較）
const arr = Array.from({ length: 1e5 }, (_, i) => i);
console.time("for-loop");
let sum1 = 0;
for (let i = 0; i < arr.length; i++) sum1 += arr[i];
console.timeEnd("for-loop");
console.time("reduce");
const sum2 = arr.reduce((a, b) => a + b, 0);
console.timeEnd("reduce");
直感的な指針
console.time(label)→ 計測開始。console.timeEnd(label)→ 計測終了＆結果表示。- ラベルは必ず一致。
- ちょっとした性能比較や処理時間の確認に最適。
これを覚えれば「処理がどれくらい時間をかけているか」を簡単に測定でき、コードの改善ポイントを見つけやすくなります。