JavaScriptのパフォーマンス：初心者向けのコード最適化ガイド

こんにちは、JavaScript開発者志望の方々！JavaScriptのパフォーマンス最適化という魅力的な世界に陪你導いていくのがとても楽しみです。プログラミングを教えて10年以上経つ者として、効率的なコードを書くことが、動作するコードを書くことと同じくらい重要であることをお伝えします。それでは、どうぞ一緒にJavaScriptをより速く、スムーズに動かす方法を探ってみましょう！

JavaScript - Performance

パフォーマンスの重要性

本題に入る前に、ちょっとした話をシェアします。ある学生が美しいウェブサイトを構築したんですが、加载が遅くて、カメが木を登るのよりも遅かったんです。彼のJavaScriptを最適化したところ、突然、彼のサイトはチータのように素早く動き出しました！これがパフォーマンス最適化の力です。今日、それを学びます。

DOM操作の最適化

DOM：あなたのウェブサイトの骨格

まず最初に、DOM（Document Object Model）について話しましょう。これをウェブページの骨格と考えてください。JavaScriptを使ってページ上の何かを変更するたびに、あなたはDOMを操作しています。しかし、ここに落とし穴があります：正しく行わないと、DOM操作は遅くなることがあります。

DOMアクセスを最小限に

JavaScriptパフォーマンスの黄金則の一つは、DOMアクセスを最小限にすることです。以下に例を示します：

// あまり良くない
for (let i = 0; i < 1000; i++) {
document.getElementById('myElement').innerHTML += 'Hello ';
}

// もっと良い
let content = '';
for (let i = 0; i < 1000; i++) {
content += 'Hello ';
}
document.getElementById('myElement').innerHTML = content;

最初の例では、私たちは1000回もDOMにアクセスしています！これは、隣人のドアを1000回ノックして一つの長いメッセージを届けるようなものです。二つ目の例では、まずメッセージを準備してから、ノックするのはたった一度だけ。もっと効率的です！

ドキュメントフラグメントの使用

複数の要素をDOMに追加する必要がある場合は、ドキュメントフラグメントを使用してください。これは、要素をページに追加する前に一時的に保持する領域のようなものです。

let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
let newElement = document.createElement('div');
newElement.innerHTML = 'Element ' + i;
fragment.appendChild(newElement);
}
document.body.appendChild(fragment);

このようにして、すべての要素が準備できた後に、一度だけDOMを更新します。これは、一皿の料理を全部準備してから提供するのと同じで、それぞれの材料が準備されるたびに提供するよりも良いです。

非同期操作とPromise

非同期コードの魔法

レストランで waiterがあなたのテーブルに立って、シェフが料理を準備するのを見ているよりも、他の客を обслужう方が良いですか？それが同期と非同期コードの違いです。

Promise：非同期操作をよりよく扱う方法

Promiseは、JavaScriptで非同期操作を扱う方法の一つです。将来の某个時点で解決されるかもしれない値を表します。

function fetchData(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => response.json())
.then(data => resolve(data))
.catch(error => reject(error));
});
}

fetchData('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

この例では、fetchDataはPromiseを返します。.then()を使って成功した場合を処理し、.catch()を使ってエラーを処理します。これにより、コードはデータを待っている間も継続して実行されます。

JavaScriptの遅延加载

パーティを邪魔しない

JavaScriptの加载は、パーティを邪魔するようなもので、settledになるまで他のすべての操作を止めます。これを防ぐために、遅延加载を使用します。

'defer'属性の使用

scriptタグにdefer属性を追加することで、ブラウザに「このスクリプトを加载して、HTMLが完全に加载されるまで実行しないでください」と伝えます。

<script src="myScript.js" defer></script>

これにより、HTMLが迅速に加载され、特に低速な接続ではユーザー体験が向上します。

动的スクリプト加载

すぐに必要ないスクリプトは動的に加载することができます：

function loadScript(src) {
let script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
}

loadScript('https://example.com/non-essential-script.js');

このようにして、必要なときにだけスクリプトを加载することで、初期ページ加载を速く保つことができます。

グローバル変数を避ける

グローバルスコープ：混雑した場所

JavaScriptのグローバル変数は、家のいたるところに物を散らかしているようなものです。これは汚く、誰かがそれを踏んでしまうかもしれません！きれいに保ちましょう。

ローカル変数を使用する

可能な限り、グローバル変数ではなくローカル変数を使用してください：

// あまり良くない
var count = 0;
function incrementCounter() {
count++;
}

// もっと良い
function incrementCounter() {
let count = 0;
return function() {
count++;
return count;
}
}
let counter = incrementCounter();

二つ目の例では、countはローカル変数で、コードの他の部分と干渉하지 않습니다。

モジュールパターン

より複雑な場合には、モジュールパターンを使用すると良いでしょう：

const myModule = (function() {
let privateVariable = 0;

function privateFunction() {
console.log('This is private');
}

return {
publicFunction: function() {
privateVariable++;
privateFunction();
}
};
})();

myModule.publicFunction(); // これは動作します
// myModule.privateFunction(); // これはエラーを発生させます

このパターンにより、いくつかの変数や関数をプライベートに保ち、名前の衝突や意図しない修正を減少させることができます。

パフォーマンス最適化方法のまとめ

メソッド	説明
DOMアクセスを最小限に	DOMとのインタラクションを減少させる
ドキュメントフラグメントを使用する	複数の要素を一度にDOMに追加する前に準備する
Promiseを使用する	非同期操作を効率的に処理する
スクリプトの遅延加载	'defer'属性を使用するか、動的にスクリプトを加载する
グローバル変数を避ける	ローカル変数を使用し、モジュールパターンを適用する

そして、ここまでがメインの内容です！私たちはJavaScriptのパフォーマンスを最適化するためのいくつかの鍵となる戦略をカバーしました。効率的なコードを書くことは継続的なプロセスです。開発者として成長するにしたがって、コードをより速く、スムーズに動かす方法を見つけることができるでしょう。練習を続け、最適化を続け、そして最も重要なのは、コーディングを楽しむことです！

Credits: Image by storyset

前のチュートリアル:

JavaScript - Debouncing

次のチュートリアル:

JavaScript - スタイルガイド