MacでSpring BootのWeb開発を始めよう！最初に見たいシンプルなチュートリアル

最終更新日 2024年1月5日

実行時の環境

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で実施したい場合は、以下のリンクからダウンロードしてください。

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

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

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

brew tap spring-projects-experimental/spring-cli

brew install spring-cli

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

$ 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のロゴが表示されれば成功です。

.   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: 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/以下を表示します。

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

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

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でパッケージを作れば自動的に作られ場合もありますが、今回は自分で書いてみましょう。

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の編集です。以下を追加してください。

<?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を作成し、編集します。

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/に入れましょう。

<!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を作成し、編集していきましょう。

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で使っていきます。

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を編集しましょう。

<!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>