CSSの変更時にキャッシュさせずに確実に反映させる方法


ウェブサイトを作成しているときに、スタイルシートを更新したにもかかわらず、画面上で変更が反映されないという経験はありませんか?
特に、実際にリリースしているウェブサイトの画面で、変更したスタイルシートが適用されない場合、ユーザーにとっても良い印象を与えません。
クライアントからの依頼に対してスタイルを変更してリリースしたのに、クライアントの画面で変更が反映されずにクレームになりかけることもあります。
そのため、キャッシュの説明をして画面の更新を促すことになるのですが、できることならそんなことは起こらないほうがいいですよね。

ウェブサイトでは、ページの表示速度を上げるために、ブラウザは一度読み込んだリソースをキャッシュとして保存しています。
これは、同じユーザーが再度同じページを訪れたときに、保存しておいたデータを使うことで画面を素早く表示することができるためです。
キャッシュはこのように、ページを早く表示させるのに役立っていますが、一方で開発のときには、先ほどのような問題が起こってしまいます。
つまり、CSSを変更したにもかかわらず、キャッシュにより以前のデータが表示されてしまうため、変更した箇所が正しく反映されないという問題です。

今回は、この問題を解決する方法を紹介します。
キャッシュという仕組み自体は有効な機能なので、それ自体を止めることはできませんが、ある工夫をすることで、不要なキャッシュをクリアすることができます。

キャッシュの問題とその解決方法

キャッシュは同一のファイルに対して効果があるのですが、それはURLで比較されています。
つまり、毎回ファイル名を変えてしまえば、毎回新しいファイルとみなされ、キャッシュは利用されません
しかし、毎回ファイル名を変更してアップロードするのは手間がかかりますね。
ファイルは今までと同じように扱い、そのファイルを参照する際に、ファイル名の後にパラメータを付けることで別のURLとみなすことができます

例えば次のようなURLを作ることができます。

https://example.com/style.css?v=1
https://example.com/style.css?v=2

これらのURLはファイル名は同じですが、後に続くパラメーターが違うため別のURLを表していることになります。 つまり、同一ファイルでありながら、後のパラメーターによって、別のURLとみなされて表示の際に、キャッシュされたものではなく、新しくロードされるということになります。

アクセスするたびにファイル名が変わるようなパラメータの付け方として、最も一般的なのが日時を利用した方法です。
時間は常に進むものであり二度と同じ日時にはなりません。
つまり、アクセスするたびに違う数値が得られるユニークなものとして、ファイル名の後に日時を付加することで、毎回必ず違うURLを生成することができます

JavaScriptを使った方法

まずはJavaScriptを使った方法について紹介します。
以下に、JavaScriptを使った実装例を紹介します。この方法はPHPが使えない環境でスタイルシートのキャッシュを無効化したい場合に有効です。
アクセスした時間をパラメータとしています。
そのため、毎回必ずキャッシュされていないURLを参照することとなります。

const cssFile = 'style.css';
const timestamp = new Date().getTime();
const linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = `${cssFile}?v=${timestamp}`;
document.head.appendChild(linkElement);

PHPを使った方法

次に、PHPを使ったスクリプトを紹介します。
PHPはJavaScriptと違ってCSSファイルそのものにアクセスできるため、ファイルの最終更新時刻を取得してパラメータとして付加することができます。
アクセスした時間と違いファイルの更新日では、ファイルが更新された場合のみURLが変更され、そうでない場合はキャッシュが活用されるという効率的な方法です。
PHPが使える環境であれば、こちらの方法をお勧めします。

以下に、PHPを使った実装例を紹介します。

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

この方法では、CSSファイルが更新された際にのみパラメータが変更され、ブラウザが未キャッシュのCSSを読み込むようになります。

キャッシュはウェブサイトを表示するために必要不可欠でとても効果的なものです。
しかし、場合によってはキャッシュが不都合であることもあります。
今回紹介した方法を使用することで、CSSに関しては変更した場合に確実にその変更箇所が反映されるようにすることができます。
キャッシュの利点を活かしつつ、必要なときに最新のスタイルシートを反映させることでユーザーに最適な体験を提供しましょう。

[RelService] [Service]