2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

反省:初めて触るSpring Boot

Last updated at Posted at 2022-10-28

Screenshot 2022-10-28 at 12.04.03.png
Whitelabel Error Page (404)だと...??!!!

はじめに

Spring Boot を使ってWebアプリを作成したく、
Javaを勉強しSpring Bootを使い
初めてHello Worldを実行しようとした、その時だった。。。

開発環境

  • Java 19
  • Spring Boot 2.7.5 maven project
  • macOS Ventura (CPU:Intel)

Spring Bootとは

Springプロジェクト群をパッケージ化し、シンプルに活用できるフレームワーク

環境構築

Spring Boot Tools を追加
a-28 at 14.10.27.png

Spring Initializr Java Support を追加
a-28 at 14.09.58.png

Maven Projectを選択
a-28 at 14.07.25.png

Spring Boot Version 2.7.5を選択
a-28 at 14.07.57.png

使用言語 Javaを選択
a-28 at 14.08.20.png

Group Idは初期のcom.example
a-28 at 14.08.39.png

Artifact Idも初期のdemo
a-28 at 14.09.04.png

Packageing typeはJarを選択
ff.png

Javaのversionは19
ff2.png

toolを全て入れます。Spring Webは必須で
ff3.png

以下の様な構成になる
Screenshot 2022-10-28 at 14.17.33.png

コード

src/main/java/com/exmaple/demo/HelloWorld.java

HelloWorld.java
package com.example.demo;

import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.stereotype.Controller;
//import org.springframework.web.bind.annotation.RestController;

@Controller
public class HelloWorld {
    
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String Hello(Model model) {
        model.addAttribute("title", "Hello World");
        model.addAttribute("message", "Welcome to my site");
        return "hello";
    }

}

src/main/resources/templates/hello.html

hello.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>
<body>
    <h1 th:text="${title}"></h1>
    <p>
        <div th:text="${message}" />
    </p>
</body>
</html>

実行結果

下記のコマンドで実行

./mvnw  spring-boot:run  #開発環境にも書いてますがmacなので./で実行しています

始まりました。
Screenshot 2022-10-28 at 14.30.19.png

http://localhost:8080にアクセスします。
a-28 at 12.04.03.png

え?ファ?うん?ほぅ!!!!ほぅほぅ!!ムキィィィィ!!

原因

これは、ファイルのパスの位置は特に問題ないです。
404ということもあり、ソースコードが眼中にない様な感じなのです。
何が問題なのでしょうか。

Spring Bootを使っている方からすると、笑ってしまう
そう! このJavaのソースコードです。

実はこのコード、とりあえずHTMLに値を入れて動かしたいために無理やり書いた結果、この様なコードを書いてしまったのです。

解決方法

Spring群のパッケージ、ツールの内容をしっかりと把握・理解して書くことです。
今回、このコードで実行に成功したコードを書きます。
そこには、Spring Bootを動かすための大事なライブラリ等が追記されます。

依存関係問題

HTMLを埋め込むためにThymeleafというテンプレートエンジンを使用するコードになっています。ですので
pom.xmlに追記する必要があります。

pom.xml
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
        
    <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>

tyhmeleaf設定

thymleafを使用るためにhtmlファイルを使用する設定
src/main/resources/application.properties

application.properties
#thymeleafを使用する
spring.thymeleaf.mode=HTML

Javaコード

個人的にわからないところをコメントアウトで追記したコードです。

src/main/java/com/exmaple/demo/HelloWorld.java

HelloWorld.java
package com.example.demo;

import org.springframework.boot.SpringApplication; //

//tymeliefを使用する /src/templates/application/spring.thymeleaf.mode=HTML

import org.springframework.ui.Model; //Spring MVC thymeleafを使用するライブラリ addAtrributeを使ってvalueの値を代入

import org.springframework.web.bind.annotation.GetMapping; //GETリクエストされた際の

//import org.springframework.web.bind.annotation.RequestMapping; //数種のRequestのマッピング
//import org.springframework.web.bind.annotation.RequestMethod; // RequestMappingの引数の中で使える. リクエストの受付種類を method =  RequesrtMethod.GET/POST



import org.springframework.boot.autoconfigure.SpringBootApplication; //	Webページアプリ用,メソッドの戻り値が遷移先のview
import org.springframework.stereotype.Controller;
//import org.springframework.web.bind.annotation.RestController; //APIサーバーなどに使われる、XML JSON



@SpringBootApplication //このアノテーションで Spring Bootのアプリだと宣言します。
@Controller
public class HelloWorld {
    public static void main(String[] args) {
        SpringApplication.run(HelloWorld.class, args);
        }
    
    //リクエスト URL に対して、どのメソッドが処理を実行するか定義するアノテーション。GETでアクセスされたリクエストの場合
    //@RequestMapping(value = "/", method = RequestMethod.GET)

    //
    @GetMapping("/")
    public String Hello(Model model) {
        model.addAttribute("title", "Hello World");
        model.addAttribute("message", "Welcome to my site");
        return "hello";
    }

}

下記の関数でtitleという変数に代入してHTMLに渡すことができます

model.addAttribute("title", "Hello World");
model.addAttribute("message", "Welcome to my site");

src/main/resources/templates/hello.html

hello.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>
<body>
    <h1 th:text="${title}"></h1> <!-- titleにHellowWorldが代入されている -->
    <p>
        <div th:text="${message}" />
    </p>
</body>
</html>

実行結果

下記のコマンドで実行

./mvnw  spring-boot:run  #開発環境にも書いてますがmacなので./で実行しています

っっf.png

よっしゃ!!
これでSpring Boot × tyhmeleafの環境構築が完成です。

最後に

Pythonの様にこれやればあれやればどうにか動くと思わないほうがいいと思いました。
仕組みをしっかり知ってこれからもJava と Springの勉強に励んでいきます。

参考資料

Spring Boot 入門 - リファレンスドキュメント

Spring Quickstart Guide

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?