0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Spring入門】第4章 最初の Spring Boot アプリ

0
Last updated at Posted at 2026-09-29

いよいよ Eclipse で Spring Boot のプロジェクトを作ります。データベースへの接続を設定し、ブラウザに「Hello, Spring Boot!」と表示するところまで進めましょう。

この章で学ぶこと

  • Eclipse で Spring Boot のプロジェクトを作成する方法
  • Spring Boot プロジェクトのフォルダー構成
  • application.properties でデータベースの接続を設定する方法
  • アプリの起動と停止のしかた
  • Controller とテンプレートを使って、画面を1枚表示する方法

4.1 プロジェクトを作成する

Eclipse では、アプリを作るためのファイル一式を プロジェクト という単位で管理します。Pleiades には Spring 開発用のプラグイン(Spring Tools)が最初から入っているので、画面の操作だけで Spring Boot のプロジェクトを作れます。

【ご注意】インターネット接続が必要です

プロジェクトの作成時には、Spring の公式サイト(start.spring.io)からプロジェクトのひな形をダウンロードし、必要なライブラリも取得します。インターネットにつながった状態で操作してください。

ウィザードを開く

  1. Eclipse を起動し、メニューから ファイル → 新規 → Spring スターター・プロジェクト (Spring Initializr) を選びます。

new-menu.png
図4-1 ファイル → 新規 → Spring スターター・プロジェクト

  1. 「新規 Spring スターター・プロジェクト」画面が表示されます。

【知識メモ】ウィザードとは

質問に順番に答えていくと、必要なファイルを自動で作ってくれる画面のことです。Eclipse では、プロジェクトやクラスを作るときによく使います。

プロジェクトの基本情報を入力する

「新規 Spring スターター・プロジェクト」画面で、次のように入力します。表の 色付きの値 が、自分で入力・変更する項目 です。それ以外は、最初から入っている値のままでかまいません。

項目 入力する値 意味
サービス URL https://start.spring.io ひな形を作ってくれるサイト(最初から入力されている)
名前 employee-app Eclipse 上のプロジェクト名
タイプ Maven ライブラリの管理に Maven を使う(最初は Maven 以外が選ばれていることがあるので、必ず変更する)
パッケージング Jar 完成したアプリをまとめるファイルの形式
Java バージョン 17 使う Java のバージョン
言語 Java プログラミング言語
グループ com.example 作る人・組織を表す名前
成果物 employee-app アプリの名前
バージョン 0.0.1-SNAPSHOT アプリのバージョン(そのままでよい)
説明 (任意) アプリの説明。空欄やそのままでもよい
パッケージ com.example.employeeapp Java のクラスを置くパッケージ

【再確認】「次へ」を押す前に、もう一度確認!(間違えやすい2か所)

  • タイプ が Maven になっていますか? 最初は別のもの(Gradle など)が選ばれていることがあり、Maven に変え忘れる人がとても多い 項目です。Maven 以外のままだと、この教材の手順どおりに進められません。
  • パッケージ が com.example.employeeapp になっていますか? 名前を入力すると、自動で com.example.employee-app や com.example.employee_app、com.example.demo のように入ることがあります。ハイフンやアンダースコアのない com.example.employeeapp に直してください。以降の章のコードは、すべてこのパッケージ名を前提にしています。

starter-page1.png
図4-2 基本情報を入力したところ(赤枠が、自分で入力・変更する項目)

入力できたら 次へ を押します。

Spring Boot のバージョンと依存関係を選ぶ

次の画面では、Spring Boot のバージョンと、アプリで使う機能(依存関係)を選びます。

  1. Spring Boot バージョン で、4.x の 最新の安定版 を選びます(執筆時点では 4.1.1)。
    SNAPSHOT や M1・M2・RC1 などが付いたものは開発中の版なので選びません。下の図では、4.2.0 (SNAPSHOT)、4.2.0 (M2)、4.1.2 (SNAPSHOT) は開発中の版で、何も付いていない 4.1.1 が最新の安定版です。

