WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： プログラム >PHP

Webサイトを更新したのに、「修正内容が反映されない」「ページが古いまま表示される」といった経験はありませんか？
これはブラウザキャッシュが原因であることが多く、ユーザー側に「Ctrl + F5で更新してください」と案内するケースも少なくありません。

そこでおすすめなのが、開発者側（ソースコード側）でキャッシュクリアを実装する方法です。
この記事では、HTML・JavaScript・PHPで簡単に実装できるキャッシュ対策を紹介します。

キャッシュとは

Webブラウザは一度読み込んだCSSやJavaScript、画像などを一時的に保存しています。
次回アクセス時にサーバーへ再度アクセスする必要がなくなるため、ページ表示が高速になるというメリットがあります。

しかし、その反面「更新したのに古いコードが実行される」「画像を差し替えたのに以前の画像が表示される」といった問題が発生します。

解決方法①ファイル名を変更する

最もシンプルな方法はファイル名を変更する方法です。

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

上記の記述を下記に変更します。

<link rel="stylesheet" href="style_v2.css">

ただし、更新を行うたびに対象のファイル名を変更する必要があるため、

• 読み込み元のHTMLも修正しなければならない
• 管理が複雑化する

といった問題が発生します。

解決方法②クエリパラメータを付与する

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

<script src="script.js?v=1.0.0"></script>

<img src="logo.png?v=1.0.0" alt="">

上記のように、ファイル名の後ろに「?v=1.0.0」といったパラメータを付与することでURLが変わり、ブラウザは新しいファイルとして扱います。

例として、CSSファイルを修正した場合、

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

上記の記述を下記に変更します。

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

このように、更新したファイル名自体を変更することなく、キャッシュを残さずに新たなファイルとして扱うことが可能です。
ただし、この方法だと結果として読み込み元であるhtmlファイルを都度更新する必要があります。

解決方法③クエリパラメータをPHPで自動付与する ★おすすめ

前述の方法の応用として、PHPが利用できるサーバーであればこちらの方法がおすすめです。

<link rel="stylesheet" href="style.css?v=<?php echo filemtime('style.css'); ?>">

<script src="script.js?v=<?php echo filemtime('script.js'); ?>"></script>

<img src="logo.png?v=<?php echo filemtime('logo.png'); ?>" alt="">

「filemtime()」は、ファイルの最終更新日時を取得する関数です。

これにより、ファイルを更新するとその更新日時がクエリパラメータとして自動付与されるようになるため、読み込み元のコード自体も、更新したファイルの名前も変える必要が無くなります。

まとめ

ブラウザキャッシュはページ表示を高速化する便利な仕組みですが、更新内容が反映されない原因にもなります。
サイト運用やWeb制作を行う際は、ユーザに最新のコンテンツを表示するためにも、開発者側で適切なキャッシュ管理を実装すると快適です。