はじめに
この記事は「コドモンAdvent Calendar 2025」1日目の記事です🎅
こんにちは！コドモンの岡村亮太です！
最近めっきり寒くなってきましたね。
朝の布団から出るスピードが、だんだん "冬仕様" になってきました。
そして気づけば今年もアドベントカレンダーの季節！！🎄✨
コドモンのアドベントカレンダー初日を担当させていただきます。初日はやっぱり特別感がありますね。というわけで、気合いを入れてスタートダッシュしていきたいと思います！💨
さて、本題です。
開発中、ずっと気になっていたことがありました。
<!-- なにこれ？ --> <link rel="stylesheet" href="/css/style.8a3f2b91.css"> <script src="/js/app.js?v=2.1.5"></script>
CSSやJSのファイル名に付いている「8a3f2b91」とか「?v=2.1.5」って何だろう？
なんとなくスルーしていたのですが、ようやく理解できたので、今回はこの謎の文字列の正体について共有したいと思います！
実はこれ、キャッシュバスティングという、Webエンジニアなら知っておきたい重要な仕組みだったんです。
きっかけ：検証ツールで見つけた謎のファイル名
コドモンでの開発中、検証ツール（DevTools）のNetworkタブを開いた時のことです。
style.8a3f2b91.css app.bundle.7d4c8e2f.js vendor.chunk.abc123def456.js main.css?v=2.1.5
「なにこれ...ランダムな文字列？バグ？」
「v=2.1.5って...何のバージョン？」
「style.8a3f2b91.cssって...誰かタイポしちゃった？」
正直よくわからなかったので、先輩エンジニアに聞いてみました。
先輩「それはブラウザのキャッシュをうまく使うための仕組みだよ」
私「キャッシュを使う...ですか？」
先輩「そう。一度ダウンロードしたCSSやJSをブラウザが覚えておいてくれれば、2回目以降のアクセスが速くなるでしょ？」
私「なるほど！でも、それとファイル名の文字列がどう関係するんですか？」
先輩「ナイス質問！実はキャッシュを使う上で気をつけないといけないことがあるんだよ」
ブラウザキャッシュの落とし穴
先輩「ブラウザはURLをキーにしてキャッシュを管理してるんだ。」
<!-- 月曜日：バグのあるCSS --> <link rel="stylesheet" href="/css/style.css"> <!-- 火曜日：修正版をデプロイ --> <link rel="stylesheet" href="/css/style.css"> <!-- 同じURL！ -->
先輩「同じURLだと、ブラウザは『もう持ってるから新しく取りに行かない』って判断しちゃうんだよ」
私「えっ、じゃあ修正が反映されない...？」
先輩「そう！だからURLを変える必要があるんだよね！」
解決策：キャッシュバスティング
<!-- ファイル内容が変わったらハッシュ値も変わる --> <link rel="stylesheet" href="/css/style.8a3f2b91.css"> <!-- ↓ 修正後 --> <link rel="stylesheet" href="/css/style.e5f6a7b8.css"> <!-- またはバージョン番号を付ける --> <script src="/js/app.js?v=2.1.5"></script> <!-- ↓ 修正後 --> <script src="/js/app.js?v=2.1.6"></script>
私「なるほど！URLが変われば新しいファイルとして認識されるんですね」
先輩「そうそうそう！これでキャッシュの恩恵を受けながら、更新も確実に反映できるんだ」
CDN環境だとさらに重要
先輩「うちはCDNも使ってるから、この仕組みがさらに重要になるんだよ」
私「CDN...？？？」
先輩「Content Delivery Networkの略。世界中にサーバーを置いて、ユーザーに近い場所からコンテンツを配信する仕組みだよ」
私「なるほど、だから高速になるんですね」
[ブラウザ] → [CDN] → [サーバー]
↑
ここでもURLベースでキャッシュ
先輩「CDNもURLをキーにしてコンテンツをキャッシュするんだ」
先輩「だからキャッシュバスティングはCDNとも相性がいいんだよね」
CDNもURLベースでコンテンツをキャッシュするので、キャッシュバスティングがないと：
- CDNが古いファイルを配信し続ける
- 世界中のユーザーに影響が出る
- 手動でCDNのキャッシュをクリアする必要がある
私「だから絶対に必要な仕組みなんですね！」
先輩「でも、Cache-Controlヘッダーとかの指定次第なんだけどね」
私「Cache-Controlヘッダー....? 勉強してきます！！」
まとめ
最初は謎だった文字列の正体は、キャッシュバスティングという重要な仕組みでした。
これにより：
- ✅ キャッシュによる高速表示
- ✅ 更新時の確実な反映
- ✅ CDN環境での安定運用
が実現できるんです。
今では検証ツールでハッシュ値を見ると「はいはい、あれね」とニヤニヤするようになりました😊
知ってることが増えるのは楽しいですよね！！
ちなみに、私の財布からもキャッシュはすぐに揮発してしまうのですが、良い永続化方法をご存知の方はぜひ教えてください...
最後まで読んでいただきありがとうございました！
明日からもコドモンのアドベントカレンダーは続きます！
毎日いろんなメンバーが登場するので、ぜひチェックしてくださいね〜！！🎄✨