starter-version.png
図4-3 Spring Boot バージョン(何も付いていない最新の版を選ぶ)

  1. 次の5つの依存関係にチェックを付けます。「使用頻度高」の一覧にないものは、「使用可能」の検索ボックスに名前を入力すると見つかります(下の図は oracle で検索して Oracle Driver にチェックを付けたところです)。

starter-deps.png
図4-4 依存関係を選んだところ(赤枠の5つにチェックを入れると、右の「選択済み」に5つ並ぶ)

依存関係 何のために使うか
Spring Web Web アプリを作るための基本機能(Spring MVC と組み込みサーバーの Tomcat)
Thymeleaf 画面の HTML にデータを埋め込むテンプレートエンジン
Spring Data JPA データベースを操作するための機能
Oracle Driver Java から Oracle Database に接続するための部品(JDBC ドライバー)
Validation 入力内容をチェックする機能(「選択済み」には日本語で「検証」と表示される)。第13章の入力チェックで使う

画面右側の「選択済み」に5つが並んでいることを確認したら、完了 を押します。「使用頻度高」にある Spring Boot DevTools など、ほかのものは選びません。

ライブラリのダウンロードを待つ

完了を押すと、「パッケージ・エクスプローラー」に employee-app プロジェクトが現れます。同時に、Eclipse の右下に進捗状況が表示され、必要なライブラリのダウンロードが始まります。初回は数分かかる ことがあるので、進捗表示が消えるまで待ちましょう。第2章で出しておいた「進行状況」ビューでも、ダウンロードの進み具合を確認できます。

progress-download.png
図4-5 「進行状況」ビューにダウンロードの進み具合が表示される

【知識メモ】Maven は Eclipse が動かしています

ライブラリのダウンロードやプロジェクトの設定は、Maven という道具が行っています。この教材では、Maven を自分で操作することはありません。Eclipse が裏側で Maven を動かしてくれます。

【ご注意】プロジェクトに赤い×印が付いたままのとき

ダウンロードが途中で失敗すると、プロジェクトに赤い×印が付くことがあります。その場合は、プロジェクトを選んでから、メニューの プロジェクト → Maven プロジェクトの更新(Alt + F5)を選びます。表示された画面で、次の2つを確認して OK を押してください。ライブラリの取得がやり直されます。

  • employee-app にチェックが入っていること
  • 「スナップショット/リリースの更新を強制」にチェックが入っていること(入っていなければ、必ずチェックを入れる)

maven-update-menu.png
図4-6 プロジェクト → Maven プロジェクトの更新

maven-update-dialog.png
図4-7 Maven プロジェクトの更新(employee-app と「スナップショット/リリースの更新を強制」にチェックを入れて OK)

【再確認】「スナップショット/リリースの更新を強制」は必ずチェックする

このチェックを入れると、ダウンロード済みのライブラリがあっても、インターネットから取り直して確実に最新の状態にしてくれます。チェックを入れずに更新すると、途中で壊れたファイルがそのまま使われ、赤い×印が消えないことがあります。

この操作は、プロジェクトを作った直後だけでなく、作業の途中でライブラリがおかしくなったときにも使えます。Maven はダウンロードしたライブラリを、パソコンの C:\Users\(ユーザー名)\.m2 というフォルダ(ローカル・リポジトリ)に保存しておき、次からはそれを使います。ダウンロードの途中で通信が切れたりしてここのファイルが壊れると、急にたくさんのエラーが出ることがあります。そのようなときも、「スナップショット/リリースの更新を強制」にチェックを入れて「Maven プロジェクトの更新」を行えば、多くの場合は直ります。

4.2 プロジェクトの構成を知る

パッケージ・エクスプローラーで employee-app の左の矢印を押して、中身を開いてみましょう。次のような構成になっています。

explorer-created.png
図4-8 パッケージ・エクスプローラーで見たプロジェクトの構成

