実行時の環境

Java
21
Spring Boot
v3.1.0

前回、JavaのWebアプリケーションフレームワークについてのコンテンツを書きました。その中でSpring Framework、Spring Bootをおすすめしたので、Spring BootのWeb開発の始め方について説明していきます。
なお、このコンテンツではmacOSを使い、なおかつEclipseもSTS（Spring Tool Suite）も使わないチュートリアルとなっています。

とてもシンプルなハンズオンになっていますので、実際に手を動かしながらやってみましょう。

EclipseもSTSも使わない理由

このコンテンツではEclipse、STSを使わないことは冒頭で書きましたが、なぜ使わないかについて説明します。
主な理由は、Macで開発するエンジニアはCLI（黒い画面）に慣れており、IDEよりエディタを好む傾向にあるからです。通常、Java開発であればEclipseを使うことが多いですが、Java開発におけるVSCodeの使い方も含めて紹介していきます。

もし、このチュートリアルをEclipse + STSで実施したい場合は、以下のリンクからダウンロードしてください。

Spring公式サイト

なお、同じページに掲載されているVSCodeのSpring Tool 4は使っていくので、いずれにせよ参照してみてください。

環境構築およびプロジェクト開始

それでは早速始めていきます。JavaおよびJDKはすでにインストールされている前提で始めているため、まだの場合はこちらからインストールしておきましょう。
まずはSpringをCLIで扱うためにspring-cliをインストールします。Homebrewを使うため、そちらも未インストールの場合はこちらを参考にしてください。

ターミナル
brew tap spring-projects-experimental/spring-cli
ターミナル
brew install spring-cli

以下のコマンドでインストールを確認できます。（インストール先のパスが表示されていればOKです）

shell
$ which spring
/opt/homebrew/bin/spring #=> これが表示されればOK（パスは環境によって異なる場合がある）

また、mavenも必要になるため、同じくHomebrewでインストールします。

ターミナル
brew install maven

ここまでできたら、次はSpring Bootプロジェクトを作成します。
以下のコマンドを実行しましょう。

ターミナル
spring boot new demo

このコマンドでdemoという名前のSpring Bootアプリケーションが作成されます。
早速動かしてみましょう。

ターミナル
cd demo
ターミナル
./mnvw spring-boot:run

初回のみ、必要なパッケージがダウンロードされるので少し時間がかかりますが、最終的に以下のようなSpringのロゴが表示されれば成功です。

shell
  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v3.1.0)

http://localhost:8080/greetingにブラウザでアクセスするか、以下のようにcurlでアクセスすると、レスポンスを確認できます。

ターミナル
curl http://localhost:8080/greeting

なお、このgreetingサービスは、パラメータnameをつけることでHello, {name}!という変更できます。

ターミナル
curl http://localhost:8080/greeting?name=Taro

Springのプロジェクトテンプレートについて

ここで、プロジェクト作成について追加の説明をします。以下のコマンドを実行すると、Springのプロジェクトのテンプレート一覧を表示できます。

ターミナル
spring project list

これを利用することで、あらかじめ必要なパッケージがプリセットされたプロジェクトを作成できます。今回は余計な知識を省きたいため使いませんが、リストに掲載されているGitHubのURLを見て、使いたいものがあれば使っていきましょう。
コマンドで使うと下記のようになります。なお、デフォルトでwebが選択されているため、何も指定しなくとも先に確認したRESTのレスポンスを得られます。

ターミナル
spring boot demo jpa

後から追加したい場合は、以下のコマンドで追加可能です。

ターミナル
spring boot add jpa

ディレクトリ構成について

さらに、ここで生成されたプロジェクトのファイル群について説明しておきます。
まずはディレクトリ構成を見てみましょう。今回触るのはsrc/以下だけなので、src/以下を表示します。

shell
$ tree src/
src/
├── main #=> この中に機能を作っていく
│   └── java
│       └── com
│           └── example
│               └── restservice
│                   ├── Application.java
│                   └── greeting
│                       ├── Greeting.java
│                       └── GreetingController.java
└── test #=> この中にテストを作っていく
    └── java
        └── com
            └── example
                └── restservice
                    └── greeting
                        └── GreetingControllerTests.java

これは最小限のアプリケーション構成となっており、おおむね以下のようなディレクトリ構成にして開発を進めることが多くなっています。

shell
main
├── java
│   └── com
│       └── example
│           └── blog #=> 自分が作りたいアプリケーション
│               ├── BlogApplication.java #=> アプリケーションの入口
│               ├── controller #=> HTTPを受けてサービス層へ渡す役割
│               │   └── BlogController.java
│               ├── repository #=> データベースとやり取りをする役割
│               │   └── BlogRepository.java
│               └── service #=> ロジックを組み立てる役割
│                   └── BlogService.java
└── resources
    ├── application.properties #=> プロジェクトの設定
    ├── assets #=> 静的ファイル格納
    └── templates #=> テンプレートファイル格納

もちろん、これも小さな例となりますので、実際のプロジェクトだとより複雑になるケースもあります。
最初につかむイメージとしては、上記の形で覚えてください。

