ウェブサイト開発時に、［CSS］や［JavaScript］が即時に反映されないケースが多々あります。
これはブラウザが［CSS］や［JavaScript］のキャッシュファイルを保持しているために、修正前のデータを参照してしまうために起こる問題です。

弊社オンズが制作している全てのサイトでも、レスポンス向上のためにキャッシュを利用していますが、何も対策を講じないと修正内容が反映されずに業務に支障が生じる場合もあります。
特に開発環境では頻繁にファイルを更新するため、変更を確実に反映させるテクニックを用いるべきです。

例えばブラウザ側で全てのキャッシュをクリアすれば解決しますが、ファイルに変更を加える度に必要になる作業なので、それも面倒です。
ショートカット（Safariならば「⌘＋Option＋E」）を用いれば一瞬で済みますが、できることならばシステムに組み込んでしまいたいものです。

ワードプレスの CSS ＆ JS の場合

WordPress でサイトを構築している場合、この問題を簡単に解決できる方法があります。

通常、［CSS］や［JavaScript］を読み込む際は以下のように記述しているかと思います。

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

これを以下のように書き換えます。

更新した時点の日時を取得する

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">

すると、スタイルシートの部分が「style.css?1409022003」というように、末尾にタイムスタンプ（クエリ情報）が付加された状態で吐き出されます。

自動で日時を取得する

<link rel="stylesheet" href="style.css<?php echo '?' . date('YmdHis'); ?>">

こちらでは「Y：年数」「m：月」「d：日」「H：時間」「i：分」「s：秒」を取得しています。

これによりブラウザに半ば強制的に最新のファイルを読み込ませることができます。
手動でファイル名の後ろにパラメータを書き加えるなどの手間もなく、キャッシュを有効化したままで開発にも専念できるので非常に便利な方法です。

画像ファイルの場合

画像データの場合でも、同じようなテクニックが使えます。
同じ名称の画像を上書きすると、やはりキャッシュのせいで古い画像が表示されてしまいますが、上書きした際、画像リンクに手を加え、以下のように記述します。

<img src="images/example.jpg?v=2.1" alt="サンプル画像" width="400" height="300">

CSS、JS同様にパラメータを付与することで、同じファイル名でも別物と認識させることができ、新しいファイルを読み込ませることが可能となるわけです。

特に、クライアントと何度も微調整を行うサイト構築の最終段階などでは、細かい点で混乱が生じる可能性が高いものです。
納品時にパラメータ部分の記述を削除して元のコードに戻せばいいだけなので不具合やデメリットは皆無。
サイト開発時には導入してはいかがでしょうか？