ITジョグ - ウェブプログラミング入門
未経験からのウェブプログラミングの入門ガイド

Sprint Boot2で初めてのJavaのウェブアプリ開発

Spring Bootの入門記事です。JavaフレームワークのSprint Boot2.7で、Hello worldを出力する簡単なウェブアプリを作ります。初めてSpring Bootのウェブアプリ(Webサイト)を開発したい入門者・初心者の方は、参考にしてください。

※ 本ページはプロモーションが含まれています。

今回の目的と環境

最終更新日：2023/6/7
このエントリーをはてなブックマークに追加

Spring BootはJavaで人気のWebフレームワークで、仕事でもJava開発でよく使われたりします。
本記事は、Spring Bootの入門中の入門という事で、Hello worldを出力する簡単なSpring BootのWebアプリを開発して説明します。

開発環境やバージョンは以下の通りです。
OS：macOS Catalina（バージョン10.15.5）
->本記事はEclipseでSpring Bootのプロジェクト作成部分から説明しているので、Windowsでもほぼ同じだと思います。
開発環境：Eclipse（Pleiades All in One、4.16(2020-06)、Java Full Edition版）
Spring Bootバージョン：2.7.5
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のプロジェクトを作成します。
新規プロジェクト画面で、Spring Boot->Springスターター・プロジェクトを選択して次へ進みます。
Spring Bootプロジェクトの作成【Eclipse,mac】

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

次に、新規Springスターター・プロジェクト依存関係画面で、必要なツールやライブラリを選択します。ここでは、開発ツールから「Spring Boot Devtools」、テンプレート・エンジンから「Thymeleaf」、Webから「Spring Web」の3つを選択して完了を押します。また、Spring Bootのバージョンは2.7.5を選択しています。
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）

Spring Bootのプロジェクト作成後にプロジェクト依存関係画面を再度開いて使用中のライブラリを確認したり、選択し直したい場合、Spring Bootのプロジェクトを右クリック->"Spring"->"スターターの編集"を選択すれば、プロジェクト依存関係画面を開く事ができます。もちろん、（Mavenなら）pom.xmlファイルを直接編集してライブラリ依存関係を解決する事もできます。

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

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

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

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

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

HelloController.javaクラスのソースコードです。とてもシンプルなコードです。 

package com.example.demo.controllers;

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

@Controller
public class HelloController {

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

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

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

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

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

(広告)AmazonでSpring Boot3(バージョン3系)の初心者向け入門書を探す！本でSpring Bootプログラミング開発を体系的に勉強する！

フロントエンド（HTML）の作成

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

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

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

hello.htmlファイルが作成されて、右側のエディタにhello.htmlが表示されるので編集します。

hello.htmlの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>
これで画面側のHTMLコードの作成も完了です。

Spring Bootウェブアプリの実行と動作確認。デバッグモードでも起動

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

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

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

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

起動したWebアプリを終了したい時は、コンソールタブの上部にある赤い停止ボタンを押します。

再度同じSpring Bootアプリを起動したい時は、Eclipse上部のメニューバーにある実行ボタンを押せば起動できます。
また、デバッグモードで起動してデバッグしたい時は、デバッグしたいエディタのソースコード部分にブレークポイントを付けて、実行ボタンの隣にあるデバッグボタンを押して起動します。
EclipseでSpring BootのWebアプリをデバッグモードで起動

デバッグモードで起動した後にブラウザでアクセスすれば、Eclipseがデバッグ用のパースペクティブ画面に切り替わってデバッグできるようになると思います。

スポンサーリンク

コードを少し変更したりして試す。今後のSpring Bootの勉強について

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

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

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

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

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

Spring Bootは高速でJavaのウェブアプリ開発できるという評判を聞きますが、少し触ってみただけでその良さを体感できると思います。とはいえ、本記事で書いてある内容はSpring Bootのほんの一部で入門中の入門という感じです。

別ページでSpring Bootを使ったWebアプリ開発について説明しているので、これからもっとSpring Bootを勉強して使えるようにしたいと考えている方は参考にしてください。
Spring Boot2で日記投稿ウェブアプリ開発入門トップページ
(第0回) Javaで人気のフレームワークSpring Boot
Spring Boot2でシンプルな日記投稿ウェブアプリの開発しながら、入門者・初心者にもわかりやすいように説明しています。DBを使用して、新規投稿、編集、削除、一覧表示という基本的なCRUD機能を備えたWebアプリをSpring Bootで開発しています。

また、仕事でSpring Bootを使うから勉強しておきたい、Spring BootでWebアプリ（Webサイト）だけでなくWeb APIも開発できるようにしたい、JavaプログラマになりたいからそのためにJavaで人気のWebフレームワークのSpring Bootのスキルを身につけたいという方は、やはり体系的に学習できるSpring Bootの入門書を読んで勉強するのが良いと思います。

Spring Boot3 + MySQL(MariaDB)のウェブアプリ開発

本記事ではSpring Bootのバージョン2系でDB無しのWebアプリの開発入門について説明してきました。

別ページで、Spring Bootのバージョン3系のプロジェクトでMySQL(MariaDB)データベースと連携したWebアプリ(Webサイト)の開発入門について説明しているので、良ければ参考にしてください。
Spring Boot3 + MySQL(MariaDB)のWebアプリ開発入門

EclipseのSpring BootプロジェクトのソースをGitで管理する

EclipseでJava開発をする場合、ソース管理のためにGitなどのバージョン管理ツールなどを使用します。特に仕事でチーム開発する時は必須だと思います。

また、個人でも何かWebサイトやアプリを開発する時や、独学でプログラミングの勉強をする時に、Gitのようなツールを使えばバックアップにもなるので気軽に色々と試す事ができるので便利です。

別ページでEclipseで開発しているSpring BootプロジェクトをGit（gitコマンド）で管理する方法を書いていますので、興味のある方は参考にしてください。
EclipseのSpring BootをGitで管理する。更にリモート環境でGit共有リポジトリ管理も

その他のSpring Bootの記事

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



Spring Boot2で日記投稿ウェブアプリ開発入門

Java入門ガイド

スポンサーリンク

Spring Boot【Java】

H2データベース入門(Spring Boot2)

Vagrant

スポンサーリンク

フリーランスのITエンジニア

DB・インフラ関連色々

(広告)Spring Boot3（バージョン3系）の入門書を探す！