制作時に便利なcssやjsへのクエリー文字列の付け方

Webサイトの制作時にcssやjsを編集後、テスト環境などで動作チェックをする際に、編集したはずのところが変わってなくてさんざん首をひねったがキャッシュのせいだった…、なんてことはコーダーあるあるだと思います。cssやjsのキャッシュ読み込み対策にはクエリー文字列を使う方法がありますが、今回はその記述に一工夫する方法を紹介します。

クエリー文字列を動的パラメーターで自動更新

以下のように記述することで、cssやjsファイルの更新日時をphpでクエリー部分へ自動的に反映し、ファイルに更新があった場合はクエリー文字列の効果でファイルを読み直す仕組みを実現できます。

<link href="/css/style.css?<?php = filemtime( "{$_SERVER['DOCUMENT_ROOT']}/css/style.css" ) ?>" rel="stylesheet" >

サーバ上でのパスを記述する必要があるのが注意点ですが、スーパーリロード忘れや、一部スマートフォンの強力なキャッシュ機能に対して有効な対策になります。

また、phpのtime関数を利用する方法もあります。time関数は出力内容を編集できるので、秒まで出力することでファイル更新の有無に関わらず毎回ファイルを読み直す、強力なキャッシュ対策として設定することができます。

<link href="/css/style.css<?php echo time(); ?>" rel="stylesheet" >

ページを表示するたび読み込みが発生するのでテスト環境などでの制作時に利用するのには便利ですが、本番公開時に導入するかはファイルの大きさや読み込みスピードを観察しながら検討しましょう。

まとめ

cssのパラメーターやjsの記述を微調整しながらブラウザでチェックする工程を繰り返していると、キャッシュによるファイルの更新されなさや、都度都度のスーパーリロード操作も、効率に影響してしまいます。制作時のチェック効率アップに利用してみてください。