employee-app の構成
employee-app
├─ src/main/java                  … Java のソースコードを置く場所
│   └─ com.example.employeeapp
│       └─ EmployeeAppApplication.java   … アプリを起動するクラス
├─ src/main/resources             … Java 以外のファイルを置く場所
│   ├─ static                     … 画像・CSS などをそのまま置く場所
│   ├─ templates                  … 画面のテンプレート(HTML)を置く場所
│   └─ application.properties     … アプリの設定ファイル
├─ src/test/java                  … テスト用のソースコードを置く場所
├─ Maven 依存関係                 … ダウンロードされたライブラリの一覧
└─ pom.xml                        … 使うライブラリなどが書かれたファイル
場所 役割 この教材で扱うか
src/main/java Controller や Entity などの Java クラスを置く 第4章〜 たくさん扱う
src/main/resources/templates Thymeleaf で書く画面の HTML を置く 第4章〜 たくさん扱う
src/main/resources/static CSS や画像など、加工せずにそのまま返すファイルを置く 第8章で CSS を置く
application.properties データベースの接続先など、アプリの設定を書く この章で扱う
src/test/java プログラムが正しく動くかを確かめるテストを置く 第7章の任意の節で少し扱う
Maven 依存関係 ウィザードで選んだ依存関係に必要なライブラリ(jar ファイル)の一覧 見るだけ
pom.xml このプロジェクトが使うライブラリの一覧が書かれたファイル 必要に応じて編集することもある(この教材では編集しない)

アプリを起動するクラス

EmployeeAppApplication.java をダブルクリックして開いてみましょう。ウィザードが自動で作ったクラスです。

src/main/java/com/example/employeeapp/EmployeeAppApplication.java
package com.example.employeeapp;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class EmployeeAppApplication {

    public static void main(String[] args) {
        SpringApplication.run(EmployeeAppApplication.class, args);
    }

}
  • @SpringBootApplication:このクラスが Spring Boot アプリの出発点であることを表す アノテーション です。このクラスがあるパッケージ(com.example.employeeapp)と、その下のパッケージにあるクラスを Spring が自動で探してくれます。
  • main メソッド:これまでの Java のプログラムと同じく、ここから実行が始まります。SpringApplication.run(...) を呼ぶと、Spring が起動し、組み込みの Tomcat(Web サーバー)が動き始めます。

【知識メモ】アノテーションとは

@ で始まる @SpringBootApplication のような記述を アノテーション といいます。クラスやメソッドに付ける「目印」で、Spring はこの目印を見て「このクラスをどう扱うか」を判断します。Spring では、たくさんのアノテーションを使います。

【ご注意】このクラスは編集しません

EmployeeAppApplication は、この教材の最後まで変更しません。また、これから作るクラスは、必ず com.example.employeeapp パッケージ、またはその下のパッケージに作ってください。別の場所に作ると、Spring に見つけてもらえません。

4.3 データベースの接続を設定する

ウィザードで Spring Data JPA を選んだので、このアプリは起動するときにデータベースへ接続しようとします。接続先の設定がないままでは、起動に失敗 してしまいます。そこで、起動する前に、第3章で作ったデータベースの情報を設定しておきましょう。

設定は src/main/resources/application.properties に書きます。ダブルクリックして開くと、1行だけ書かれています。

src/main/resources/application.properties(最初の状態)
spring.application.name=employee-app

これを、次のように書き換えて保存(Ctrl + S)します。# で始まる行はコメントなので、入力しなくてもかまいません。

src/main/resources/application.properties
# アプリの名前
spring.application.name=employee-app

# 接続するデータベースの場所(localhost の 1521 番ポートの XEPDB1)
spring.datasource.url=jdbc:oracle:thin:@localhost:1521/XEPDB1
# データベースのユーザー名とパスワード(第3章で作成したユーザー)
spring.datasource.username=empapp
spring.datasource.password=empapp

