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でクリアする方...  続きを読む

【WordPress】画像URLにクエリパラメータを保存時に自動付与｜キャッシュ対策

WordPressで画像のキャッシュ対策として`?ver=`クエリを自動付与する方法を解説。`the_content`フィルター方式の限界と、`content_save_pre`でDBへ直接書き込む新方式の完全なコード、Better Search ...  続きを読む

画像のアスペクト比を自動計算・付与する | aspect-ratioが効かない原因とCLS対策

CSS aspect-ratioが効かない原因を押さえつつ、投稿保存時に実画像からアスペクト比（縦横比）を自動計算・自動付与し、SP/PCの出し分けまで手作業ゼロで維持する仕組み、CLS対策として無理なく運用するための実運用での使い方を解説します。  続きを読む