【 更新 】おすすめ記事はこちら

TIPS

CSS・JSのキャッシュを削除！新規データとして認識するパラメータをつける

サイト制作をしていると、更新前のテキストや画像が「キャッシュ」として残ることがあります。

本来は、サイトの表示速度向上に役立つ機能ですが、制作中の身としては逐一キャッシュを削除しなければならず、少し面倒なシステムに思えたり。

そんな悩みを解決してくれるのが「バージョンをつける」という方法。

いつものコードに短い文字列（パラメータ）を加えて、最新のデータを自動で表示させるというもの。

もし今、クライアントさんと「画面が更新されていないのですが・・・」というやり取りをしているなら、これでささっと解決しますよ！目指せストレスフリー！

はじめに

キャッシュとは

「キャッシュ」とは、読み込み速度をアップするための仕組みのこと。サイトの情報を一時的に保持して、次回同じページを見るときにサポートしてくれる機能です。

主に画像やテキストなどのデータが、スマホ、パソコンなどの端末内に蓄積されていきます。

このシステムにより、更新前の古いデータが適用されるため、冒頭の「画面が更新されていない」というやりとりが起きます。すべてはキャッシュのせいでして（モゴモゴ）。

それなら「キャッシュクリアで解決！」と言いたいところですが、そう言い切れないのは、ブラウザのキャッシュが強く残ることもあるから。

キャッシュの削除

削除方法はOSやブラウザごとに異なりますが、Windowsの場合は、

  1. Ctrl + Shift + R（共通）
  2. Shift + F5（Chrome）
  3. Ctrl + F5（FireFox／Edge）

それでも消えないときは、

  1. シークレットモードで開き直す（共通）
  2. キャッシュの削除とハード再読み込み（Chrome）

で対応します。

「シークレットモード」は、強制的に最新データが読み込まれる仕様なので簡単。

「キャッシュの削除とハード再読み込み」は「F12」で開発者ツールを起動した上で、左上のリロードマークを右クリック。ダイアログから選びます。

スマホの場合は、

  1. 履歴削除（共通）
  2. シークレットモードで開き直す（共通）

で解決するはず。

とは言え、溜まったキャッシュは、端末の処理を圧迫します。動作が重くなったな・・・と感じたら定期的に履歴を削除して、快適な状態をキープしましょう。

パラメータとは

プログラミング言語にも出てきますが、意味としては同じで「変数」「引数」のことをいいます。

ただ、ここでの「パラメータ」は「URLパラメータ」のこと。「？」から後ろの文字列を指します。

以下はECサイトの例。

 //コート（MEN）69 NAVY

https://〇〇.com/jp/ja/products/E442150-000/00?colorDisplayCode=69&sizeDisplayCode=004

?colorDisplayCode=69&sizeDisplayCode=004の部分がパラメータですね。

[パラメータ名]=[値]の順に「＆」を挟んで複数組み合わせているんだなと見てもらえればOK。

つづいて色違いのアイテムを参考に動作例を見ていきます。

 //コート（MEN）34 BROWN

https://〇〇.com/jp/ja/products/E442150-000/00?colorDisplayCode=34&sizeDisplayCode=004

よく見ると、カラーコードcolorDisplayCodeの番号に違いが。

実際に種類が複数ある商品ページに行くと分かりますが、アイテムの色ごとに画像や商品名が変わる動的なページになっていると思います。今回のサンプルも同じです。

パラメータの役割としては、ソフトウェアやシステムなどのプログラムに処理内容を渡すこと。これにより、与えた情報（値）に応じた動きをさせることができます。

この方法であれば、外側からコントロールする形をとるので、サイトの構造を変えることなく、アイテムの切替えやデータ収集ができるというわけです。便利！

パラメータの種類

先ほどの商品例は、正確には「アクティブパラメータ」と呼ばれ、内容が変化するタイプのパラメータです。

主にECサイトで使われることが多く、商品の色や特徴で対象を絞り込んだり、価格順に並び替えるような場面で活躍します。

それとは別に、内容に変化はなく、データ解析を目的とした情報収集用のパラメータもあり、こちらは「パッシブパラメータ」といいます。

よくあるのは広告流入を調べるケース。流入数や流入経路、その後のページ遷移を知ることでコンバージョンにつなげるという施策にもなります。

パラメータの付け方

ところで、一番肝心なパラメータの付け方ですが、文字列に明確な決まりはありません。つまり自由につけられます。

例えば、アナリティクスでは「utm_」から始まるパラメータを設定、付与して細かく分類、集計できます。

今回は、CSS、JavaScript、画像に付与して、新しいファイルとしてブラウザに認識してもらうことが目的なので、CSSを例にすると、

// HTML

<link rel="stylesheet" href="./css/style.css?ver=1.0.0">
// WordPress

wp_enqueue_style( 'sample-style', get_template_directory_uri() . '/style.css', array(), '1.0.0' );

のようなコードになります。

?ver=としていますが、?abc=にしても、?20210101=にしてもOK。

また、バージョンに関しても1.0.0で統一していますが、2.0.0から始めても問題ありません。管理しやすいよう環境に合わせて調整してみてください。

headにパラメータを追加（HTML）

HTMLは「相対パス」にしています。ファイル名から後ろの「?」以降のコードを追加。

CSSファイル

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

JSファイル

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

imageファイル

<img src="./image.jpg?ver=1.0.0">

functionsにパラメータを追加 （WordPress）

PHPは「ルートパス」にしています。 CSSとJavaScriptはarray()の後ろ、画像はファイル名から後ろの「?」以降のコードを追加。

CSSファイル

wp_enqueue_style( 'sample-style', get_template_directory_uri() . '/style.css', array(), '1.0.0' );

JSファイル

wp_enqueue_script( 'sample-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true );

imageファイル 

<img src="<?php echo get_template_directory_uri(); ?>/assets/image.jpg?ver=1.0.0" alt="イメージ画像">

おわりに

パラメータの方法を知るまでは、キャッシュクリアを依頼するか、ファイル名を変えるなどして対応していました。

ファイル名については管理できているうちはいいのですが、大規模サイトになればなるほどそれも難しい。それに度々「キャッシュの削除を・・・」というのは、やっぱり非効率。

今回の「バージョン」をつけて管理する方法が、お手軽且つ導入も簡単かなと思います。

注意点としては、変更忘れ。

バージョンがついていないファイルであれば、これまでのようにキャッシュクリアで直りますが、変更忘れをした場合は以前のデータを参照し続けます。この点は気をつけましょう！

functions.php（WordPress）の書き方はこちらに載せています。

関連記事【WordPress】CSSとJSをfunctions.phpで読み込んで出力する