Spring BootのETagとCache-Controlを完全解説！初心者でもわかるブラウザキャッシュ設計

Spring BootのETag/Cache-Control：ブラウザキャッシュを設計する

先生と生徒の会話形式で理解しよう

生徒

「ページの読み込みを速くしたいんですが、ブラウザキャッシュってどうやって使えばいいんですか？」

先生

「それならETagやCache-Controlヘッダーを使うといいですよ。Spring Bootではこれらを簡単に使える仕組みがあります。」

生徒

「キャッシュってなんとなくは分かるんですが、実際にどう設定するかまでは分からなくて…」

先生

「では、ETagやCache-Controlの基本から、Spring Bootでの実装まで、わかりやすく解説していきましょう！」

1. ブラウザキャッシュの基本とは？

「1. ブラウザキャッシュの基本とは？」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

1. ブラウザキャッシュの基本とは？

Webアプリケーションのパフォーマンスを向上させるために欠かせないのがブラウザキャッシュです。キャッシュを活用すれば、画像やJSONなどのレスポンスデータを一度取得すれば、次回以降はダウンロードせずに表示できるようになります。

代表的な仕組みには以下の2つがあります。

ETag：レスポンスのハッシュ値などを返して、変更がなければ304（Not Modified）を返す仕組み
Cache-Control：クライアント側で一定期間キャッシュを保存できるようにするヘッダー

2. Spring BootでETagを有効にするには？

Spring Bootでは、WebMvcConfigurerの設定でETagを簡単に有効化できます。下記のように設定ファイルに記述するだけです。


@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void configureContentNegotiation(ContentNegotiationConfigurer configurer) {
        configurer.favorPathExtension(false);
    }

    @Bean
    public FilterRegistrationBean<ShallowEtagHeaderFilter> shallowEtagFilter() {
        FilterRegistrationBean<ShallowEtagHeaderFilter> filter = new FilterRegistrationBean<>(new ShallowEtagHeaderFilter());
        filter.addUrlPatterns("/*");
        return filter;
    }
}

このShallowEtagHeaderFilterは、レスポンス内容のハッシュを自動で生成し、If-None-Matchリクエストヘッダーに基づいて304を返してくれます。

3. Cache-Controlでキャッシュ期間を明示的に設定

Cache-Controlヘッダーを使うことで、ブラウザに対してキャッシュの保存期間や動作を指示できます。Spring Bootでは以下のようにControllerで個別に設定できます。


@GetMapping("/static-content")
public ResponseEntity<String> getContent() {
    return ResponseEntity.ok()
        .cacheControl(CacheControl.maxAge(30, TimeUnit.DAYS))
        .body("キャッシュ可能なコンテンツ");
}

maxAgeの設定により、ブラウザはその間リクエストせず、キャッシュを使用します。CDNと組み合わせるとさらに効果的です。

4. 静的リソース（JS・CSS・画像）へのキャッシュ設定

「4. 静的リソース（JS・CSS・画像）へのキャッシュ設定」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

4. 静的リソース（JS・CSS・画像）へのキャッシュ設定

Spring Bootではapplication.propertiesで静的リソースのキャッシュ制御が可能です。


spring.web.resources.cache.cachecontrol.max-age=60d
spring.web.resources.cache.cachecontrol.cache-public=true

この設定により、/staticや/publicフォルダ内の画像やJavaScriptに対して、自動的にキャッシュヘッダーが付与されます。

5. ETagとCache-Controlを組み合わせて最適化

ETagとCache-Controlは、併用することで非常に高いパフォーマンスを発揮します。

まずはCache-Controlで期限内のアクセスをキャッシュで処理
期限が切れた場合、ETagによる304判定で再ダウンロードを回避

このように組み合わせることで、ユーザーにとっても快適で、サーバー負荷も軽減される仕組みを構築できます。

6. APIレスポンスにETagを独自に設定する方法

自動生成されたETagだけでなく、独自ロジックで生成したETagを手動で設定することも可能です。例えば、データベースの更新日時やハッシュを使って次のように実装できます。


@GetMapping("/api/data")
public ResponseEntity<String> getData(@RequestHeader(value = "If-None-Match", required = false) String ifNoneMatch) {
    String currentEtag = "\"123456789\"";

    if (currentEtag.equals(ifNoneMatch)) {
        return ResponseEntity.status(HttpStatus.NOT_MODIFIED).eTag(currentEtag).build();
    }

    return ResponseEntity.ok().eTag(currentEtag).body("データの内容");
}

If-None-Matchヘッダーが送信されたときに、それと一致すれば304を返すことで、効率的な通信が可能になります。

7. キャッシュ設計時の注意点

「7. キャッシュ設計時の注意点」の重要ポイントを、初心者の方にも分かりやすく簡潔に解説します。

7. キャッシュ設計時の注意点

キャッシュは便利ですが、設計を間違えると古いデータが表示されたままになるなどの不具合が発生します。以下のポイントを意識しましょう。

更新頻度が高いAPIにはキャッシュを使わない
ユーザー別のレスポンスにはキャッシュさせない
URLやパラメータでバージョン管理をする（例：?v=1.2）

まとめ

ETagとCache-Controlで理解するブラウザキャッシュ設計の全体像

