JavaScript中級

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

 

導入

ウェブアプリケーションのパフォーマンスを向上させるために、キャッシュ戦略は欠かせない要素です。特に、APIからのデータ取得やリソースの読み込みにおいて、キャッシュを適切に管理することが求められます。この記事では、JavaScriptを用いた具体的なキャッシュ戦略の実装方法について、現場で遭遇しやすいシチュエーションを通じて学びます。

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

重要な概念の整理

キャッシュ戦略には、メモリキャッシュ、ブラウザキャッシュ、CDNキャッシュなど、さまざまな種類があります。ここでは、クライアントサイドでのメモリキャッシュを中心に考えます。データを一度取得した後、再度同じデータを取得する際に、ネットワークを経由せずにキャッシュから直接取得することで、パフォーマンスを大幅に向上させることができます。

コード例（JavaScript）


// 簡易キャッシュ機構の実装
const cache = {};

async function fetchData(url) {
    if (cache[url]) {
        console.log('キャッシュから取得:', cache[url]);
        return cache[url];
    }
    const response = await fetch(url);
    const data = await response.json();
    cache[url] = data;
    console.log('ネットワークから取得:', data);
    return data;
}

// 使用例
fetchData('https://api.example.com/data')
    .then(data => console.log('データ:', data));

コードの行ごとの解説

  1. const cache = {}; – キャッシュを保存するためのオブジェクトを初期化します。
  2. async function fetchData(url) { – データを取得するための非同期関数を定義します。
  3. if (cache[url]) { – キャッシュに指定したURLのデータが存在するか確認します。
  4. console.log(‘キャッシュから取得:’, cache[url]); – キャッシュからデータを取得した場合、そのデータをログに出力します。
  5. const response = await fetch(url); – キャッシュにデータがない場合、ネットワークからデータを取得します。
  6. const data = await response.json(); – 取得したレスポンスをJSON形式に変換します。
  7. cache[url] = data; – 新たに取得したデータをキャッシュに保存します。
  8. console.log(‘ネットワークから取得:’, data); – ネットワークからデータを取得した場合、そのデータをログに出力します。
  9. return data; – 最終的に取得したデータを返します。

練習問題編

以下の練習問題に取り組んで、キャッシュ戦略の理解を深めてください。

  1. 問題1: fetchData関数に対して、キャッシュの有効期限を設定するためのロジックを追加してください。
  2. 問題2: 複数のURLを同時に取得する関数を作成し、キャッシュを活用するようにしてください。
  3. 問題3: キャッシュのサイズが一定の制限を超えた場合に、古いエントリを削除する機能を実装してください。

まとめ

  • キャッシュ戦略は、アプリケーションのパフォーマンス向上に寄与します。
  • メモリキャッシュの実装は、特にAPIからのデータ取得において効果的です。
  • キャッシュの管理には有効期限やサイズ制限を設けることが重要です。
RELATED POST