イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

キャッシュについて深く反省してみる...

こんにちは、小柳津です。
突然ですが、皆様はCSSの修正をしてリリースした後に、
「表示が変わらない!」 「デザインが崩れた!ヤベー!!」 なんて経験はありませんか?

私はついこないだやらかしてしまいました…​

事象(フィクション)

下の画像は例えです。
以下の画像のようにリリース後にデザイン崩れが発生してしまいました…​
意図したようにはCSSが作用していないぞ!?!?

bugs.png?1

※画像はイメージです

原因

原因はCDNのキャッシュとブラウザのキャッシュでした。
ファイルの中身が変わったかどうかはパラメータが変更されているかで判断するように設定していました。
そして、CSSを呼び出しているところのパラメータを更新し忘れていて、
コンテンツ(ここではCSSの中身)に変更がないと判断されてしまいました。

CSSの中身を変更した場合、以下の画像のように呼び出しているCSSのパラメータを更新しなければ、 古いキャッシュが残ってしまい、思ったような表示がされない可能性があります。

para.png?1

※画像はイメージです

画像ではパラメータが?v1.0.0となっていますがこれを?v1.0.1のように変更する必要があります。

対策

じゃあ、これからJavaScriptやCSSのファイルを更新したときは、キャッシュが残るのを防ぐために、
忘れずに呼び出し先でパラメータを更新しようね!という教訓でした。

おしまい







とはなりません。

というか、分かっていてもこういった細かい対応は忘れがちですよね??

なので私は対策を考えました。git statusのコマンドで差分を確認するときに.css.jsのファイルの変更がある場合、
パラメータも変更してねというアラートを出せば、もれなく対応できるのではないかと。

実装

色々調べた結果、差分を確認するgit statusをベースにアラートを出すオリジナルのコマンドを自作することにしました。
実行パスの通っているディレクトリにgit-commandnameといった感じでファイルを作成すると、
git commandnameで作成したファイルの内容を実行できます。
ちなみに環境はmacOS Sierra 10.12.5で実装を行いました。

まずは実行パスが通っているディレクトリを調べます。

$ echo $PATH

/usr/local/binというディレクトリに実行パスが通っているのでそこにgit-stcというファイルを作成します。
git status check的な意味合いでこの名前にしました。

git-stcの内容

#!/bin/bash

#差分のあったファイルのパスを配列に格納
modified=(`git status | grep "modified" | awk '{print $2}'`)

for item in ${modified[@]}; do
    #差分のあったファイルのパスからファイル名を取得
    file=`echo ${item} | awk -F '/' '{print $NF}'`

    #差分のあったファイル名から拡張子を取得
    ext=`echo ${file} | sed -e "s/\([^.]*\)\(\.[^.]*\)*$/\2/"`

    #.jsと.cssのファイルに差分があったら、色付きでアラート出力
    if [ "${ext}" = ".js" ]; then
        echo -e "\033[1;42mjsファイルがあります。使用先のファイルのパラメータを更新してください\033[0;39m"
    fi
    if [ "${ext}" = ".css" ]; then
        echo -e "\033[1;42mcssファイルがあります。使用先のファイルのパラメータを更新してください\033[0;39m"
    fi
done

Shell Scriptで実装しました。
内容はとっても簡単。 git statusの情報からmodifiedの(差分のある)ファイルにCSSやJavaScriptのファイルがあれば、アラートを出すといった内容になっています。

実行結果はこんな感じ。

git stc.png?2

まあまあいい感じ!

ここから少し一手間を加えます。
~/.gitconfigファイルを編集し、エイリアスを設定してgit statusgit stcが同時に動くようにします。

[alias]
        st = !git status && git stc

このようにすれば、git stとコマンドを実行した時にgit statusgit stcが同時に動くようになります。

実行結果はこんな感じ。

git st.png

これなら、使用先のファイルのパラメータを忘れずに更新できるはず!

深く反省…​

今回はここで失礼します…​