本記事では、Spring Bootを使ったWebアプリケーション開発において重要なテーマである、ブラウザキャッシュの仕組みについて詳しく解説してきました。特に、ETagとCache-Controlという二つのHTTPヘッダーを中心に、なぜキャッシュが必要なのか、どのように設定すればよいのかを順を追って理解できたはずです。ブラウザキャッシュを正しく設計することで、ページ表示速度の向上だけでなく、サーバー負荷の軽減やネットワーク通信量の削減といった多くのメリットが得られます。

ETagは、レスポンス内容の識別子として機能し、クライアントが再リクエストを送った際に「内容が変更されているかどうか」を判定するために使われます。 Spring BootではShallowEtagHeaderFilterを利用することで、レスポンスボディのハッシュ値を元にしたETagを自動生成でき、一致していれば304ステータスを返す仕組みを簡単に導入できます。これにより、実際のデータ転送を行わずにレスポンスを完了できる点が大きな特徴です。

Cache-Controlによるキャッシュ期間の明示と効果

Cache-Controlヘッダーは、ブラウザや中間キャッシュに対して、「どのくらいの期間キャッシュを利用してよいか」を明確に指示する役割を持っています。 max-ageを指定することで、その期間中はサーバーへの再リクエスト自体が発生しなくなり、非常に高速なレスポンスを実現できます。静的リソースや更新頻度の低いAPIレスポンスに適用することで、ユーザー体験の向上に大きく貢献します。

Spring Bootでは、ControllerレベルでResponseEntityを使って個別にCache-Controlを設定したり、 application.propertiesで静的リソース全体に対してキャッシュ設定を行うことも可能です。これにより、JavaScriptやCSS、画像ファイルといった静的コンテンツを効率的に配信でき、 Webアプリケーション全体のパフォーマンスを底上げできます。

ETagとCache-Controlを組み合わせる設計の考え方

実践的なキャッシュ設計では、ETagとCache-Controlを単独で使うのではなく、それぞれの特性を活かして組み合わせることが重要です。 Cache-Controlで一定期間は完全にキャッシュを利用させ、その期限が切れた場合にETagで差分チェックを行うことで、不要なデータ転送を最小限に抑えられます。この設計は、APIレスポンスやJSONデータの配信において特に効果を発揮します。

また、独自ETagを実装することで、データベースの更新日時やバージョン情報を元にした、より精度の高いキャッシュ制御も可能になります。 Spring Bootでは、If-None-Matchヘッダーを受け取り、条件に応じて304を返す実装をControllerで柔軟に記述できる点も大きな魅力です。

キャッシュ設計で意識すべき注意点

キャッシュは強力な仕組みである一方、設計を誤ると古いデータが表示され続けるといった問題を引き起こします。ユーザーごとに内容が変わるレスポンスや、更新頻度の高いAPIについてはキャッシュを無効化する判断も必要です。 URLパラメータによるバージョン管理なども併用しながら、安全で分かりやすいキャッシュ戦略を立てることが大切です。

基本実装を振り返るサンプル

ここで、ETagとCache-Controlを使った基本的な実装例を振り返ってみましょう。 Spring Bootでは、少ないコードでキャッシュ制御を実現できる点が特徴です。


@GetMapping("/sample")
public ResponseEntity<String> sample() {
    return ResponseEntity.ok()
        .cacheControl(CacheControl.maxAge(7, TimeUnit.DAYS))
        .eTag("\"sample-etag\"")
        .body("キャッシュ対象データ");
}

このように、Cache-ControlとETagを同時に設定することで、ブラウザキャッシュを最大限に活用したレスポンス設計が可能になります。基本構文を理解しておくことで、さまざまなケースに応用できるようになります。

先生と生徒の振り返り会話

生徒

「ETagとCache-Controlの違いが、やっとはっきり分かりました。キャッシュって何となく使うものじゃないんですね。」

先生

「その通りだよ。キャッシュは仕組みを理解して設計することで、初めて本当の効果を発揮するんだ。」

生徒

「Spring Bootだと設定や実装が意外とシンプルで、実務でもすぐに使えそうだと感じました。」

先生

「そうだね。 ETagとCache-Controlを正しく使えるようになると、パフォーマンスを意識した設計ができるようになるよ。」

生徒

「まずは静的リソースからキャッシュ設定を試してみて、 APIにも応用してみたいです。」

先生

「いい流れだね。キャッシュ設計は経験を積むほど理解が深まるから、少しずつ試しながら身につけていこう。」

スタースクール：社会人向け実務教育プロジェクト

【職業訓練講師が直接指導】

社会人向けSpring Boot実務セミナー｜職業訓練講師が教えるWebシステム構築の極意

Java入門からSpring Boot実務まで。現場で絶賛される「設計の型」を最短距離で習得。

技術記事の内容を、自分の「スキル」へ変える。

職業訓練講師が最短攻略！社会人向けSpring Bootによる「商用Webシステム構築」の実践。

モダンJava開発の事実上の標準Spring Boot。本セミナーでは、その圧倒的利便性の核にある「DI（依存性の注入）」を完全解剖。「設定より規約」を体現した効率的なアーキテクチャ設計を学び、ThymeleafやSpring Data JPAを組み合わせた、現場で必須となるWebシステムの作り方を60分で濃縮体験します。