# テーブルを Spring に自動で作らせない
spring.jpa.hibernate.ddl-auto=none
# 実行された SQL をコンソールに表示する
spring.jpa.show-sql=true
# 表示する SQL を改行して見やすくする
spring.jpa.properties.hibernate.format_sql=true
# 起動時に出る警告を抑えるための設定
spring.jpa.open-in-view=false
# テンプレート(HTML)のキャッシュを止める(開発中の設定。HTML の変更がすぐ反映される)
spring.thymeleaf.cache=false
設定 意味
spring.datasource.url 接続先のデータベース。jdbc:oracle:thin:@ホスト名:ポート番号/サービス名 という書き方で、第2章でインストールした Oracle の XEPDB1 を指定しています
spring.datasource.username
spring.datasource.password
接続するユーザー名とパスワード。第3章で作成した empapp ユーザーです
spring.jpa.hibernate.ddl-auto none にすると、Spring がテーブルを作ったり変更したりしません。テーブルは第3章で自分で作ったので、Spring には作らせません
spring.jpa.show-sql true にすると、Spring が実行した SQL がコンソールに表示されます。第7章以降で、どんな SQL が動いたかを確認するのに使います
spring.jpa.properties.hibernate.format_sql 表示される SQL を改行・インデントして読みやすくします
spring.jpa.open-in-view 起動時に出る警告を抑えるための設定です
spring.thymeleaf.cache false にすると、画面のテンプレート(HTML)を毎回読み直します。HTML を変えたときに、アプリを起動し直さなくても、ブラウザで再読み込みするだけで変更が反映されます。本番の環境では、速く動くように true(初期値)のまま使います

タブの「*」は未保存のしるし

エディターのタブの名前の先頭に 「*」 が付いているときは、変更がまだ 保存されていません。Ctrl + S で保存すると「*」が消えます。

properties-compare.png
図4-9 保存する前(上)と保存したあと(下)。タブの名前の「*」に注目

【再確認】「*」が付いたまま起動しない

「*」が付いたまま(保存しないまま)アプリを起動すると、変更前の内容で動きます。「書き換えたのに動きが変わらない」ときは、まずタブに「*」が残っていないかを確認しましょう。複数のファイルをまとめて保存するときは Ctrl + Shift + S が便利です。

【ご注意】スペルミスに注意

設定のキー(= の左側)を1文字でも間違えると、その設定は無視されます。エラーにもならないので気づきにくいです。= の前後にスペースを入れないことにも気をつけましょう。

4.4 アプリを起動・停止する

まだ画面は1つもありませんが、ここで一度アプリを起動してみましょう。データベースの接続設定が正しいかも、ここで確認できます。

【ご注意】起動する前に

Oracle Database が動いている必要があります。第2章でインストールした Oracle は、パソコンを起動すると自動で動き始めます。

起動する

  1. パッケージ・エクスプローラーで employee-app プロジェクトを右クリックします。
  2. 実行 → Spring Boot アプリケーション を選びます。

run-menu.png
図4-10 プロジェクトを右クリック → 実行 → Spring Boot アプリケーション

  1. 画面下の「コンソール」ビューに、起動中のメッセージが次々と表示されます。

【便利な使い方】Boot ダッシュボードからも起動できます

画面の下などにある「Boot ダッシュボード」ビューでも、employee-app を選んで起動ボタンを押すと起動できます。起動中は、下の図のように緑の上向き矢印とポート番号([:8080])が表示されます。見当たらないときは、メニューの ウィンドウ → ビューの表示 → その他 から「Boot ダッシュボード」を探して開けます。どちらの方法でもかまいません。

boot-dashboard.png
図4-11 Boot ダッシュボード(employee-app が 8080 番ポートで起動中)

起動に成功すると、コンソールに Spring のロゴと、次のようなメッセージが表示されます(日時や数字は環境によって異なります)。

コンソール
  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/

 :: Spring Boot ::                (v4.x.x)

...(省略)...
... Tomcat started on port 8080 (http) with context path '/'
... Started EmployeeAppApplication in 5.123 seconds

実際のコンソールでは、長い行は折り返されず、右にはみ出して表示されます(横にスクロールしないと続きが見えません)。この教材の画像は、コンソールの上部にある 「ワードラップ」 ボタンを押して、長い行を折り返して表示させています。行の続きが見えにくいときは、同じようにボタンを押してみてください。もう一度押すと元に戻ります。

console-toolbar.png
図4-12 コンソールのツールバー(赤枠が「ワードラップ」ボタン)

console-started.png
図4-13 起動に成功したときのコンソールの最後の部分

最後のほうに 「Tomcat started on port 8080」 と 「Started EmployeeAppApplication」 が出ていれば、起動は成功です。

