不要な処理の削除 | パフォーマンス最適化の基本 | JavaScript 超完全入門 基本から発展までのすべて

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

不要な処理の削除とは？

JavaScriptでの不要な処理の削除とは、実行する必要のないコードや重複した処理を取り除き、アプリケーションのパフォーマンスや保守性を向上させることです。

不要な処理が多いと、処理速度の低下だけでなく、コードが読みにくくなり、バグの原因にもなります。そのため、機能を追加するだけでなく、不要になったコードを定期的に整理することも重要です。

不要な処理が発生するケース

不要な処理が発生しやすい例として、次のようなものがあります。

  • 重複したイベントリスナー：同じイベントが何度も登録されている。
  • 未使用の変数や関数：宣言されているが一度も使用されていない。
  • 冗長なループ：同じ配列を何度も繰り返し処理している。
  • 無駄なDOM操作：何度もDOMを書き換えて再描画が発生している。
  • 不要な計算：毎回同じ結果になる計算を繰り返している。

不要な処理の削除例

重複したイベントリスナーを防ぐ

同じイベントリスナーを何度も登録すると、同じ処理が繰り返し実行されてしまいます。

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

function handleClick() {
    console.log("クリックされました");
}

// 誤った例
button.addEventListener("click", handleClick);
button.addEventListener("click", handleClick);

この場合、クリックするたびに同じ処理が複数回実行されます。

重複登録を避けることが重要です。

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

function handleClick() {
    console.log("クリックされました");
}

button.removeEventListener("click", handleClick);
button.addEventListener("click", handleClick);

ただし、通常は最初から重複して登録しない設計にすることが最も重要です。removeEventListener()は同じ関数を再登録する場合などに利用します。

未使用の変数や関数の削除

使われていないコードは、保守性を下げる原因になります。

// 不要なコード
const unusedVar = "I am not used";

function unusedFunction() {
    console.log("Never called");
}

不要な変数や関数は削除しましょう。

現在ではESLintなどの静的解析ツールを利用すると、未使用の変数や関数を自動で検出できます。

冗長なループの削除

同じ配列に対して複数回ループするよりも、可能であれば1回にまとめた方が効率的です。

// 冗長な例
for (let i = 0; i < array.length; i++) {
    process(array[i]);
}

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

改善例

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

ループ回数を減らすことで、処理効率を向上できます。

無駄なDOM操作の削除

DOMの書き換えは比較的コストが高いため、できるだけ回数を減らすことが重要です。

// 複数回DOMを書き換える例
const element = document.getElementById("myElement");

element.style.color = "red";
element.style.backgroundColor = "blue";
element.style.fontSize = "20px";

まとめて設定する方法です。

const element = document.getElementById("myElement");

element.style.cssText =
    "color:red; background-color:blue; font-size:20px;";

なお、実際の開発では、スタイルをJavaScriptで直接変更するよりも、classList.add()やclassList.remove()でCSSクラスを切り替える方法が推奨されることが多くあります。

不要な計算を減らす

毎回同じ結果になる処理は、一度だけ計算して使い回すことで効率化できます。

// 毎回検索している例
for (const user of users) {
    const admin = users.find(user => user.role === "admin");
    console.log(admin.name);
}

改善例

const admin = users.find(user => user.role === "admin");

for (const user of users) {
    console.log(admin.name);
}

検索結果を使い回すことで、不要な計算を減らせます。

不要な処理削除のチェックリスト

不要な処理 改善方法
重複したイベントリスナー 同じイベントを重複登録しない。
未使用の変数・関数 不要なコードを削除する。ESLintの利用も有効。
冗長なループ 可能なら1回のループにまとめる。
無駄なDOM操作 DOM更新回数を減らし、可能ならCSSクラスを切り替える。
不要な計算 同じ計算結果を繰り返し求めない。

初心者が意識したいポイント

  • 最初から過度な最適化を行う必要はありません。
  • まずは読みやすいコードを書くことを優先しましょう。
  • 本当に遅い部分が見つかった場合に、その箇所だけを最適化するのが基本です。
  • Chrome DevToolsなどのプロファイラを利用すると、どこに時間がかかっているか確認できます。

まとめ

  • 不要な処理を削除すると、実行速度や保守性が向上する。
  • 重複したイベントリスナーや未使用コードは積極的に整理する。
  • ループや計算の重複を減らすことで効率化できる。
  • DOM操作はできるだけまとめて行い、必要に応じてCSSクラスを利用する。
  • 最適化は読みやすさとのバランスを考え、本当に必要な箇所に対して行うことが重要である。

スポンサーリンク