0Pricing
JavaScript Academy · レッスン

プロファイリング入門(Node/DevTools) — 小さな計測習慣

小さな手順でプロファイリングします。console.time/timeEndと簡単なタイマーで計測し、負荷の高いコードを見つけ、一つだけ変更して再計測します。

「プロファイリング入門(Node/DevTools) — 小さな計測習慣」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

プロファイリングが必要な理由

目標: 計測 → 変更 → 再計測を行います。

  • 簡単な時間計測には console.time/timeEnd を使います
  • 手動計測には小さな now() ヘルパーを使います
  • ホットコードだけに集中します
  • 一度に1つだけ変更します
プロファイリング入門(Node/DevTools) — 小さな計測習慣 — イラスト1

console.time の例

console.time は、ラベル付けしたブロックにかかった時間を出力します。最初の一歩として最適です。

// Measure a small loop with console.time/timeEnd
console.time("sum");
let s = 0;
for (let i = 0; i < 100000; i = i + 1) {
  s = s + i;
}
console.timeEnd("sum");
console.log("sum value:", s);
プロファイリング入門(Node/DevTools) — 小さな計測習慣 — イラスト2

手動計測ヘルパー

手動計測を使うと、任意の関数を囲んで、同じ入力での実行結果を比較できます。

// A tiny now() helper that works in many runtimes
const now = (typeof performance !== "undefined" && performance.now)
  ? function () { return performance.now(); }
  : function () { return Date.now(); };

// Time a function manually
function timeFn(label, fn) {
  const t1 = now();
  const out = fn();
  const t2 = now();
  console.log(label + " ms:", (t2 - t1));
  return out;
}

timeFn("small work", function () {
  let x = 0;
  for (let i = 0; i < 50000; i = i + 1) { x = x + i; }
  return x;
});
プロファイリング入門(Node/DevTools) — 小さな計測習慣 — イラスト3

ホットコードを見つける

呼び出し回数と時間を記録して、アプリがどこで処理時間を使っているかを把握します。最も頻繁に実行される関数から最適化してください。

// Count calls and total time to find hot spots
const metrics = { calls: 0, totalMs: 0 };

function hotWork(n) {
  const t1 = now();
  let sum = 0;
  for (let i = 0; i < n; i = i + 1) {
    sum = sum + (i % 3);
  }
  const t2 = now();
  metrics.calls = metrics.calls + 1;
  metrics.totalMs = metrics.totalMs + (t2 - t1);
  return sum;
}

// Simulate usage
for (let k = 0; k < 5; k = k + 1) {
  hotWork(80000);
}
console.log("calls:", metrics.calls, "avg ms:", metrics.totalMs / metrics.calls);
プロファイリング入門(Node/DevTools) — 小さな計測習慣 — イラスト4

変更前と変更後の計測

変更の前後で計測します。同じ入力を使い、数値だけを比較してください。

// Compare two approaches with the same input
const hay = [];
for (let i = 0; i < 2000; i = i + 1) { hay.push(String(i)); }

const needles = [];
for (let i = 0; i < 1000; i = i + 1) { needles.push(String(i * 2)); }

function slowIncludes() {
  let count = 0;
  for (const n of needles) {
    if (hay.includes(n)) { count = count + 1; }
  }
  return count;
}

function fastSet() {
  const set = new Set(hay);
  let count = 0;
  for (const n of needles) {
    if (set.has(n)) { count = count + 1; }
  }
  return count;
}

const c1 = timeFn("includes run", slowIncludes);
const c2 = timeFn("set.has run", fastSet);
console.log("counts:", c1, c2);
プロファイリング入門(Node/DevTools) — 小さな計測習慣 — イラスト5

よい計測習慣

ヒント:

  • 実行間で同じ入力を使います。
  • 一度ウォームアップしてから計測します。
  • 計測中はログを減らします。
  • 1つだけ変更して、再度計測します。
  • DevTools/Node には記録ツールがあります。まずはシンプルな console.time から始めます。
プロファイリング入門(Node/DevTools) — 小さな計測習慣 — イラスト6

console.time の基本クイズ

簡単な確認: 簡単な時間計測ツールです。

プロファイリング入門(Node/DevTools) — 小さな計測習慣 — イラスト7

まとめ

まとめ: console.time と小さな now() ヘルパーから始めます。ホットコードを見つけ、簡単な変更を行い、同じ入力で再計測します。

プロファイリング入門(Node/DevTools) — 小さな計測習慣 — イラスト8

よくある質問

「プロファイリング入門(Node/DevTools) — 小さな計測習慣」レッスンは無料ですか?

はい。「プロファイリング入門(Node/DevTools) — 小さな計測習慣」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「プロファイリング入門(Node/DevTools) — 小さな計測習慣」で何を学びますか?

小さな手順でプロファイリングします。console.time/timeEndと簡単なタイマーで計測し、負荷の高いコードを見つけ、一つだけ変更して再計測します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。

「プロファイリング入門(Node/DevTools) — 小さな計測習慣」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか?

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Big-Oの基礎、ホットパスとコールドパス(初心者向けの改善)
  2. メモリリークを避ける — クロージャ、タイマー、参照
  3. プロファイリング入門(Node/DevTools) — 小さな計測習慣
← JavaScript Academyに戻る