フリーキーズ | 独学プログラミング
技術コンテンツ転職フリーランスツール用語集ゲームタグ一覧

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

Java
Spring Framework
Spring Boot
Webアプリケーションフレームワーク

最終更新

実行時の環境

Java 21

Spring Boot v3.1.0

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

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

プログラミング学習でお悩みの方へ

HackATAは、エンジニアを目指す方のためのプログラミング学習コーチングサービスです。 経験豊富な現役エンジニアがあなたの学習をサポートします。

✓ 質問し放題

✓ β版公開中（2025年内の特別割引）

HackATAの詳細を見る

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>

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

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

./mnvw spring-boot:run

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

ブログタイトル一覧表示

ブログタイトル一覧表示

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

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

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

この記事をシェア

関連するコンテンツ
Javaのif文（条件分岐）ではじめての制御構造を学ぼう！

Javaのif文（条件分岐）ではじめての制御構造を学ぼう！

Java

2024/04/02

Javaの超基本！プログラミングに必須の変数宣言の仕方を学んでみよう

Javaの超基本！プログラミングに必須の変数宣言の仕方を学んでみよう

Java

2024/01/31

Javaで学ぶ評価（eval）の優先順位と結合規則の原則

Javaで学ぶ評価（eval）の優先順位と結合規則の原則

Java

2024/01/31

忘れがちなJavaの複数行文字列とエスケープシーケンスの書き方

忘れがちなJavaの複数行文字列とエスケープシーケンスの書き方

Java

2024/01/31

[プログラミング基礎]オペランドとリテラルとは何か。Javaで用例を見てみよう

[プログラミング基礎]オペランドとリテラルとは何か。Javaで用例を見てみよう

Java

2024/01/30

Javaで四則演算、階乗、べき乗、Mathクラスの使い方を習得して計算をマスターしよう

Javaで四則演算、階乗、べき乗、Mathクラスの使い方を習得して計算をマスターしよう

Java

2024/01/27