【Chromeユーザー必見】キャッシュ削除の方法を解説【自動化する方法あり】

※本サイトはアフィリエイト広告を利用しています。

【キャッシュを削除する方法が知りたい人】

 

こういった疑問に答えます。

本記事の内容

• キャッシュ削除の方法を解説【Chromeユーザー向け】
• キャッシュ削除を自動化する方法【コードを編集】

この記事では
エンジニアをしているこの僕が、
キャッシュの削除方法から
自動で削除をする方法まで
を解説しています。

なおタイトルの通り、
本記事では
Google Chrome
を使用することを
前提としております。

記事を読み終わる頃には
キャッシュで悩むことが無くなりますよ！

キャッシュ削除の方法を解説【Chromeユーザー向け】

まずは前提知識として
キャッシュについて簡単に解説します。

キャッシュとは、
訪問したWebページの情報を
一時的に保存する仕組み。
 
またはその
一時的なデータそのもの。

 

Webページを表示する際には、
そのページのデータを
ダウンロードする必要があります。
 
しかし、
ページを訪れる度に
毎回ダウンロードしていたら
時間がかかりますよね。
 
なので、
画像やテキスト情報などを
キャッシュという
一時的な保存データとして
スマホやPC内に入れておくことで、
再表示のスピードが上がる
これがキャッシュの仕組みです。

キャッシュの削除はコマンドで簡単【スーパーリロード】

では、どうやって
キャッシュを削除するのか。

結論、下記のコマンドを打ち込むだけ。

• Macの場合 … command + shift + R
• Windowsの場合 … ctrl + f5

こちらが
スーパーリロードといって、
ブラウザのキャッシュを無視し、
強制的にWebサーバーから
ファイルをダウンロードする方法です。

このコマンドを打ち込むことで
簡単にキャッシュを削除できます。

キャッシュ削除を自動化する方法【コードを編集】

こちらに関して先日、
以下のようなツイートを見かけました。

CSSキャッシュの自動更新
A「これ修正お願いします」
B「修正しました」
A「変わってないですね」

CSSファイルを修正した場合は
<link ~ href="styles.css?20201013">
「?]記号をつかってクエリ文字列を付与することで常に新しいCSSを読み込ませることができます✍️https://t.co/R83UpqTw60

— ものりす🍀@田舎のよわよわフロント (@monolith_j) October 14, 2020

 

こちらの内容を
簡単に説明すると、

ファイル名の末尾に、
『パラメータ（?適当な文字列）』
を記述することによって、
キャッシュを削除した状態で
そのファイルが読み込まれる。

というもの。

“適当な文字列”
と言われても困ると思うので、
例として挙げられていた
『?更新日時』といった
以下のような書き方がおすすめ。

 

<link rel="stylesheet" href="style.css?20201128">

 
 

こうしておけば、
修正や変更をする度に
お客さんなどに
キャッシュの削除をお願いする
手間が無くなります。

ちなみに、
読み込むファイル名に
こういった文字列を書き加えても
正常に読み込んでくれるのでご安心を。

ぜひ試してみてください。