Web開発をしていると、クライアントから「画像が変わっていない」「レイアウトが反映されない」といった報告を受けることがよくあります。その度に「ブラウザのキャッシュを削除してください」と説明するのも大変ですし、一般のユーザーにとってキャッシュクリアの操作は難しいものです。

そんな問題を解決する JavaScript ツール cache-cleaner.js について、詳しく解説していきます。

🚀 cache-cleaner.js とは？

cache-cleaner.js は、ブラウザキャッシュ、sessionStorage、localStorage を簡単にクリアできる JavaScript ツールです。特徴的なのは、デバッグモードでのみ動作するため、本番環境に設置していても一般ユーザーには見えないという点です。

主な特徴

  • デバッグモード制御：?debug=1 や ?debug=true のクエリパラメータでのみ表示
  • 直感的なUI：右下に固定配置（トップに戻るボタンの近くでカスタマイズ可能）のわかりやすいインターフェース

 

🔧 3段階のクリア機能

1. スーパーリロード

case 'reload':
if (confirm('ページをスーパーリロードしますか？')) {
showToast('リロード中...');
setTimeout(() => {
location.reload(true);
}, 500);
}
break;
  • 対象：ブラウザキャッシュの一部
  • 用途：CSS や JavaScript の更新が反映されない場合
  • 影響：最小限（データは保持）

2. sessionStorageクリア

case 'session':
if (confirm('sessionStorageをクリアして再読み込みしますか？')) {
try {
sessionStorage.clear();
showToast('sessionStorageをクリアしました');
setTimeout(() => {
location.reload(true);
}, 1000);
} catch (e) {
showToast('エラー: ' + e.message);
}
}
break;
  • 対象：タブスコープの一時データ
  • 用途：フォームの下書きや一時的な設定が問題の場合
  • 影響：そのタブの一時データのみ削除

3. sessionStorage + localStorageクリア

case 'all':
if (confirm('sessionStorage, localStorageをクリアして再読み込みしますか？')) {
try {
localStorage.clear();
sessionStorage.clear();
showToast('sessionStorage, localStorageをクリアしました');
setTimeout(() => {
location.reload(true);
}, 1000);
} catch (e) {
showToast('エラー: ' + e.message);
}
}
break;
  • 対象：localStorage + sessionStorage
  • 用途：ユーザー設定や保存データが原因の場合
  • 影響：すべてのローカルデータを削除

💻 主要コードの解説

1. デバッグモード判定

const params = new URLSearchParams(window.location.search);
const debugValue = params.get('debug');
const debugMode = ['true', '1'].includes(debugValue?.toLowerCase()) ||
(params.has('debug') && debugValue === '');

この部分で、以下のパターンでデバッグモードを有効にします：

  • ?debug=true
  • ?debug=1
  • ?debug（値なし）

2. 動的スタイル注入

const addStyles = () => {
const style = document.createElement('style');
style.textContent = `
.cache-cleaner-container {
position: fixed;
z-index: 99999;
bottom: 11pc;
right: -2px;
display: ${debugMode ? 'block' : 'none'};
transition: all 0.3s ease;
}
// ... 省略
`;
document.head.appendChild(style);
};

CSS を JavaScript 内に埋め込むことで、外部ファイルへの依存を排除。デバッグモードの状態によって表示/非表示を制御しています。

3. アニメーション付きUI

.cache-cleaner-buttons {
display: flex;
flex-direction: column;
gap: 10px;
transform-origin: 100% 100%;
transform: scale(0) translate(0pc, 0);
transition: all 0.1s ease-out;
}
.is-opened .cache-cleaner-buttons {
transform: scale(1) translate(-1pc, -0.5pc);
}

スケールとトランスレートを組み合わせたスムーズなアニメーションで、ユーザビリティを向上させています。

4. トーストメッセージシステム

const showToast = (message) => {
let toast = document.querySelector('.cache-cleaner-toast');
if (!toast) {
toast = document.createElement('div');
toast.className = 'cache-cleaner-toast';
document.body.appendChild(toast);
}
toast.textContent = message;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 2000);
};

処理の進行状況を視覚的にフィードバックすることで、ユーザーに安心感を与えます。

5. 安全な初期化処理

const init = () => {
// 既存のインスタンスがあれば削除
const existing = document.querySelector('.cache-cleaner-container');
if (existing) {
existing.remove();
}
addStyles();
const container = createHTML();
document.body.appendChild(container);
setupEventListeners(container);
};
// DOMの読み込み状態を確認
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}

重複インスタンスの防止とDOM読み込み状態の適切な処理で、確実な初期化を実現しています。

🛠️ 導入方法

1. ファイルの設置

<script src="path/to/cache-cleaner.js"></script>

2. デバッグモードでアクセス

https://example.com/?debug=1
https://example.com/?debug=true
https://example.com/?debug

3. プログラムからの制御

// 表示
window.CacheCleaner.show();
// 非表示
window.CacheCleaner.hide();
// 切り替え
window.CacheCleaner.toggle();

🔒 一般ユーザーへの配慮

  • デバッグモードでのみ動作：一般ユーザーには見えない
  • 確認ダイアログ：誤操作を防止
  • 即座実行関数：グローバル名前空間の汚染を回避
  • エラーハンドリング：try-catch でエラーを適切に処理

まとめ

cache-cleaner.js は、Web開発における「キャッシュ問題」を解決する便利なJavaScriptです。

キャッシュとストレージとセッションの違い、キャッシュをクリアするJavaScript

キャッシュとストレージとセッションの違い、キャッシュをクリアするJavaScript ウェブ開発をしていると「キャッシュ」「ストレージ」「セッション」という似たような言葉が頻繁に登場します。これらはすべてデータを保存する仕組みですが、それぞれ異なる特性と用途があります。今回は、これらの違いを整理し、JavaScriptでクリアする方法をまとめて...  続きを読む