Sprint Boot2.3,2.4で初めてのJavaのウェブアプリ開発 ~ Hello World

JavaフレームワークのSprint Boot2.3,2.4で、Hello worldを出力する簡単なJavaウェブアプリを作ります。Eclipse(Pleiades)で初めてSpring Bootのウェブアプリを開発しようとしている入門者・初心者の方は、参考にしてください。

今回の目的と環境

最終更新日:2021/5/5

Javaで人気のフレームワークのSpring Bootで、Hello worldを出力する簡単なウェブアプリを開発していきます。

開発環境やバージョンは以下の通りです。
OS:macOS Catalina(バージョン10.15.5)
開発環境:Eclipse(Pleiades All in One、4.16(2020-06)、Java Full Edition版)、(*2020/8/28時点の最新安定版です)
Spring Bootバージョン:2.3.3、2.4.0
Java:11

Spring Bootの開発環境というとSTS(Spring tool suite)がありますが、ここではEclipse(Pleiades All in One、Java Full Edition版)を使っています。
PleiadesのJava Full Edition版にも最初からSTSが入っていて設定済みのため、すぐにSpring Bootでの開発ができますし、日本語化もされているので日本語化の設定などの必要もありません。ただ、Full Edition版だけあって容量はSTS4と比較して大きいです。実際の使い勝手はどちらも変わらないと思います。

Eclipse(Pleiades All in One、Java Full Edition版)の導入については別ページに書いていますので、参考にしてください。
【Java初心者】Eclipse(Pleiades All in One)をインスールしてJava開発ができるようにする【macOS版】

◾️Spring Bootのバージョンについて
今回開発しているSpring Bootのウェブアプリのバージョンは、2.3.3と2.4.0の2つで動作する事を確認しています。

Spring Bootプロジェクトの作成

それではやっていきます。まずは、Spring Bootのプロジェクトを作成します。
新規プロジェクト画面で、Spring Boot->Springスターター・プロジェクトを選択して次へ進みます。
Spring Bootプロジェクトの作成【Eclipse,mac】

次に、新規Springスターター・プロジェクト画面で、適当なプロジェクト名を入力して次へ進みます。ここでは、sb-helloworldにしました。その他の設定はデフォルトのままです。Javaのバージョンは11にしています。

次に、新規Springスターター・プロジェクト依存関係画面で、必要なツールやライブラリを選択します。ここでは、開発ツールから「Spring Boot Devtools」、テンプレート・エンジンから「Thymeleaf」、Webから「Spring Web」の3つを選択して完了を押します。
Spring Bootのプロジェクト生成で必要なツールやライブラリ(Eclipse)

◾️Thymeleaf
Thymeleafは、Spring Bootで推奨されているテンプレートエンジンです。テンプレートエンジンはHTMLの雛形であり、HTML内で簡単なプログラムを書けるので、動的なHTML加工ができます。

今回は"Hello world"を表示するだけのJavaウェブアプリを作る事が目的ですので、Thymeleafは必要ないと思い最初はThymeleafを選択せずに開発していたのですが、いざウェブアプリを完成しブラウザでurlアクセスしたら、下の画像のような「Whitelabel Error Page」というエラーページが表示されました。そして、Thymeleafを選択すれば、このエラーは発生しませんでした。ですので、解決方法は他にあるかもしれませんが、Thymeleafを選択して使うようにしています。
Spring bootでWhitelabel Error Page

これで、Spring Bootのプロジェクトのひな形が完成しました。パッケージエクスプローラに作成したプロジェクトが作成され、Spring Bootのベースとなるディレクトリやファイルが自動生成され、Javaライブラリなどもあるはずです。
あと、恐らくプロジェクトの初回作成時は、必要なJavaライブラリを自分の開発環境に読み込むために少し時間がかかると思います。
Spring Bootプロジェクトの雛形完成(Eclipse)

サーバサイドのControllerクラスの作成

それでは、コーディング開発をやっていきます(と言っても今回は"Hello world"をブラウザで表示するだけですので、大したことはやりません)。

まずは、サーバサイドのJavaコントローラクラスから作成します。作成したプロジェクト内の「src/main/java」ディレクトリの「com.example.demo」パッケージを右クリック->新規->クラスを選択します。

新規Javaクラス画面が開きますので、パッケージ名の編集と名前の入力をします。パッケージ名は元々書いてある「com.example.demo」から「com.example.demo.controllers」に編集し、名前は「TestController」にします。そして、完了ボタンを押します。
Spring Bootのコントローラクラスの作成

パッケージ・エクスプローラーの「com.example.demo」パッケージ下にcontrollersパッケージが作成され、その下にTestController.javaクラスができました。また、右側のエディタにTestController.javaクラスが表示されます。

TestController.javaクラスを編集します。

package com.example.demo.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {

	@RequestMapping("/test")
	public String test() {
		return "test";
	}
}

コントローラクラスは、ユーザ(フロントエンド)からのhttpリクエストを受けて、処理をするロジックを呼び出し、フロントエンドに何を返すのか(レスポンスする)を決める役割があります。このあたりの話は、Spring Bootに限らず、ウェブ開発のMVCモデルに共通です。

コントローラクラスには@Controllerアノテーションを付けます。@RestControllerアノテーションもありますが、今回はフロントエンドにビュー(HTML)を指定しますので、@Controllerアノテーションを使います。

