コードの効率化 | パフォーマンス最適化の基本 | JavaScript 超完全入門 基本から発展までのすべて

2024.09.21
スポンサーリンク
スポンサーリンク
amazon
スマイルSALE
--:--:--
～
ad. 価格範囲を指定して商品を探せます

コードの効率化とは？

コードの効率化とは、JavaScriptのプログラムをより速く、より少ないメモリやCPUリソースで実行できるよう改善することです。

効率化は、単に処理速度を速くするだけではありません。読みやすく保守しやすいコードを書くことも重要です。近年のJavaScriptエンジンは非常に高性能であるため、小さな最適化よりも、アルゴリズムや不要なDOM操作の見直しの方が大きな効果を得られることが多くあります。

効率化の基本原則

JavaScriptのコードを効率化する際は、次のような点を意識すると効果的です。

  • 不要な計算を避ける: 同じ計算を何度も繰り返さないようにします。
  • DOM操作を減らす: DOM操作は比較的コストが高いため、まとめて行います。
  • メモリを効率的に使う: 不要なオブジェクトや配列を作り過ぎないようにします。
  • 非同期処理を適切に利用する: 重い処理や通信では非同期処理を利用し、画面の応答性を維持します。
  • 読みやすさを優先する: ごくわずかな高速化のために可読性を大きく犠牲にしないことも重要です。

ループの最適化

ループは繰り返し実行されるため、処理内容によってはパフォーマンスに影響します。

ループの効率化例

// 従来からよく使われる書き方
const len = array.length;

for (let i = 0; i < len; i++) {
    console.log(array[i]);
}

以前は、array.lengthを毎回取得するよりも、一度変数へ保存する方が高速と言われていました。

現在の主要ブラウザではJavaScriptエンジンの最適化が進んでおり、この違いはほとんど気にしなくてもよい場合が多くあります。

そのため、まずは読みやすいコードを書くことを優先し、本当に処理速度が問題になる場合だけ最適化を検討するのがおすすめです。

for...ofも活用できる

単純に配列を順番に処理するだけなら、for...ofを使うと読みやすくなります。

for (const item of array) {
    console.log(item);
}

DOM操作の効率化

ブラウザでは、DOM操作は比較的コストの高い処理です。要素を大量に追加・削除・変更する場合は、一括で処理すると効率が良くなります。

DOM操作の効率化例

// 効率の悪い例
for (let i = 0; i < 1000; i++) {
    const element = document.createElement("div");

    document.body.appendChild(element);
}

// 効率化した例
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
    const element = document.createElement("div");

    fragment.appendChild(element);
}

document.body.appendChild(fragment);

この例では、DocumentFragmentへまとめて追加してから一度だけDOMへ反映しています。これにより、ブラウザの再描画回数を減らせる場合があります。

イベントリスナーの適切な管理

イベントリスナーを大量に登録すると、メモリ消費や処理負荷が増えることがあります。

イベントリスナーの管理例

const button = document.getElementById("button");

button.addEventListener("click", handleClick);

同じイベントリスナーを重複して登録しないよう注意しましょう。

イベント委譲を活用する

同じ種類の要素が大量にある場合は、親要素にイベントを設定するイベント委譲も効果的です。

list.addEventListener("click", (event) => {
    if (event.target.matches("li")) {
        console.log(event.target.textContent);
    }
});

これにより、多数の要素それぞれへイベントを登録する必要がなくなります。

非同期処理の最適化

時間のかかる処理では、非同期処理を適切に利用することで、画面の操作性を維持できます。

非同期処理の例

async function fetchData() {
    const response = await fetch("https://example.com/data");
    const data = await response.json();

    console.log(data);
}

asyncとawaitを使うことで、Promiseチェーンよりも読みやすいコードを書けます。

なお、awaitは処理を高速化するためのものではなく、非同期処理を分かりやすく記述するための構文です。

キャッシュの利用

同じ計算結果を何度も利用する場合は、結果を保存して再利用することで処理を減らせます。

キャッシュを使った最適化例

const cache = {};

function calculateExpensiveOperation(num) {
    if (!(num in cache)) {
        cache[num] = num * num;
    }

    return cache[num];
}

for (let i = 0; i < 100; i++) {
    console.log(calculateExpensiveOperation(10));
}

この例では、一度計算した結果を保存しているため、同じ値に対する計算を繰り返す必要がありません。

不要な処理を減らす

効率化では、不要な処理を実行しないことも重要です。

  • 使用していない変数や関数を削除する。
  • 不要なライブラリを読み込まない。
  • 同じDOM検索を何度も行わない。
  • 不要な再描画や再計算を減らす。

処理を速くするだけでなく、「処理そのものを減らす」という考え方も大切です。

パフォーマンスを測定する

効率化では、体感だけで判断するのではなく、実際に測定することが重要です。

  • ブラウザの開発者ツール（Performanceタブ）を利用する。
  • console.time()とconsole.timeEnd()で処理時間を測定する。
  • Lighthouseでページ全体のパフォーマンスを確認する。
console.time("処理");

for (let i = 0; i < 1000000; i++) {
    Math.sqrt(i);
}

console.timeEnd("処理");

実際に測定することで、本当に改善効果があるのか確認できます。

パフォーマンス最適化のチェックリスト

最適化のポイント 具体例
不要な計算を減らす 同じ処理を何度も実行しない。
DOM操作をまとめる DocumentFragmentなどを利用する。
イベントを適切に管理する イベント委譲や不要なリスナー削除を行う。
非同期処理を利用する async・awaitを活用する。
キャッシュを活用する 同じ計算結果を再利用する。
測定して改善する Performanceタブやconsole.time()で確認する。

まとめ

  • コードの効率化は、処理速度だけでなく保守性も意識することが重要です。
  • ループよりも、アルゴリズムやDOM操作の改善の方が効果が大きいことが多くあります。
  • DOM操作はまとめて実行すると効率的です。
  • イベントリスナーは重複登録を避け、イベント委譲も活用できます。
  • asyncとawaitは非同期処理を分かりやすく記述できます。
  • キャッシュを利用すると、同じ計算を繰り返さずに済みます。
  • 最適化を行う際は、実際に測定して効果を確認することが大切です。

スポンサーリンク