アプリはコンソールの表示が止まったあとも動き続け、ブラウザからのリクエストを待っています。

【知識メモ】「WARN」と出ても慌てなくて大丈夫

起動の途中で WARN ... HHH100123: Low default JDBC fetch size: 10 ... のような「WARN(警告)」の行が表示されることがあります。これはデータベースとの通信を調整するための助言で、この教材のアプリの動作には影響しません。そのまま進めてかまいません。

ただし、赤い文字の「ERROR」が出た場合は、何かが失敗しています。次の囲みを確認してください。

【ご注意】赤い文字で長いメッセージが出たら

起動に失敗すると、コンソールに赤い文字で長いエラーメッセージが表示されます。多くの場合、データベースの接続設定の間違いです。4.8 よくあるエラー を見て対処してください。

Chrome でアクセスしてみる

Chrome を起動し、アドレスバーに http://localhost:8080/ と入力して Enter を押してみましょう。次のような画面が表示されます。

chrome-whitelabel.png
図4-14 Whitelabel Error Page(404)

Whitelabel エラー画面という画面ですが、心配はいりません。これは サーバーは動いているけれど、/ に対応するページがまだない(ステータスコード 404)という意味です。サーバーが動いていなければ、「このサイトにアクセスできません」という Chrome 自身のエラー画面になります。

【知識メモ】Whitelabel Error Page

Spring Boot が標準で表示するエラー画面で、この教材では Whitelabel エラー画面 と呼びます。この先も、URL を間違えたときやプログラムでエラーが起きたときによく見ることになります。status= の後ろの数字(404、500 など)を見ると、何が起きたかの手がかりになります。

停止する

コンソールビューの上部にある 赤い四角のボタン(終了) を押すと、アプリが停止します。Boot ダッシュボードで起動した場合は、ダッシュボードの停止ボタンでも止められます。

console-stop.png
図4-15 コンソールビューの「終了」ボタン(赤い四角)

【再確認】二重起動に注意

アプリを起動したまま、もう一度起動すると、2つ目のアプリは 「Port 8080 was already in use」(8080番ポートはすでに使われている)というエラーで起動に失敗します。1台のパソコンで 8080 番ポートを使えるのは、1つのアプリだけだからです。

起動し直すときは、必ず先に停止してから起動する 習慣をつけましょう。停止したのに解決しない場合は、コンソールビューの コンソールの表示 ボタン(モニターの形のアイコン)の横の▼から、他に起動中のコンソールが残っていないかを確認し、それも停止してください。

4.5 Hello World を表示する

アプリが起動できることを確認できたので、いよいよ最初の画面を作ります。http://localhost:8080/hello にアクセスすると、「Hello, Spring Boot!」と表示される画面です。

作るものは2つです。

ファイル 役割
HelloController.java リクエストを受け取り、表示するメッセージを用意する(Controller)
hello.html メッセージを埋め込んで表示する画面(テンプレート)

controller パッケージを作る

Controller のクラスは、専用のパッケージにまとめて置きます。

【再確認】新規作成は、作る場所を右クリックしてから

パッケージ・クラス・ファイルを新しく作るときは、必ず 作りたい場所(起点になるパッケージやフォルダー)を右クリック してから 新規 を選びます。そうすると、作成画面の「パッケージ」や「親フォルダー」の欄に、その場所が最初から入ります。別の場所を右クリックすると、違う場所に作られてしまうので注意しましょう。

  1. パッケージ・エクスプローラーで、src/main/java の中の com.example.employeeapp を右クリックし、新規 → パッケージ を選びます。

new-package-menu.png
図4-16 com.example.employeeapp を右クリック → 新規 → パッケージ

  1. 「新規 Java パッケージ」画面の「名前」には、右クリックした com.example.employeeapp が最初から入っています。末尾に .controller を付けて com.example.employeeapp.controller にし、完了 を押します。

new-package-dialog.png
図4-17 名前を com.example.employeeapp.controller にして「完了」

HelloController を作る

  1. 作成した com.example.employeeapp.controller パッケージを右クリックし、新規 → クラス を選びます。

