JavaScript上級

上級 JavaScriptで学ぶキャッシュ戦略｜練習問題編

 

導入

キャッシュ戦略は、パフォーマンスを最適化するための重要な手法です。特に、APIからのデータ取得や複雑な計算結果を再利用する場面で、その効果を実感することができます。ここでは、特定のシチュエーションを通じて、キャッシュ戦略の実践的な適用方法を探ります。

教科書レベルの解説（キャッシュ戦略）

重要な概念の整理

キャッシュ戦略には、データの一時保存や再利用を通じて、システムの応答性を向上させる目的があります。特に、リソース消費の激しい操作（例えば、APIコールや重い計算処理）に対して、過去の結果を再利用することで、無駄な処理を省くことが可能です。これにより、ユーザー体験を向上させることができます。

コード例（JavaScript）


// シンプルなキャッシュ戦略の実装
const fetchDataWithCache = (() => {
    const cache = new Map();

    return async (url) => {
        if (cache.has(url)) {
            console.log('キャッシュからデータを取得');
            return cache.get(url);
        }

        console.log('APIからデータを取得');
        const response = await fetch(url);
        const data = await response.json();
        cache.set(url, data);
        return data;
    };
})();

// 使用例
fetchDataWithCache('https://api.example.com/data')
    .then(data => console.log(data));

コードの行ごとの解説

  1. const fetchDataWithCache = (() => {:
  2. 即時関数を定義し、キャッシュを管理するスコープを作成します。
  3. const cache = new Map();:
  4. データを保存するためのMapオブジェクトを初期化します。
  5. return async (url) => {:
  6. 非同期関数を返し、URLを引数として受け取ります。
  7. if (cache.has(url)) {:
  8. キャッシュにデータが存在するか確認します。
  9. console.log(‘キャッシュからデータを取得’);:
  10. キャッシュからデータを取得する場合のログを出力します。
  11. return cache.get(url);:
  12. キャッシュからデータを返します。
  13. const response = await fetch(url);:
  14. キャッシュにデータがない場合、APIからデータを取得します。
  15. const data = await response.json();:
  16. 取得したレスポンスをJSON形式に変換します。
  17. cache.set(url, data);:
  18. 取得したデータをキャッシュに保存します。
  19. return data;:
  20. データを呼び出し元に返します。

練習問題編

以下の問題を解いて、キャッシュ戦略の理解を深めてください。

  1. 問題1: 上記のキャッシュ戦略を使用して、異なるURLに対して同時にデータを取得する関数を作成してください。

    
// 模範解答
const fetchMultipleData = async (urls) => {
    return Promise.all(urls.map(url => fetchDataWithCache(url)));
};
  2. 問題2: キャッシュのサイズが一定量を超えた場合、最も古いデータを削除するロジックを追加してください。

    
// 模範解答
const fetchDataWithCache = (() => {
    const cache = new Map();
    const maxCacheSize = 5; // 最大キャッシュサイズ

    return async (url) => {
        if (cache.has(url)) {
            return cache.get(url);
        }

        const response = await fetch(url);
        const data = await response.json();
        
        if (cache.size >= maxCacheSize) {
            const oldestKey = Array.from(cache.keys())[0];
            cache.delete(oldestKey);
        }
        
        cache.set(url, data);
        return data;
    };
})();
  3. 問題3: キャッシュの有効期限を設け、一定時間経過後にデータを再取得するように修正してください。

    
// 模範解答
const fetchDataWithCache = (() => {
    const cache = new Map();
    const cacheTime = new Map();
    const cacheDuration = 60000; // 1分

    return async (url) => {
        const now = Date.now();
        if (cache.has(url) && (now - cacheTime.get(url) < cacheDuration)) {
            return cache.get(url);
        }

        const response = await fetch(url);
        const data = await response.json();
        cache.set(url, data);
        cacheTime.set(url, now);
        return data;
    };
})();

まとめ

  • キャッシュ戦略を効果的に活用することで、API呼び出しの回数を減らし、パフォーマンスを向上させることができる。
  • キャッシュの管理には、サイズ制限や有効期限を設けることが重要である。
RELATED POST