オタクくん「ギャル先輩、パフォーマンスチューニングってなんですか？」

プログラムが遅いときの対策

オタクくん「ギャル先輩、最近作っているウェブアプリがめっちゃ遅いんですけど、どうしたらいいんですか？」

ギャル先輩「おっ、オタクくん、また困ってるの？それってパフォーマンスチューニングが必要じゃん？」

オタクくん「パフォーマンスチューニングってなんですか？」

ギャル先輩「簡単に言えば、プログラムの動きを速くするための技術だよ。ウェブアプリの速度を改善するためにいくつか方法があるんだけど、まずはプロファイリングっていうのをしてみようか。」

オタクくん「プロファイリングですか？」

ギャル先輩「そうそう、プロファイリングはプログラムのどこが遅いのかを調べるためのツールを使うことだよ。たとえばChromeのデベロッパーツールを使ってみよう。」

プロファイリングのやり方

ギャル先輩「まず、Chromeを開いてF12キーを押すとデベロッパーツールが開くから、その中のPerformanceタブをクリックしてみて。」

オタクくん「はい、クリックしました。」

ギャル先輩「そこで録画ボタンを押して、アプリを少し使ってみるんだ。終わったら録画を停止して、結果を見てみよう。」

オタクくん「わあ、たくさんの情報が出てきましたね。」

ギャル先輩「うん、ここで重要なのは、どの部分が時間をかけているのかを見つけること。たとえば、ある関数が実行されるのにめっちゃ時間がかかってるとするじゃん？そしたら、その関数を改善する必要があるんだよ。」

コードの改善

オタクくん「じゃあ、どうやって改善するんですか？」

ギャル先輩「それにはいろいろな方法があるけど、たとえばループの中に無駄な処理がないか確認したり、キャッシュを利用したりするのが一般的かな。具体例を見てみようか。」

無駄なループの削除

ギャル先輩「たとえば、こんなコードがあったとするよ。」

for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    for (let j = 0; j < items.length; j++) {
        compareItems(items[i], items[j]);
    }
}

ギャル先輩「このコードはitemsの長さ分だけループして、その中でもう一回ループしてるから、itemsが増えるとめっちゃ遅くなるの。これを改善するには、例えば一度比較した組み合わせをもう一度比較しないようにすることができるよ。」

for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    for (let j = i + 1; j < items.length; j++) {
        compareItems(items[i], items[j]);
    }
}

オタクくん「あ、本当だ、これならループの回数が減りますね。」

キャッシュの利用

ギャル先輩「もう一つの方法は、キャッシュを利用することだよ。たとえば、APIから同じデータを何度も取得している場合、そのデータを一度だけ取得して、後で再利用することができるんだ。」

オタクくん「どうやってやるんですか？」

ギャル先輩「例えば、こんな感じで。」

let cache = {};

function fetchData(key) {
    if (cache[key]) {
        return cache[key];
    }
    let data = apiCall(key); // APIを呼び出す
    cache[key] = data;
    return data;
}

オタクくん「なるほど、これならAPIの呼び出し回数が減りますね。」

パフォーマンスチューニングのまとめ

ギャル先輩「他にもいろいろな方法があるけど、今日はこれくらいにしとこうか。基本的な考え方は、無駄な処理を減らして、できるだけ効率的に動くようにすることだよ。」

オタクくん「ありがとうございます、ギャル先輩！すごく勉強になりました。」

ギャル先輩「どういたしまして！あーしもオタクくんの役に立ててうれしいよwww」

オタクくん「ギャル先輩、ほんとにすごいです！もう少し教えてもらってもいいですか？」

ギャル先輩「あーしに教えてもらいたいなんて、オタクくんも変わってるねwww でもまあ、またいつでも聞いてよ！」

オタクくん「はい、ありがとうございます！」

ギャル先輩「じゃあ、頑張ってねー！」