new-class-menu.png
図4-18 controller パッケージを右クリック → 新規 → クラス

  1. 「新規 Java クラス」画面の「パッケージ」に com.example.employeeapp.controller が入っていることを確認します。「名前」に HelloController と入力し、完了 を押します。

new-class-dialog.png
図4-19 パッケージを確認し、名前に HelloController と入力して「完了」

  1. 開いたエディターに、次のコードを入力して、Ctrl + S で保存します。
src/main/java/com/example/employeeapp/controller/HelloController.java
package com.example.employeeapp.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("message", "Hello, Spring Boot!");
        return "hello";
    }

}

hello-controller-compare.png
図4-20 保存する前(上)と保存したあと(下)。保存するとタブの「*」が消える

【再確認】入力は補完(Ctrl + Space)で行う

アノテーションやクラス名は、途中まで入力して Ctrl + Space を押すと、候補の一覧が表示されます。候補を選ぶと、残りの文字が入力されます。これを 補完 といいます。

  • 例:@Controller を入力するときは、@Cont まで打って Ctrl + Space を押し、候補から Controller - org.springframework.stereotype を選びます。
  • 例:Model を入力するときは、Mod まで打って Ctrl + Space を押し、Model - org.springframework.ui を選びます。似た名前のクラスが他のライブラリにもあるので、パッケージ名を見て選びましょう。

補完で候補を選ぶと、必要な import 文も自動で追加されます。 アノテーションやクラス名だけでなく、変数名やメソッド名も補完できます。

import が必要なアノテーションやクラス名は、手で全部打ち込まず、必ず補完を使ってください。手で打つと import 文が追加されず、赤い波線(エラー)になります。短いクラス名をつい全部打ち込んでしまったときも、その語の末尾にカーソルを置いて Ctrl + Space を押し、候補を選び直せば、import 文が追加されます。

hello.html を作る

次に、画面のテンプレートを作ります。テンプレートは src/main/resources/templates に置きます。

  1. src/main/resources の中の templates フォルダーを右クリックし、新規 → ファイル を選びます。

new-file-menu.png
図4-21 templates を右クリック → 新規 → ファイル

  1. 「新規ファイルの作成」画面の「親フォルダー」に employee-app/src/main/resources/templates が入っていることを確認します。「ファイル名」に hello.html と入力し、完了 を押します。

new-file-dialog.png
図4-22 親フォルダーを確認し、ファイル名に hello.html と入力して「完了」

  1. 開いたエディターに、次の内容を入力して、Ctrl + S で保存します。
src/main/resources/templates/hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
  <h1>はじめての Spring Boot</h1>
  <p th:text="${message}">ここにメッセージが入ります</p>
</body>
</html>

hello-html.png
図4-23 hello.html を入力して保存したところ

【ご注意】ファイルを作る場所を間違えないように

hello.html は、必ず src/main/resources/templates の中に作ってください。static フォルダーやプロジェクトの直下に作ると、Spring に見つけてもらえず、エラーになります。

【便利な使い方】フォーマットでインデントを整える

Eclipse には、インデントや改行を自動で整える フォーマット の機能があります。エディターの中をクリックしてから、Ctrl キーと Shift キーを押しながら F キーを押すか、メニューの ソース → フォーマット を選ぶと、ファイル全体が整えられます。結果が気に入らないときは、Ctrl + Z キーで元に戻せます。フォーマットを使わなくても、教材は進められます。

フォーマットすると、教材のコードとは見た目が変わるところがあります。Java のファイルは、行頭の半角スペース4つがタブに置き換わります。HTML のファイルは、行頭がタブになり、<head> の中の行も右にずれ、<head> と <body> の前後に空行が入ります。属性を何行かに分けて書いたところは、行の分け方が変わることがあります。どれも、表示と動きは変わりません。

HTML のファイルでは、既定の設定だと <td> や <input> などが1行にまとめられてしまいます。メニューの ウィンドウ → 設定 を開き、Web → HTML ファイル → エディター で次のように変えると、教材のコードに近い形になります。「フォーマット」の「行の幅」を 72 から 200 に変え、「インライン要素」の一覧から td・th・input・label・select を選んで「除去」をクリックし、最後に「適用して閉じる」をクリックします。

