Spring Bootのstaticとtemplatesフォルダの違いをわかりやすく解説!

こんにちは。ゆうせいです。

今日は、Spring Bootを初めて触る新人エンジニアの方に向けて、プロジェクト内でよく見かける「staticフォルダ」と「templatesフォルダ」の違いについて解説していきます。

「なんとなく分かった気になってるけど、正確には説明できないかも…」という人も多いこの2つ。しっかり理解して、今後の開発に自信を持てるようにしていきましょう!


そもそもSpring Bootって何?

簡単におさらいしておきます。

Spring BootはJavaでWebアプリケーションを作るためのフレームワークの1つです。複雑な設定を省略して、素早くWebアプリケーションを作れるのが特徴です。

Spring Bootでは「どこにどんなファイルを置くか」がとても大切。その中でも特によく登場するのが「staticフォルダ」と「templatesフォルダ」です。


staticフォルダとは?

静的ファイルを置く場所

staticフォルダには 静的ファイル(Static Files) を置きます。

静的ファイルとは?
内容が決まっていて、プログラム側から動的に変わらないファイルのことです。たとえば:

  • 画像(例:logo.png
  • CSS(例:style.css
  • JavaScript(例:main.js

これらは ユーザーがリクエストすればそのまま返される ファイルです。

例えで理解しよう!

たとえるなら「学校の掲示板に貼られたポスター」です。

誰が見ても中身は同じ。先生が変更しない限り内容は変わりません。誰かがリクエストしたら、そのままポスターを見せるだけです。


templatesフォルダとは?

テンプレートエンジンで処理されるファイル

templatesフォルダには テンプレートファイル を置きます。代表的なテンプレートエンジンは「Thymeleaf(タイムリーフ)」です。

テンプレートファイルとは?
プログラムによって中身が変わるHTMLファイルのことです。ユーザーごとに表示内容を変えるなど、サーバー側で加工されるファイルになります。

例えで理解しよう!

たとえるなら「注文を受けてから印刷する案内チラシ」です。

ユーザーが注文すると、名前や情報が自動で挿入されて、完成したチラシが渡されます。同じテンプレートを使っていても、渡す内容は人によって変わります。


処理の流れを図で確認!

以下の図で、ユーザーのリクエストに対してどんな処理がされるかを比較してみましょう。

【静的ファイル (static) の場合】

ブラウザ  →  /logo.png  →  サーバーがそのままファイルを返す

【テンプレートファイル (templates) の場合】

ブラウザ  →  /greeting  →  サーバーがHTMLを生成 →  ブラウザへ送信

よくあるファイル構成

src/
 └─ main/
     ├─ java/
     ├─ resources/
     │    ├─ static/      ← 静的ファイル(css, js, 画像など)
     │    │    ├─ style.css
     │    │    └─ logo.png
     │    └─ templates/   ← 動的に生成されるHTMLファイル
     │         └─ index.html

どちらを使えばいいの?

静的ファイルを使う場面

  • デザイン用のCSS
  • クライアント側で動くJavaScript
  • 画像やフォントなど変更されないリソース

テンプレートファイルを使う場面

  • ログインユーザーごとに内容が異なるページ
  • サーバー側でデータを埋め込んだHTML
  • エラー画面や動的な一覧表示

実際のコード例

templates/index.html(Thymeleafテンプレート)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1 th:text="'こんにちは、' + ${username} + 'さん!'">こんにちは!</h1>
</body>
</html>

コントローラーから渡されたusernameの値によって挨拶が変わります。

static/style.css

body {
    background-color: #f0f0f0;
}

このCSSはそのまま読み込まれ、全ユーザーに同じように適用されます。


よくある質問

Q. staticにHTMLを入れてもいいの?

入れても動きますが、サーバー側での処理はされません。
つまり、テンプレートとして使いたいなら、templatesに置くべきです。


まとめ表で違いをおさらい

フォルダ名用途主なファイル種類処理内容
static静的リソースCSS, JS, 画像等リクエストされたらそのまま返す
templates動的HTMLテンプレートHTML (Thymeleaf)サーバーがHTMLを生成して返す

今後の学習の指針

Spring Bootを使ったWebアプリ開発では、この2つのフォルダの使い分けが非常に重要です。次のステップとしては:

  • Thymeleafの構文をマスターして、テンプレートで柔軟なHTMLを作れるようにしましょう。
  • コントローラーとテンプレートの連携を学んで、入力→処理→出力の流れを理解しましょう。
  • 静的リソースのキャッシュやCDN利用など、パフォーマンス向上の知識もあると◎です。

しっかり使い分けて、キレイで分かりやすいプロジェクト構成を目指していきましょう!


セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します!
この記事に間違い等ありましたらぜひお知らせください。