【Laravel】CSS更新時のキャッシュ消去を不要にする設定方法 - エンジニ屋.com(エンジニヤドットコム)

CSSを更新されたと聞きしましたが反映されてません

おかしいなー、、、、あっ、キャッシュ削除されました？

リリース後にクライアント様や社内の中で、このようなやりとりが出てくることがあります。

当記事では、このような問題が起きないようにCSS更新時に表示側が自動更新(キャッシュクリア不要)される設定方法を紹介します。

Laravelに限った話ではないですが、本記事はLaravelでの設定方法を解説します。

キャッシュとは

簡単に言うと”一時的に貯めておくデータ”のことで、このおかげで再びデータを読み込むときにより早く呼び出すことができる便利なものです。

しかしCSSファイルがキャッシュされていた場合、CSSの内容に変更があったとしてもキャッシュのデータが参照されてしまい変更前の表示が変わらないままといった現象がおきます。

その解決策としてCSSが更新された際は、ファイルパス名にクエリとして更新日時を付与して、更新されているかどうかを認識させるという方法をとりたいと思います。

自作のヘルパファイルを作成

ヘルパファイルにヘルパー関数を作成して対応します。

ヘルパー関数とは、どのPHPファイルからも呼び出せるグローバル関数のうち、PHP標準の関数ではないものというイメージです。

app/helper.phpを作成します。

<?php

if( ! function_exists('assets') ){
    function assets($path, $secure = null)
    {
        if( ! \File::exists($path) ){
            return asset($path, $secure);
        }
        $query = \File::lastModified($path);
        return asset($path . '?' . $query, $secure);
    }
}

解説

1行目のif( ! function exists('assets')で、これから作成するassets関数が既に存在しているかの念の為確認しています。(重複を避ける為)

2行目のfunction assets($path...で関数名と引数を設定しています。

4行目の!\File::exists($path)で指定先のpathにファイルが存在しない場合、trueとなりreturnで元から存在するasset()関数で通常の読み取りの動きとなります。もし画像が無い場合にノーイメージ処理などしている場合は、表側にno_imaga画像が表示されます。

今回大事なのは、ここからです。 7行目の\File::lastModified($path)で、取得先ファイルの最終更新日時を$query変数に格納しています。

8行目のreturn asset($path . '?' . $query, $secure);で通常のasset関数の$pathに?と$queryを追加しています。ここでは、$secureは気にしなくても大丈夫です。

実際に書いて表示を確かめてみよう

その前に自作のヘルパファイルを使用できるようにcomposer.jsonに記述します。

composer.json

"autoload": {
        "files": [
            "app/helper.php"
        ]
    },

autoloadの記述は既にあるはずなので、その中を追記してください。

記述した後に下記コマンドを実行

$ composer dump-autoload

これでbladeファイルから自作のヘルパー関数が呼び出せるになりました。

検証

検証用にtest_index.blade.phpを用意しました。 ※root連携から表示までの準備はここでは説明しません。

test_index.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="{{ assets('css/test.css') }}" rel="stylesheet">
    <title>test</title>
</head>
<body>
    <p>エンジニヤドットコム</p>
</body>
</html>

解説

public/css/test.css

.marker {
    color: #191970;
    text-decoration-line: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
  }

アンダーラインを付ける簡単なCSSを作成してみました。

検証ツールでコードを確認します。

f:id:enginiya:20220226224157p:plain

左側が検証画面で右側が表示画面です。

左側の赤い囲み部分を見るとクエリが追加されているのが分かります。 1645882476とあります。

lastModifedの数字は、最終更新日時を UNIX 元期 (1970 年 1 月 1 日の深夜 0 時) からのミリ秒数で表示されるようなのでこのような数字になります。

それでは、cssを少し変更を加えます。

public/css/test.css

.marker {
    color: #191970;
    text-decoration-line: underline;
    text-underline-offset: 10px; 
    text-decoration-thickness: 30px; 
  }

違いが分かりやすいようにアンダーラインをかなり太くしてみました。

検証画面でコードを確認します。 f:id:enginiya:20220226224202p:plain

先程の赤い囲み部分の数字"1645882625"と変わっているのがわかります。

まとめ

検証で確認したようにクエリを付与したおかげでCSSが変更されているかどうか判別できるようになりました。これでCSSが更新されるたびに表側表示も自動で変更されるようになったはずです。

お疲れ様でした~