format-settings.png
図4-24 フォーマットの設定(赤枠:行の幅、インライン要素と「除去」)

4.6 動作確認

アプリを起動し直して、画面を確認しましょう。

  1. アプリが起動中の場合は、コンソールの赤い四角のボタンで 停止 します。
  2. プロジェクトを右クリックし、実行 → Spring Boot アプリケーション で起動します。
  3. コンソールに「Started EmployeeAppApplication」が表示されたら、Chrome で http://localhost:8080/hello を開きます。

chrome-hello.png
図4-25 Hello World の画面

「ここにメッセージが入ります」ではなく、「Hello, Spring Boot!」 と表示されていれば成功です。

【ご注意】Java のコードを変えたら、停止して起動し直す

アプリの起動中に Java のコードや application.properties を書き換えても、動いているアプリには反映されません。ファイルを保存したら、アプリを停止して起動し直す と、変更後の内容で動きます。

HTML(テンプレート)だけを変えたときは、保存してからブラウザで再読み込み(F5)すれば反映されます。application.properties に書いた spring.thymeleaf.cache=false の効果です。

4.7 解説:リクエストから画面が表示されるまで

ブラウザで /hello にアクセスしてから画面が表示されるまでに、何が起きていたのかを見ていきましょう。

ch04-1.png
図4-26 /hello にアクセスしたときの流れ

  1. Chrome が /hello に GET のリクエストを送ります。
  2. Spring は、@GetMapping("/hello") が付いた hello メソッドを呼び出します。メソッドは Model に message という名前で文字列を入れます。
  3. メソッドは "hello" という文字列を返します。Spring はこれを テンプレート名 とみなし、templates/hello.html を探します。
  4. Thymeleaf が hello.html を読み込み、th:text="${message}" の部分を Model の値に置き換えます。
  5. できあがった HTML が、レスポンスとして Chrome に返されます。

第1章で学んだ MVC に当てはめると、HelloController が Controller、Model が Model、hello.html が View です。

@Controller

このクラスが Controller であることを Spring に知らせるアノテーションです。@Controller を付けたクラスは、Spring が起動時に自動で見つけて、リクエストを受け付けられるように準備してくれます。

@GetMapping

@GetMapping("/hello") は、「/hello に GET のリクエストが来たら、このメソッドを呼び出す」という意味です。URL とメソッドを結びつけることを マッピング といいます。POST のリクエストを受け取るときは、第9章で使う @PostMapping を使います。

Model

Model は、Controller から画面(テンプレート)へデータを渡すための入れ物です。メソッドの引数に Model model と書いておくと、Spring が用意して渡してくれます。

model.addAttribute("message", "Hello, Spring Boot!");
//                  ↑名前       ↑値

第1引数が名前、第2引数が値です。テンプレートでは、この名前(message)を使って値を取り出します。

戻り値の文字列=テンプレート名

@Controller のメソッドが返す文字列は、表示するテンプレートの名前です。Spring は、前に templates/、後ろに .html を自動で付けてファイルを探します。

戻り値 表示されるテンプレート
"hello" src/main/resources/templates/hello.html
"employee/list" src/main/resources/templates/employee/list.html(第8章で使います)

th:text

th: で始まる属性は Thymeleaf の命令です。th:text="${message}" は、「このタグの中身を、Model の message の値に置き換える」という意味です。${ } の中に Model に入れたときの名前を書きます。

タグの中にもともと書いてある「ここにメッセージが入ります」は、置き換えられて消えます。テンプレートを直接ブラウザで開いたときに、どんな内容が入るのかがわかるように書いておく仮の文字です。

実際に返された HTML を確かめる

Chrome で http://localhost:8080/hello を表示した状態で、画面の何もないところを右クリックし、ページのソースを表示 を選んでみましょう。新しいタブに、サーバーから返ってきた HTML が表示されます(Ctrl + U でも開けます)。

chrome-view-source.png
図4-27 「ページのソースを表示」で見た HTML

