キャッシュ戦略
Cache First と Network First のパターンを適用します。
「キャッシュ戦略」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
なぜ戦略が重要なのか
アセットによって適した扱い方は異なります。ロゴは常にキャッシュから提供できますが、APIのフィードは最新でなければなりません。キャッシュ戦略によって、キャッシュとネットワークのどちらを先に試すか、また両者をどのように組み合わせるかを決めます。
Cache-first
Cache-first：キャッシュを確認し、見つかればそれを返し、見つからなければネットワークから取得します。フォント、CSS、画像など、静的で変更頻度の低いアセットに適しています。
async function cacheFirst(request) {
const cached = await caches.match(request);
return cached || fetch(request);
}フォールバックキャッシュ付きCache-first
キャッシュに見つからなかった場合は、取得した結果を保存することもできます。次回のリクエストが高速になり、ユーザーが閲覧するにつれてキャッシュが遅延的に温められます。
async function cacheFirst(request) {
const cached = await caches.match(request);
if (cached) return cached;
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
}Network-first
Network-first：まずネットワークを試し、成功したらその結果を使ってキャッシュします。失敗した場合（オフラインの場合）はキャッシュにフォールバックします。ニュースやダッシュボードなど、頻繁に更新されるコンテンツに適しています。
async function networkFirst(request) {
try {
const fresh = await fetch(request);
const cache = await caches.open('runtime');
cache.put(request, fresh.clone());
return fresh;
} catch (err) {
return caches.match(request);
}
}Stale-While-Revalidate
Stale-while-revalidate: 速度を優先してキャッシュ済みのコピーをすぐに返しながら、バックグラウンドで新しいコピーを取得して、次回に備えてキャッシュを更新します。速度と鮮度のバランスに優れた方法です。
async function staleWhileRevalidate(request) {
const cache = await caches.open('runtime');
const cached = await cache.match(request);
const network = fetch(request).then(res => {
cache.put(request, res.clone());
return res;
});
return cached || network;
}Network-Only と Cache-Only
シンプルな両極端の2つです。
- Network-only: 常に取得し、キャッシュは使用しません（例: アナリティクスのビーコン）。
- Cache-only: 事前にキャッシュしたアセットだけを提供し、ネットワークには一切アクセスしません（例: アプリシェル）。
// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);リクエストの種類によるルーティング
実際のアプリでは、リクエストごとに戦略を選択します。fetch ハンドラーで request.url または request.destination を調べ、それに応じてルーティングします。
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.startsWith('/api/')) {
event.respondWith(networkFirst(event.request));
} else {
event.respondWith(cacheFirst(event.request));
}
});オフラインフォールバックの処理
ネットワークとキャッシュの両方で見つからない場合は、壊れたレスポンスを返すのではなく、ユーザーに配慮したオフラインページやプレースホルダーを返します。
async function withOfflineFallback(request) {
return (await caches.match(request)) ||
(await caches.match('/offline.html'));
}成功したレスポンスだけをキャッシュする
エラーをキャッシュしないようにします。保存する前に response.ok（またはステータス）を確認し、404や500によってキャッシュが汚染されないようにします。
const fresh = await fetch(request);
if (fresh.ok) {
cache.put(request, fresh.clone());
}
return fresh;戦略の選択
コンテンツに合わせて戦略を選択します。
- 静的アセット: cache-first
- 動的データ: network-first
- 混在するコンテンツ: stale-while-revalidate
ほとんどのアプリでは、リクエストルーティングを使って複数の戦略を組み合わせます。
戦略のまとめ
キャッシュ戦略を使うと、1つのサービスワーカーでアプリ全体をインテリジェントに提供できます。リクエストごとに戦略を選択することで、静的アセットはすぐに、動的データは最新の状態で提供し、オフライン時には適切にフォールバックできます。
クイックチェック
キャッシュ戦略についての理解度を確認します。
まとめ
キャッシュ戦略について学びました。
- 静的アセットには Cache-first。
- 最新の動的データには Network-first。
- 速度と鮮度の両立には Stale-while-revalidate。
request.url/destinationを使ってリクエストごとにルーティングする。- 成功したレスポンスだけをキャッシュし、オフラインフォールバックを用意する。
次は、バックグラウンド同期とキャッシュの更新について学びます。
よくある質問
「キャッシュ戦略」レッスンは無料ですか？
はい。「キャッシュ戦略」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「キャッシュ戦略」で何を学びますか？
Cache First と Network First のパターンを適用します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「キャッシュ戦略」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。