ブログの雛形を作ってみる

では実際に、先述したディレクトリ構成でアプリケーション開発してみましょう。
今回はシンプルにするため、データベースとのやり取りは行いません。

先ほどのディレクトリ構成にするため、restserviceディレクトリは削除してしまいましょう。最低限、blogディレクトリとresourcesディレクトリは作成しておいてください。

BlogApplication.javaを書く

通常、IDEでパッケージを作れば自動的に作られ場合もありますが、今回は自分で書いてみましょう。

BlogApplication.java
package com.example.blog;

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

@SpringBootApplication
public class BlogApplication {

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

}

@SpringBootApplicationを見てみましょう。@xxxはアノテーションと呼ばれ、アプリケーションをコンパイル（コンピュータが理解できるように変換する過程）で特定の処理を実行します。
@SpringBootApplicationは、名前の通りSpring Bootのアプリケーションを作成してくれます。

HTMLを使えるようにする

最初に作成した際はRESTアプリケーションとなっていましたが、今回はわかりやすくHTMLを使えるようにしましょう。
まずはpom.xmlの編集です。以下を追加してください。

pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

	<!-- ~~~~中略~~~~ -->

	<dependencies>
		
<!-- ~~~~中略~~~~ -->
<!-- ここから追加 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
<!-- ここまで追加 -->
	</dependencies>

<!-- ~~~~中略~~~~ -->

</project>

これはThymeleafというJavaのテンプレートエンジン（HTMLをレンダリングする機能）を提供するために追加しています。

BlogController.javaとblog_index.html追加

次にHTTPの受け皿を作ってみましょう。src/main/com/example/blog/controller/BlogController.javaを作成し、編集します。

BlogController.java
package com.example.blog.controller;

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

@Controller
public class BlogController {

    @GetMapping("/")
    public String index() {
        return "blog_index";
    }

}

こうすることで、http://localhost:8080/のトップページでblog_index.htmlをレンダリングするようになります。このblog_index.htmlはsrc/main/resources/templates/に入れましょう。

blog_index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Blog</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <h1>Blog</h1>
</body>
</html>

動作確認

ここまで書いたら、先ほどと同じく実行してみます。

ターミナル
./mnvw spring-boot:run

この状態でhttp://localhost:8080/にアクセスしてみると、blog_index.htmlの内容が表示されます。

このように、Spring Bootの基本的なURLアクセス手続き（ルーティング）は@GetMappingのようなアノテーションで行うことがわかりました。

データを簡単に表示する

これだけでは、雰囲気が掴みづらいのでblog_index.htmlにデータを表示してみます。
まずはserviceディレクトリにBlogService.javaを作成し、編集していきましょう。

BlogService.java
package com.example.blog.service;

import java.util.List;

import org.springframework.stereotype.Service;

@Service
public class BlogService {

    public List<String> getBlogTitles() {
        return List.of("Blog Title 1", "Blog Title 2", "Blog Title 3");
    }

}

このコードは、シンプルに"Blog Title 1~3"という文字列のリストを返す関数だけ定義しています。
これをControllerで使っていきます。

BlogController.java
package com.example.blog.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired; //=> 追加
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model; //=> 追加
import org.springframework.web.bind.annotation.GetMapping;

import com.example.blog.service.BlogService; //=> 追加

@Controller
public class BlogController {

    @Autowired //=> 追加
    private BlogService blogService; //=> 追加

    @GetMapping("/")
    public String index(Model model //=> 追加) {
        List<String> blogTitles = blogService.getBlogTitles(); //=> 追加
        model.addAttribute("blogTitles", blogTitles); //=> 追加
        return "blog_index";
    }

}

//=> 追加と書かれたコードを追加しました。これによって、BlogServiceのgetBlogTitles()によって返された文字列のリストがblogTitlesとして使えるようになります。

blog_index.htmlを編集しましょう。

blog_index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Blog</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <h1>Blog</h1>
    <ul>
        <li th:each="blogTitle : ${blogTitles}">
            <span th:text="${blogTitle}">Title</span>
        </li>
    </ul>
</body>
</html>

h1タグの下にタイトルを表示する記述をしました。

ここまでできたら実行してみます。

ターミナル
./mnvw spring-boot:run

以下の画像のように表示されれば成功です。

ブログタイトル一覧表示
ブログタイトル一覧表示

慣れると親しみやすいSpring Boot

ここまで、Spring Bootでシンプルなチュートリアルをしてみましたが、実際にはrepositoryでデータベースアクセスするなど、勉強を続けると複雑さは増していきます。しかしながら、明確な書き方ができる上に、多くの機能が自動的に作られているため、慣れれば親しみやすいと感じられるでしょう。

また、勉強の進め方のコツとしてはアノテーションへ慣れることです。
アノテーションで実装内容を理解できるがゆえに、アノテーションを覚えていないと混乱してしまうのがSpringです。最初は戸惑うことも多いでしょうが、求人件数が多い人気フレームワークなのでぜひ学んでみてください。