こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！
今回は、
サイトの修正をするたびにクライアントにキャッシュの削除をお願いせずに済む方法ない？
といった方に対する記事となります。
これを知らないとクライアントとのやりとりが増え、無駄な時間を消費してしまいます。
これは自分の時間はもちろん相手の時間も奪ってしまうことになるので、なるべく避けたい所です。
今回はこの無駄なやりとりを無くすための方法について解説していきたいと思います。
キャッシュとは？
まずキャッシュとは何かということから説明したいと思います。
パソコンやスマホはページを開いた際、ブラウザが画像などの情報を保存します。
そして次にそのページを開いた時にはその保持していた情報を元に、最初見たときより早くページを表示させることが出来ます。
ページの表示が遅くなるとサイトに訪れた人が離脱する確率が上がってしまうので、キャッシュはとても重要なものとなります（読み込みに3秒以上かかると50%以上の人が離脱すると言われています）
なので基本的にはキャッシュは「必要なもの」となります。
キャッシュのデメリットとは？
キャッシュは再度サイトを訪れた際に表示速度を早くしてくれる便利なものですが、デメリットも存在します。
それはブラウザがページのデータを保持しているので、画像やテキストなど更新してもすぐに反映されないことがあるということです。
Web制作をしていて修正をしたのに反映されない・・・どこか間違っているんだろうか？？
ということがあるかと思います。
そしてキャッシュを削除したら解決した、といったことはWeb制作に置いて超あるあるだと思います。
キャッシュの削除方法
キャッシュの削除方法はブラウザによって異なるので、ググって貰えばすぐ見つかると思います。
全部書くと長くなるのでこの記事では書きません（本題はそこじゃないのでw）
またchromeではClear Cacheという拡張機能を使うと簡単にキャッシュを削除することが出来ます。
自分でサイトの修正などをしてキャッシュを削除する分には問題ないのですが、クライアント側がその方法を知らない場合はやり方を説明して実行して貰う必要が出てきます。
実務ではサイトの修正は1度ではなく複数回あると思うので、これを毎回クライアント側にやらせてしまうと負担をかけさせてしまうことになります。
そしてクライアントが変わるたびに説明するのは自分にとってもしんどいので、このやりとりを無くす方法をこれから書いていきます。
URLパラメータ（GETパラメータ）を付ける
それではいよいよ本題です。
URLパラメータ・・・何やら難しそうな単語に聞こえますが、やる事は至って簡単です。
例えばcssの読み込みをするときは次のように書くと思います。
<link href="css/style.css" rel="stylesheet" />それをこのように書けばOKです。
<link href="css/style.css?ver=1.0.1" rel="stylesheet" />拡張子の後に?を付けてその後に適当にVer名や日付などを書きます。
?以降の書き方に決まりはないので、分かりやすいように書いておきましょう。
日付の場合だと次のようになります。
<link href="css/style.css?202006021" rel="stylesheet" />この数値を変えるとブラウザは別のファイルだと認識するので、キャッシュが保持されていても問題ありません。
またjsやimgタグでも同様です。
<script src="js/main.js?ver=1.0.1"></script><img src="img/profile.png?20200621" alt=""/>これでファイル名が同じままでもキャッシュを削除する必要がなくなります（更新するたびにファイル名を変えるわけにはいきませんからね）
WordPressの場合
WordPressの場合は以下のようにcssやjsをfunctions.phpから読み込んでいる人が多いと思います。
<?php
function my_script_init()
{ wp_enqueue_script( 'main', get_template_directory_uri() .'/js/main.js', array( 'jquery' ), '1.0.1', true );
wp_enqueue_style( 'style-name', get_template_directory_uri() .'/css/style.css', array(), '1.0.1' );
}
add_action('wp_enqueue_scripts', 'my_script_init');
?>この場合は拡張子の後ではなく、第4引数にある1.01がバージョン名にあたります。
更新するごとにこの数値を変えていけばOKです。
以上です。
やっている事は簡単ですがクライアントに負担をかけさせず、自分も無駄に時間を消費しないで済むのでぜひ活用しましょう。