testメソッドには、@RequestMappingアノテーションを付けます。@RequestMappingはルーティング情報(URLマッピング)を設定します。@RequestMappingアノテーションの引数には「"/test"」を指定していますので、「http://localhost:8080/test」にアクセスした時、TestControllerクラスのindexメソッドが呼び出されます。

また、戻り値の「return "test"」で、test.htmlファイルをフロントエンドに返して表示する事ができます(test.htmlファイルはこの後に作ります)。

[広告] Kindle Unlimitedなら対象の本が定額で読み放題
対象本には、プログラミングなどのIT関連本、マンガ、雑誌、ビジネス書などがたくさんあります!

フロントエンド(HTML)の作成

次に、フロントエンドのhtmlファイルを作成します。プロジェクト内の「src/main/resources」ディレクトリの「templates」ディレクトリを右クリック->新規->その他を選択します。
Spring BootでHTMLファイルの作成

ウィザードを選択画面が出ますので、Web->HTMLファイルを選択し、次へ進みます。

次に、作成するhtmlファイル名を入力します。ここでは、上で作成したコントローラクラスの「return "test"」で指定に合わせて、test.htmlファイルにします。ファイル名を入力したら、完了ボタンを押します。

test.htmlファイルが作成されて、右側のエディタにtest.htmlが表示されます。

test.htmlを編集します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Hello World.<br/>
こんにちは、世界。
</body>
</html>
これでテストコードの作成は完了です。

Spring Bootウェブアプリの実行と動作確認

それでは、実際にSpring Bootウェブアプリを起動して、ブラウザで動作確認をしてみます。
起動するには、プロジェクト作成時に自動で生成されたSbHelloworldApplicationクラス内のmainメソッドがエントリポイントになりますので、そこから起動します。SbHelloworldApplicationクラスは、プロジェクト内の「src/main/java」ディレクトリの「com.example.demo」パッケージにあります。

SbHelloworldApplication.javaファイルを右クリック->実行->3 Spring Bootアプリケーションを選択して起動します。
Spring Bootアプリの起動(Eclipse)

起動時のメッセージはコンソールタブで確認できます。また、このコンソール上のメッセージでエラーが発生しているかも確認できます。

問題なく起動できたら、ブラウザで表示確認をしてみましょう。 上のTestControllerクラスで、testメソッドには@RequestMapping("/test")アノテーションを付与しましたので、アクセスするurlは「http://localhost:8080/test」です。
”Hello, world.”が表示されたら正常に動作しています。
Spring BootでHello,worldを動作確認

コードを少し変更したりして試した結果

”Hello, world.”を表示した後も、少しTestControllerのソースを変更したりして試してみました。

上でも書きましたが、@RequestMapping("/test")の引数はアクセスするurlに対応していますので、引数を("/test")から("/")に変更すると、アクセスするurlは「http://localhost:8080/test」になります。
また、index()メソッドの戻り値の「return "test";」を「return "hoge";」に変更すると、それにあわせて「templates」ディレクトリに「hoge.html」ファイルを作る必要があります。

あと、TestControllerのソースの修正やファイル名の変更は、アプリが起動したままでも変更は反映されます。
プロジェクト作成時に"Spring Boot Devtools"を使用するようにしていればホットリロードが有効になっていますので、アプリの再起動は必要ありません。多少のコンパイル時間はかかりますが、修正したらほぼすぐに反映されるので開発していてストレスも感じません。

◾️ホットリロード(ホットスワップ機能)
ホットリロードとは、アプリ実行中にJavaのソースコードを変更した際、変更されたJavaファイルを検知して自動でコンパイルし、さらにアプリに変更を反映してくれます。
ホットリロードが有効になっていれば、ソースコード変更時にいちいちアプリを再起動し直す必要がないので、開発効率が大きく改善します。 別の言い方として、ホットスワップ機能、ホットデプロイなどがあります。

@Controllerや@RequestMappingアノテーションなどで簡単にurlマッピングの設定できるので、昔のJavaのフレームワークでよくあったXMLファイルでurlマッピングを設定・管理しなければならないという作業からも開放されます。

Spring Bootは高速でJavaのウェブアプリ開発できるという評判を聞きますが、少し触ってみただけでそれがよく体感する事ができました。

その他のSpring Bootの記事

Spring Boot2で日記投稿ウェブアプリ開発入門トップページ
Spring Boot2.3,2.4でシンプルな日記投稿ウェブアプリの開発しながら、入門者・初心者にもわかりやすいように説明しています。DBを使用して、新規投稿、編集、削除、一覧表示という基本的なCRUD機能を備えたアプリです。

(第0回) Javaで人気のフレームワークSpring Boot
JavaフレームワークのSpring Bootとはどんなものかについて説明しています。Spring Bootでできる事や特徴、Spring Bootで開発する事のメリット、仕事で使われているかどうかなどです。Spring Bootに興味のある方は参考にしてください。

【Sprint Boot2】Modelを使ってサーバサイドからフロントエンドへのデータの受け渡し
Spring Bootの入門者用サンプルプロジェクトをEclipseにインポートして動かしてみる
【Sprint Boot2】GETリクエストでクライアントからサーバサイドへデータ送信【クエリストリング】
【Sprint Boot2】POSTリクエストでクライアント側からサーバサイドへデータ送信