Spring Boot + Thymeleafの環境構築を完全ガイド！初心者でもわかる導入方法
新人
「Webアプリを作ってみたいんですけど、Spring BootとThymeleafって何ですか？」
先輩
「Spring BootはJavaでWebアプリを簡単に作れるフレームワークで、Thymeleafはその中でHTMLを作成するときに使うテンプレートエンジンなんだ。2つを組み合わせると、画面表示がとても簡単にできるようになるんだよ。」
新人
「そうなんですね！どうやって環境を整えるんですか？」
先輩
「じゃあ、Spring BootとThymeleafの基本から環境構築の手順を一緒に見ていこう！」
1. Spring BootとThymeleafとは？
Spring Bootは、JavaでWebアプリケーションを簡単に開発できるフレームワークです。面倒な設定が少なく、最小限のコードでアプリが作れるのが特徴です。
Thymeleaf（タイムリーフ）は、HTMLテンプレートエンジンで、HTMLの中にJavaのデータを埋め込んで画面表示ができます。HTMLファイルをそのままブラウザで確認できるのも魅力です。
- Spring Boot: サーバー側の処理を担当（データ処理・API作成）
- Thymeleaf: 画面表示を担当（HTMLにデータを表示）
2. 環境構築の概要（全体の流れと必要な準備）
Spring BootとThymeleafを使ったWebアプリを作るために、以下の手順で環境を構築します。
2.1 必要なもの
- Pleiades（プレアデス）: Eclipseベースの日本語対応IDE（統合開発環境）
- Java: Java 17以上を推奨
- Gradle: ビルドツールとして使用
2.2 環境構築の流れ
- Pleiadesをインストールする
- PleiadesでSpring Bootプロジェクトを作成
- Gradleで依存関係を追加（Thymeleaf、Spring Web）
- コントローラ作成とHTMLテンプレートの作成
- アプリケーションを実行して画面確認
2.3 Pleiadesのインストール手順
- Pleiades公式サイトから最新バージョンをダウンロードします。
- ダウンロードしたZIPファイルを解凍し、
eclipse.exeを実行します。 - 初回起動時にワークスペース（作業フォルダ）を指定します。
2.4 JavaとGradleのインストール確認
ターミナルまたはコマンドプロンプトで以下を実行し、バージョンが表示されればOKです。
java -version
gradle -v
実行結果（例）:
java version "17.0.2" 2022-01-18 LTS
graduate 7.4
2.5 Pleiadesでプロジェクト作成
- Eclipseを起動し、「ファイル」 → 「新規」 → 「Spring スタータープロジェクト」を選択します。
- プロジェクト名を入力し、「Type」は
Gradle (Groovy)を選択します。 - パッケージ名やJavaバージョンを指定します（例:
com.example.demo）。 - 次の画面で依存関係を追加します。以下をチェックしてください。
- Spring Web
- Thymeleaf
- 完了を押してプロジェクトを作成します。
2.6 依存関係が追加されたbuild.gradleの例
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
}
この設定により、ThymeleafとSpring BootのWeb機能が使えるようになります。
3. Pleiadesでのプロジェクト作成手順
Pleiadesを使用してSpring Boot + Thymeleafプロジェクトを作成する手順を説明します。初心者でも迷わず進めるように、画面操作の流れを詳しく解説します。
3.1 プロジェクト作成の流れ
- Pleiadesを起動し、メニューから「ファイル」 → 「新規」 → 「Spring スタータープロジェクト」を選択します。
- プロジェクト名を入力します。（例:
spring-thymeleaf-demo） - Typeを
Gradle (Groovy)に設定し、Java バージョンを選択します。（推奨: Java 17） - グループ名（例:
com.example）とアーティファクト名（例:demo）を入力します。 - 依存関係の選択画面で以下をチェックします。
- Spring Web
- Thymeleaf
- 「完了」をクリックすると、プロジェクトが自動的に作成されます。
3.2 作成後のディレクトリ構造
spring-thymeleaf-demo/
├─ src/
│ ├─ main/
│ │ ├─ java/com/example/demo/
│ │ │ └─ DemoApplication.java
│ │ │ └─ controller/
│ │ │ └─ HomeController.java
│ │ ├─ resources/
│ │ │ ├─ static/
│ │ │ ├─ templates/
│ │ │ │ └─ home.html
│ │ │ └─ application.properties
└─ build.gradle
このような構成が自動生成されます。templatesフォルダにHTMLファイルを置き、controllerにJavaのコントローラを作成します。
4. Gradleの設定と依存関係の追加方法
Pleiadesで依存関係を選んだ場合、自動でbuild.gradleが更新されますが、手動で確認・修正することも重要です。
4.1 build.gradleの基本設定
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
}
この設定で、Spring BootのWeb機能とThymeleafが利用可能になります。
4.2 Gradleの同期方法
- Pleiadesの右上にある「Gradle」タブをクリックします。
- 「プロジェクトをリフレッシュ」を選択し、依存関係を同期させます。
- ターミナルで以下を実行しても反映できます。
./gradlew build
成功すると、依存ライブラリがプロジェクトに追加されます。
5. 最初のコントローラとビューの作成（Hello Worldの表示）
ここからは実際に画面を表示させるためのコードを作成します。まずは簡単な"Hello World"を表示してみましょう。
5.1 コントローラの作成
src/main/java/com/example/demo/controllerフォルダにHomeController.javaを作成し、以下のコードを記述します。
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home(Model model) {
model.addAttribute("message", "Hello World!");
return "home"; // templates/home.html を参照
}
}
@Controllerを使用し、URLのルート（"/"）にアクセスしたときにhome.htmlを表示します。
5.2 ビュー（HTMLテンプレート）の作成
src/main/resources/templatesフォルダにhome.htmlを作成し、以下の内容を記述してください。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello World</title>
</head>
<body>
<h1 th:text="${message}">デフォルトメッセージ</h1>
</body>
</html>
th:textでコントローラから渡された"message"の値が表示されます。
5.3 アプリケーションの実行と確認
- Pleiadesでプロジェクトを右クリック → 「Spring Boot アプリケーションとして実行」を選択します。
- ブラウザを開き、以下のURLにアクセスします。
http://localhost:8080/
実行結果:
Hello World!
画面に"Hello World!"が表示されれば成功です！これで、Spring Boot + Thymeleafの基本的な構成が完成しました。
6. 実行と動作確認方法
ここでは、Spring Boot + Thymeleafプロジェクトを実行し、正しく動作しているか確認する方法を説明します。初心者でも迷わないように、手順を詳しく解説します。
6.1 アプリケーションの実行方法
- Pleiadesで作成したプロジェクトを右クリックします。
- 「実行」 → 「Spring Boot アプリケーション」を選択します。
- コンソールに以下のようなメッセージが表示されたら、正常に起動しています。
Tomcat started on port(s): 8080 (http) with context path ''
Started DemoApplication in 3.456 seconds (JVM running for 4.123)
6.2 ブラウザでの動作確認
- ブラウザを開き、以下のURLにアクセスしてください。
http://localhost:8080/
実行結果:
Hello World!
ブラウザに"Hello World!"と表示されていれば、環境構築と基本的な画面表示が成功です。
7. よくあるエラーとその解決方法
開発中に発生しやすいエラーとその解決策を紹介します。初心者がつまずきやすいポイントを中心に解説します。
7.1 ポートが既に使用されています
エラーメッセージ:
Port 8080 was already in use.
このエラーは、ポート8080がすでに他のアプリケーションで使用されている場合に発生します。
解決方法:
- 使用中のプロセスを停止する。
application.propertiesに以下を追加して、ポートを変更する。
server.port=8081
7.2 テンプレートが見つかりません
エラーメッセージ:
Template "home" not found
原因: home.htmlがtemplatesフォルダにない、または名前が間違っている場合。
解決方法:
src/main/resources/templatesにhome.htmlが正しく配置されているか確認。- ファイル名が正しいか再確認。
7.3 依存関係のエラー
エラーメッセージ:
Could not resolve all files for configuration ':compileClasspath'.
原因: Gradleの同期に失敗している場合。
解決方法:
- Pleiadesで右クリック → 「Gradle」 → 「プロジェクトをリフレッシュ」を選択。
- 以下のコマンドでも修正可能です。
./gradlew build --refresh-dependencies
8. 次の学習ステップとおすすめの勉強方法
環境構築と基本的な画面表示ができたら、次のステップとして以下を学んでいくとスキルアップに繋がります。
8.1 フォーム処理の学習
ユーザーからの入力を受け取る方法を学ぶことで、より実用的なWebアプリが作成できます。以下を試してみましょう。
- 入力フォームの作成
- データの受け取りと表示
- バリデーション処理
8.2 データベースとの連携
Spring Data JPAを使うことで、簡単にデータベースと連携できます。基本的な操作を学びましょう。
- エンティティクラスの作成
- リポジトリの利用方法
- データの登録・更新・削除
8.3 セキュリティの導入
簡単なアプリが完成したら、Spring Securityでユーザー認証を追加してみましょう。
- ログイン・ログアウト機能の追加
- アクセス制限の設定
8.4 おすすめの勉強方法
- 公式ドキュメントの活用: Spring BootやThymeleafの公式ガイドは最新情報が豊富です。
- 小さなアプリ作成: TODOアプリや簡単な掲示板を作成して、実践的に学ぶ。
- 動画学習: YouTubeなどの無料講座を活用する。
これで、Spring Boot + Thymeleafを使った環境構築から基本的な実行までをマスターできます。次は実践的な機能追加に挑戦してみましょう！
まとめ
Spring Boot と Thymeleaf 環境構築の振り返り
この記事では、Spring Boot と Thymeleaf を組み合わせた Web アプリケーション開発の第一歩として、環境構築から実行確認までの流れを丁寧に確認してきました。Java を使った Web 開発は設定が難しいという印象を持たれがちですが、Spring Boot を利用することで、従来必要だった複雑な設定を大幅に省略できます。その結果、初心者でも短時間で Web アプリケーションを起動し、画面表示まで到達できる点が大きな特徴です。
また、Thymeleaf をテンプレートエンジンとして採用することで、HTML と Java の役割を明確に分けながら開発を進められます。Thymeleaf は HTML ファイルをそのままブラウザで確認できるため、画面構造を直感的に理解しやすく、デザイナーとの分業やフロントエンド学習の入口としても非常に相性が良い技術です。Spring Boot と Thymeleaf を組み合わせることで、バックエンドと画面表示をバランスよく学べる環境が整います。
環境構築で特に重要なポイント
環境構築の段階で重要だったのは、Pleiades を利用したプロジェクト作成手順と、Gradle による依存関係管理です。Spring スタータープロジェクトを使用することで、Spring Web や Thymeleaf といった必要なライブラリを簡単に追加できました。build.gradle に定義された依存関係を確認する習慣を持つことで、エラー発生時の原因特定やライブラリ理解にもつながります。
さらに、ディレクトリ構成を理解することも重要でした。controller パッケージにはリクエストを処理するクラスを配置し、templates フォルダには Thymeleaf の HTML テンプレートを置くという基本構造を押さえることで、Spring Boot の Web アプリ全体の流れが見えてきます。この構成を理解することが、今後の機能追加や保守作業をスムーズに進める土台になります。
サンプルプログラムで理解する処理の流れ
今回作成した Hello World のサンプルでは、コントローラからビューへデータを渡す基本的な仕組みを確認しました。@Controller アノテーションを付与したクラスでリクエストを受け取り、Model を使ってデータを渡し、Thymeleaf の th:text 属性で画面に表示する流れは、Spring Boot + Thymeleaf 開発の基本形です。
@Controller
public class HomeController {
@GetMapping("/")
public String home(Model model) {
model.addAttribute("message", "Hello World!");
return "home";
}
}
このように、Java 側で設定した値が HTML テンプレートに反映される仕組みを理解できれば、一覧表示やフォーム入力、条件分岐など、より実践的な画面作成へと発展させることができます。基礎をしっかり押さえることが、後の学習効率を大きく高めてくれます。
生徒：「Spring Boot と Thymeleaf の環境構築って、最初は難しそうだと思っていましたけど、手順通り進めたら意外と理解できました。」
先生：「そう感じられたなら良いですね。Spring Boot は最初の壁を低くしてくれるので、初心者にはとても向いています。」
生徒：「コントローラと HTML の役割が分かれいて、処理の流れが見えやすいのも印象的でした。」
先生：「それが Thymeleaf の強みです。HTML を書きながら、サーバー側の処理も自然に理解できます。」
生徒：「次はフォームやデータベース連携にも挑戦してみたいです。」
先生：「今回学んだ基礎があれば大丈夫です。少しずつ機能を追加しながら、Spring Boot と Thymeleaf に慣れていきましょう。」
この記事を読んだ人からの質問
