こんな経験ありませんか？
Web制作会社の方から初稿の修正がきました。
という様な無駄なコミュニケーションコストがかかってしまい、お互い良い印象が持ちにくくなります。
こういった対応をなくしてお互い気持ちよく仕事をするための解決策をまとめています。
キャッシュとは
キャッシュとは、データや情報を一時的に保存する仕組みのことです。
例えば、ウェブブラウザにおいて、ウェブサイトを表示する際に、キャッシュ機能が使われます。
一度表示したウェブサイトは、再度アクセスした場合に再度サーバーから情報を取得せず、一度取得したデータをキャッシュに保存しておきます。
そのため、再度アクセスした場合には、ロード時間が短縮され、快適に閲覧することができます。
キャッシュが効いて更新されない
キャッシュは一見ウェブサイトの表示速度を上げるメリットがあるものの、開発者側からすると自動で更新されないので厄介です。
こういった自動で更新されない部分を開発者、クライアント、閲覧者が快適に閲覧をできる様にするのが今回の目的となります。
CSSのキャッシュを削除する方法
CSSを読み込む際は下記の様に<link>タグを使用して読み込みます。
こちらの記述にはクエリ（パラメータ）は使用されていないCSSを読み込んでいる状態となります。
<link rel="stylesheet" href="style.css">
キャッシュの影響を受けない様にするためには
CSSを読み込んでいる<link>タグの.cssの後に「?ver=1.0.1」
<link rel="stylesheet" href="style.css?ver=1.0.1">
この記述をするだけで、ブラウザ側で別のファイルだと認識してくれます。
「?ver=1.0.1」をクエリと言い、ここを自由に変更することも可能です。
例えば、
「?20230515」など更新した日にちを入れることも可能です。（2023年5月15日に更新した場合）
この辺りは特に指定はなく、分かりやすくアレンジすることも可能です。
WordPressのキャッシュを削除する方法
WordPressでキャッシュの影響を受けない様にしていきます。
functions.php内で読み込んでいるcssファイル、jsファイルを先ほどと同じ要領でバージョン管理していきましょう。
バージョンを「1.0.1」の様に入れることでWordPressでもキャッシュの影響を受けなくてよくなります。
wp_enqueue_style( 'common-style', get_theme_file_uri('/asset/scss-common/common.css'), array('reset-style'), '1.0.1');
wp_enqueue_style( 'slick-style', get_theme_file_uri('/asset/plugin/slick/slick.css'), array(), '1.0.1');
wp_enqueue_script( 'slick-script', get_theme_file_uri('/asset/plugin/slick/slick.min.js'), array( 'jquery' ), '20220315', true );
この「1.0.1」の部分をスタイルを変更するたびに「1.0.2」「1.0.3」の様に変えると管理もしやすくなります。
ポイント
バージョンを「1.0.1」の部分は「1.0.2」「1.0.3」と変更しなくても、キャッシュの影響を受けない様になります。
まとめ
キャッシュ削除方法についてまとめました。
キャッシュ削除のお願いをなくすことで工数の削減ができます。
クライアント側、開発者側どちらもコミュニケーションコストが削減できるので気持ちよく作業していきましょう！
