WEBサービス開発中にページで読み込んでいるモジュールが更新されなくなったらスーパーリロードすればいい

WEBツールやサービスの開発を行なっていると、キャッシュ問題に悩まされる事がしばしばある。 これは、WEBエンジニアではアルアルであるのと、本番での不具合につながりサービス障害になり得る自称なため、WEBサービスにかかわる人は知っておかなければいけない知識でもある。 さらに言うと、WEBサービスを利用するユーザーもサイトの不具合を理解できるように知っておくべき事なので、「キャッシュ問題を解決するためのスーパーリロード」という操作を覚えておこう。

キャッシュ問題とは

ここで言う「キャッシュ問題」は、WEBページが正常に更新されないという不具合の事を指します。 WEBサービス開発時や、サービスを機能改修した直後などに起こりがちな不具合で、WEBページでセットされているCSSやJavascriptなどが新しく更新したファイルが読みこまれずに、古い状態で読みこまれてしまい、結果的に不具合になってしまう状態です。 何故こういう事象が発生するかというと、WEBブラウザの特性を知らなければいけないのですが、WEBブラウザには、基本的にキャッシュ機能というのがデフォルトで備わっており、何度も同じサイトを閲覧するときに、そのサイトで共通で使われているモジュール（CSS、Javascript、html、画像ファイル）などは、ブラウザのキャッシュ領域に保存して、再利用するという機能です。 こんな邪魔な機能は無くしてしまえ！と考える人もいるかもしれませんが、実はこのキャッシュという機能は非常に便利で、スマートフォンなどでインターネットサイトを見るときに、モジュールのパケット転送が発生してしまいますが、ブラウザのキャッシュエリアに格納されているデータは、インターネットパケットを利用せずに使う事ができるため、パケットの節約になります。 そうする事で、WEBパケットのデータ容量が制限されているようなプロバイダーを利用しているユーザーなどは知らないうちに恩恵を受けていると考えてもいいでしょう。 基本的に画像ファイルなどは、容量も大きく、同じデータを何度もインターネットでダウンロードするだけで、すぐに数十、数百MBぐらい使ってしまいがちです。 開発現場では、邪魔者扱いされがちなキャッシュ機能ですが、ユーザーとインターネットパケットに優しい機能であると認識しておきましょう。

スーパーリロードとは

実はそれぞれのブラウザには、こうしたキャッシュデータを削除できる機能が備わっており、ほとんどもブラウザが、環境設定画面の、「閲覧履歴データを消去する」というようなボタンが用意されています。 ちなみに、GoogleChromeは、こんな感じ。 しかし、いちいち環境設定画面を開いて履歴データをクリアするのはめんどくさい上、今開いているページに関するキャッシュデータだけ更新したい場合は、「スーパーリロード」という機能を使うといいでしょう。 スーパーリロードは、すべてのブラウザに用意されているわけではなく、ブラウザ毎にショートカットやコマンド、呼び名が違うので、今回はGoogleChromeに関してのみ説明します。 GoogleChromeの「スーパーリロード」は、デバッグコンソールモードの時のみ使う事ができ、以下のように操作する事で、実行されます。

Macの場合は、[Control] + 更新ボタン または、[Shift] + [Command] + [R] Windowsの場合は、[Command] + 更新ボタン または、[Shift] + [F5]

古いバージョンでは、そのまま利用できたのですが、最新バージョン（現在は、バージョン: 70.0.3538.77）では、デバッグコンソールを開いていないといけないと言う事で開発機能になったと考えられます。 デバッグコンソールの表示方法は、メニュー項目 - 「表示」-「開発/管理」-「ディベロッパーツール」で表示されます。

WEBエンジニアが気をつけるべきキャッシュ対策

このページを読んでいるのはWEBエンジニアの人が多いと思いますが、WEBページ開発の時にやるべきキャッシュ対策は、基本的には、読み込むモジュールにクエリデータをつけるというように解説されているサイトがありますが、闇雲な値を入れている場合も少なくないようです。 例えば、読み込むたびに値が変わるように、日時"YYYYMMDDHHIISS"とすると、2018.11.08 08:00:00のタイミングで「20181108080000」という値が付与され、javascriptのsrcには、src="hoge.js?20181108080000"という風になり、１秒ごとに、キャッシュがクリアされる状態が作れる。 しかし、これでは、ほぼすべてのタイミングで都度データダウンロードがされてしまい、キャッシュ機能自体を殺してしまいます。 次にこれを、"YYYYMMDDHHII"とすると分単位、"YYYYMMDDHH"とすると時間単位、"YYYYMMDD"とすると単位でキャッシュ管理をする事ができますが、モジュール更新時に古いモジュールが読み込まれてしまうタイミングが発生してしまい、結果不具合発生する可能性ができてしまいます。 これを防ぐには、日時でのキャッシュIDを発行せずに、プログラムバージョンをクエリに付与するようにすれば基本的にキャッシュ機能を利用できる上、不具合が発生する可能性も皆無になります。 "hoge.js?ver=1.0.1"と言う風にするだけでいいのです。 おそらくWEB配信のフレームワークなどにこうしたバージョン発行する機能が備わっていると思うので、そうしたセオリーを覚えておくだけで、キャッシュ問題からは解放されるため、無駄な時間を費やさずに済むようになります。 Hava a Good develop time !