はじめに
この記事を読めば、JavaScriptキャッシュを使いこなすことができるようになります。
JavaScriptキャッシュはWebページのパフォーマンスを向上させるだけでなく、オフライン対応やリソース管理にも役立ちます。
使い方や対処法、注意点、カスタマイズ方法まで徹底解説し、実践可能なサンプルコードも15選ご紹介します。
初心者目線で詳しく解説しているので、JavaScriptキャッシュについて理解し、実践で活用できるようになりましょう。
●JavaScriptキャッシュとは
○キャッシュの基本
キャッシュは、一度読み込んだデータやファイルを一時的に保存しておくことで、次回のアクセス時に素早く読み込むことができるようにする仕組みです。
JavaScriptキャッシュは、WebページにおけるJavaScriptファイルやデータのキャッシュを指します。
これにより、ページの読み込み速度が向上し、ユーザーエクスペリエンスが向上します。
●JavaScriptキャッシュの使い方
○サンプルコード1：キャッシュの設定
下記のコードは、HTTPヘッダーを使ってJavaScriptファイルのキャッシュを設定する例です。
app.get('*.js', function (req, res, next) {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
res.set('Cache-Control', 'public, max-age=86400'); // 24時間キャッシュ
next();
});○サンプルコード2：キャッシュのクリア
下記のコードは、キャッシュをクリアする例です。
localStorage.clear();○サンプルコード3：キャッシュの有効期限設定
下記のコードは、キャッシュの有効期限を設定する例です。
const cacheTime = 60 * 60 * 24; // 24時間
const now = Math.floor(Date.now() / 1000);
const expiryTime = now + cacheTime;
localStorage.setItem('expiryTime', expiryTime);●JavaScriptキャッシュの対処法
○サンプルコード4：キャッシュバスティング
キャッシュバスティングは、ファイル名にバージョン情報やタイムスタンプを付与することで、常に最新のファイルが読み込まれるようにする手法です。
下記のコードは、キャッシュバスティングを実現する例です。
<script src="script.js?v=1.0.0"></script>●JavaScriptキャッシュの注意点
○キャッシュのデメリット
キャッシュの利用には注意点があります。
キャッシュが古いデータを保持し続けることで、最新のコンテンツが表示されないことがあります。
また、キャッシュが容量を圧迫することで、デバイスのパフォーマンスが低下することもあります。
●JavaScriptキャッシュのカスタマイズ方法
○サンプルコード5：独自のキャッシュ管理
下記のコードは、独自のキャッシュ管理を実現する例です。
// キャッシュデータの保存
function saveCache(key, data) {
localStorage.setItem(key, JSON.stringify(data));
}
// キャッシュデータの取得
function getCache(key) {
const cachedData = localStorage.getItem(key);
return cachedData ? JSON.parse(cachedData) : null;
}
// キャッシュデータの削除
function removeCache(key) {
localStorage.removeItem(key);
}●JavaScriptキャッシュの応用例
○サンプルコード6：リソースのプリロード
下記のコードは、リソースをプリロードする例です。
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="script.js" as="script">○サンプルコード7：オフライン対応
下記のコードは、オフライン時にキャッシュからデータを取得する例です。
if (navigator.onLine) {
// オンライン時
fetchDataFromServer();
} else {
// オフライン時
fetchDataFromCache();
}○サンプルコード8：パフォーマンス最適化
下記のコードは、パフォーマンスを最適化するためにキャッシュを活用する例です。
// APIレスポンスをキャッシュに保存
function cacheApiResponse(apiResponse) {
localStorage.setItem('apiResponse', JSON.stringify(apiResponse));
}
// APIレスポンスをキャッシュから取得
function getCachedApiResponse() {
const cachedApiResponse = localStorage.getItem('apiResponse');
return cachedApiResponse ? JSON.parse(cachedApiResponse) : null;
}○サンプルコード9：キャッシュサイズ制限
下記のコードは、キャッシュのサイズを制限する例です。
function checkCacheSize() {
let totalSize = 0;
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
totalSize += key.length + value.length;
}
return totalSize;
}
// キャッシュサイズが1MBを超えたら、キャッシュをクリア
if (checkCacheSize() > 1024 * 1024) {
localStorage.clear();
}○サンプルコード10：キャッシュの最適化
下記のコードは、キャッシュの最適化を行う例です。
// 不要なキャッシュデータを削除
function removeUnusedCacheData() {
const usedKeys = ['key1', 'key2', 'key3'];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (!usedKeys.includes(key)) {
localStorage.removeItem(key);
}
}
}○サンプルコード11：動的コンテンツのキャッシュ
動的コンテンツをキャッシュすることで、ページの読み込み速度を向上させることができます。
下記のコードは、動的コンテンツをキャッシュする例です。
async function fetchAndCacheDynamicContent(url) {
const response = await fetch(url);
const content = await response.text();
// キャッシュに保存
localStorage.setItem(url, content);
return content;
}○サンプルコード12：IndexedDBを使ったキャッシュ
IndexedDBは、ブラウザに大量の構造化データを保存するためのWeb標準です。
下記のコードは、IndexedDBを使ってキャッシュを実現する例です。
// IndexedDBのデータベースを開く
const openRequest = indexedDB.open('myDatabase', 1);
openRequest.onupgradeneeded = function(event) {
const db = event.target.result;
const store = db.createObjectStore('myCache');
};
openRequest.onsuccess = function(event) {
const db = event.target.result;
// キャッシュデータの保存
const transaction = db.transaction('myCache', 'readwrite');
const store = transaction.objectStore('myCache');
store.put('Hello, IndexedDB!', 'message');
};
openRequest.onerror = function(event) {
console.error('Error opening IndexedDB:', event.target.errorCode);
};○サンプルコード13：Service Workerを使ったキャッシュ
Service Workerを使うことで、キャッシュの管理が容易になります。
下記のコードは、Service Workerを使ったキャッシュの例です。
// Service Workerの登録
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(function() {
console.log('Service Worker registered successfully.');
}).catch(function(error) {
console.error('Service Worker registration failed:', error);
});
}// service-worker.js
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('my-cache').then(function(cache) {
return cache.addAll([
'/',
'/index.html',
'/style.css',
'/script.js'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
○サンプルコード14：キャッシュの優先順位設定
キャッシュの優先順位を設定することで、重要なリソースが優先的にキャッシュされるようになります。
下記のコードは、キャッシュの優先順位を設定する例です。
// 優先度の高いキャッシュデータを保存
function savePriorityCache(key, data) {
sessionStorage.setItem(key, JSON.stringify({
priority: 'high',
data: data
}));
}
// 優先度の低いキャッシュデータを保存
function saveLowPriorityCache(key, data) {
sessionStorage.setItem(key, JSON.stringify({
priority: 'low',
data: data
}));
}
// キャッシュデータの取得
function getCacheData(key) {
const cachedData = sessionStorage.getItem(key);
return cachedData ? JSON.parse(cachedData) : null;
}○サンプルコード15：ユーザー別キャッシュの設定
ユーザー別にキャッシュを設定することで、各ユーザーが必要とするデータを効率的に提供できます。
下記のコードは、ユーザー別キャッシュの設定例です。
// ユーザーIDを元にキャッシュデータを保存
function saveUserCache(userId, data) {
localStorage.setItem(`user-${userId}`, JSON.stringify(data));
}
// ユーザーIDを元にキャッシュデータを取得
function getUserCache(userId) {
const cachedData = localStorage.getItem(`user-${userId}`);
return cachedData ? JSON.parse(cachedData) : null;
}まとめ
この記事では、JavaScriptキャッシュの基本から使い方、対処法、注意点、カスタマイズ方法まで詳しく解説しました。
また、実践で役立つサンプルコードも15選紹介しました。
この記事を参考に、JavaScriptキャッシュを活用してWebページのパフォーマンス向上やオフライン対応などを実現しましょう。