ページのソース(抜粋)
<body>
  <h1>はじめての Spring Boot</h1>
  <p>Hello, Spring Boot!</p>
</body>

th:text の属性はなくなり、<p> タグの中身が「Hello, Spring Boot!」に置き換わっています。ブラウザが受け取るのは、Thymeleaf が組み立てたあとの ふつうの HTML だということがわかります。これが第1章で学んだ「動的なページ」です。

4.8 よくあるエラー

この章の操作でよく起きるエラーと、その対処法をまとめます。エラーが出たら、まずコンソールや Whitelabel エラー画面のメッセージをよく読みましょう。

症状・メッセージ 主な原因 対処法
Whitelabel Error Page
(status=404)
URL の打ち間違い。@GetMapping に書いた URL の間違い。Controller を別のパッケージに作ってしまった URL と @GetMapping("/hello") が一致しているか確認する。Controller が com.example.employeeapp の下のパッケージにあるか確認する
Whitelabel Error Page
(status=500)
コンソールに TemplateInputException
テンプレートが見つからない。戻り値の文字列とファイル名が一致していない。templates 以外の場所にファイルを作った 戻り値 "hello" と templates/hello.html のファイル名が一致しているか確認する
起動時に ORA-01017 データベースのユーザー名またはパスワードが違う application.properties の username・password を確認する。第3章で作成したユーザーでログインできるか SQL Developer で確かめる
起動時に ORA-12514、ORA-12541、Connection refused など 接続先の指定(サービス名 XEPDB1、ポート番号 1521)が違う。Oracle Database が動いていない spring.datasource.url を確認する。SQL Developer で接続できるか確かめる。つながらない場合は、パソコンを再起動してみる
起動時に Port 8080 was already in use アプリがすでに起動している(二重起動) 起動中のアプリをコンソールの赤い四角のボタンで停止してから起動し直す

その他のエラーは、付録B よくあるエラーと対処法 も参考にしてください。

4.9 まとめと確認問題

まとめ

  • Spring Boot のプロジェクトは、Eclipse の Spring スターター・プロジェクト のウィザードで作成できる
  • Java のクラスは src/main/java、テンプレートは src/main/resources/templates に置く
  • データベースの接続先などの設定は application.properties に書く
  • アプリは 実行 → Spring Boot アプリケーション で起動し、コンソールの赤い四角のボタンで停止する。起動し直すときは必ず先に停止する
  • @Controller を付けたクラスの、@GetMapping を付けたメソッドがリクエストを受け取る
  • メソッドは Model にデータを入れ、テンプレート名を返す。テンプレートでは th:text="${名前}" で値を表示する

確認問題

問1 テンプレート(画面の HTML ファイル)は、プロジェクトのどのフォルダーに置きますか。

解答を見る

src/main/resources/templates です。

問2 アプリの起動中に、もう一度起動しようとしたら「Port 8080 was already in use」と表示されました。原因と対処法を答えてください。

解答を見る

アプリがすでに起動していて、8080番ポートが使われているためです。起動中のアプリをコンソールの赤い四角のボタンで停止してから、起動し直します。

問3 Controller のメソッドが return "employee/list"; と文字列を返したとき、表示されるテンプレートのファイルはどれですか。

解答を見る

src/main/resources/templates/employee/list.html です。戻り値の前に templates/、後ろに .html が自動で付きます。

問4 http://localhost:8080/goodbye にアクセスしたとき、Model の message に「Goodbye!」を入れて hello.html を表示するメソッドを、HelloController に追加してください。

解答を見る
@GetMapping("/goodbye")
public String goodbye(Model model) {
    model.addAttribute("message", "Goodbye!");
    return "hello";
}

同じテンプレートでも、Model に入れる値を変えれば、違う内容を表示できます。

問5 アプリの起動時に、コンソールに ORA-01017 というエラーが表示されました。どこを確認すればよいですか。

解答を見る

データベースのユーザー名またはパスワードが違うというエラーです。application.properties の spring.datasource.username と spring.datasource.password を確認します。


前へ

第3章 データベースの準備

次へ

第5章 DI とアプリの構成

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?