SpringBoot入門

Spring Bootは、Javaベースのフレームワークで、アプリケーションの簡単な設定や開発プロセスを効率化し、スタンドアロンの実行可能なアプリケーションを簡単に構築するためのツールセットです。

プロジェクトの作成

(1)．「プロジェクト・エクスプロラー」で右クリックして「新規→その他」を選択

(2)．「SpringBoot」の「Springスターター・プロジェクト」を選択

(3)．「名前」の入力欄に任意のプロジェクト名を入力
（このレッスンではプロジェクト名：「SpringApp」と入力）

(4)．以下のライブラリを選択して「完了」ボタンを押下

Spring Boot DevTools:
Spring Boot開発をサポートするツールセットです。
自動再起動、ホットスワップなどの機能を提供し、開発プロセスを迅速かつ効率的に行うのに役立ちます。

Lombok:
Lombokは、Javaコードの冗長さを削減するためのライブラリです。
アノテーションを使用して、ゲッターやセッター、コンストラクタ、toStringなどのコードを自動生成できます。

Thymeleaf:
ThymeleafはJavaのテンプレートエンジンで、HTMLをテンプレートとして使用して動的なWebページを生成します。
Spring Bootと組み合わせて使用することで、簡単にビューを作成できます。

Spring Web:
Spring Webは、Spring FrameworkのWeb関連機能を提供するモジュールです。
Webアプリケーション開発に関連する機能やコンポーネントを提供し、コントローラやREST APIの作成などに使用されます。

TOP画面の作成

(1)．以下のファイルを作成してください。
①：「com.example.demo」内に「Controller」パッケージを作成
②：「Controller」パッケージ内に「TopController」クラスを作成
③：「src/main/resources/templates」フォルダ内に「top.html」ファイルを作成

(2)．Controllerの作成 (TopController.java)


package com.example.demo.Controller;

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

@Controller
public class TopController {

    @GetMapping("/")
    public String getTop() {
        return "top";
    }

}

上記のコードは、ウェブサイトを作るためのプログラムで、特定の場所（URL）に特定のもの（「top」というもの）を表示する役割を持つ部品（TopController）を作成しています。

1.@Controller
これはコンピュータープログラムで特別な印です。
プログラムに「これはウェブサイトの一部です」と伝えます。
この印を付けた部品は、ウェブサイトの特定の場所やページを担当します。

2.@GetMapping("/")
これは特別な指示です。
プログラムに「/」という場所を表示する仕事をさせます。
ウェブサイトのアドレスバーに「/」を入力すると、このプログラムが動きます。

2.return "top"; これは、ウェブサイトに何を表示するかを決める指示です。
プログラムに「top」というものを表示させます。
したがって、ウェブサイトの「/」の場所に行くと、「src/main/resources/templates」フォルダ内の「top」というものが表示されます。

(3)．TOP画面の作成 (top.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>

<h1>TOP画面</h1>

</body>
</html>

<!DOCTYPE html>

ウェブページがHTML（ハイパーテキストマークアップ言語）で書かれていることを教えています。HTMLはウェブページを作成するための言語です。

<html xmlns:th="http://www.thymeleaf.org">

このタグは、ウェブページの始まりを示します。ここからウェブページのコードが始まります。

<head>

この部分は、ウェブページの設定情報やタイトルなどが書かれています。ウェブページの外見や機能に関する情報がここに含まれています。

<meta charset="UTF-8">

これは、ウェブページで使う文字の種類を指定しています。UTF-8は多くの異なる文字を表示できる形式です。

<title>TITLE</title>

ウェブページのタイトルを指定しています。ウェブブラウザのタブに表示されるテキストです。ここでは「TITLE」というタイトルを指定していますが、実際のウェブページではタイトルが変わります。

<body>

ここからがウェブページの本文です。実際のコンテンツが表示される部分です。

<h1>TOP画面</h1>

これは見出し（ヘッダー）です。大きな文字で「TOP画面」と表示されます。ウェブページのタイトルのようなものです。

アプリケーションの起動と停止方法

(1)．「SpringApp」で右クリック→「実行」→「SpringBootアプリケーション」をクリックして実行

(2)．実行するとコンソールに以下の内容が出力されます。

(3)．次に「http://localhost:8080/」にアクセスすると以下の画面が表示される事を確認してください

(4)．停止方法：Eclipse画面で以下と同様のボタンをクリックして停止できます。

値の受け渡し

(1)．TOP画面の修正 (top.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>

<h1>TOP画面</h1>

<!-- 以下追加  -->
<form method="post" action="/sample">
    名前：<input type="text" name="user_name">
    <input type="submit" value="送信">
</form>

</body>
</html>

<form>

これは、ウェブページ上にフォームを表示するためのタグです。フォームはユーザーが情報を入力し、送信できる領域を提供します。

method="post

フォームの送信方法を指定しています。"post"という値は、フォームの内容がサーバーに送信され、ウェブページのURLには表示されないことを意味します。これにより、セキュリティ上の理由から、データが見えないようになります。

action="/sample"

フォームのデータが送信される先のURLを指定しています。ここでは"/sample"というURLにデータが送信されます。サーバーはこのURLで受信したデータを処理します。

<input type="text" name="user_name">

これは、テキスト入力フィールドを作成しています。ユーザーは"名前"の前にテキストを入力できます。name属性は、この入力フィールドがサーバーに送信されるデータの名前を指定しています。ここでは"user_name"という名前になります。

<input type="submit" value="送信">

これは送信ボタンです。ユーザーがフォームに入力したデータを送信するためにクリックします。ボタンには"送信"というテキストが表示されます。

このフォームを使うと、ユーザーは名前を入力し、"送信"ボタンをクリックしてサーバーに名前を送ることができます。サーバーはこの名前を受け取り、それに対する適切な処理を行うことができます。

(2)．Controllerの修正 (TopController.java)


package com.example.demo.Controller;

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

@Controller
public class TopController {

    @GetMapping("/")
    public String getTop() {
        return "top";
    }

    @PostMapping("/sample")
    public String postTop(
        @RequestParam("user_name") String user_name,
        Model model
    ) {
        model.addAttribute("user_name", user_name);
        return "sample";
    }
}

@PostMapping("/sample"): この行は、HTTP POST リクエストが "/sample" というURLパスに送信されたときに、このメソッドが呼び出されることを示しています。
つまり、ユーザーがフォームを送信したときにこのメソッドが実行されます。

public String postTop(: この行はメソッドの宣言を始めます。
メソッド名は "postTop" です。

@RequestParam("user_name") String user_name: この行は、HTTPリクエストから送信されたデータのうち、"user_name" という名前のデータを受け取ります。
これはユーザーがフォームに入力した名前です。その名前は文字列（String）として処理され、変数 user_name に格納されます。

Model model: これは、データをビューに渡すための特別なオブジェクトです。
データをこのモデルに追加することで、後でビューで表示できます。

model.addAttribute("user_name", user_name);: この行は、モデルに "user_name" という名前で user_name の値を追加します。
これにより、後でビューでこの名前のデータを表示できるようになります。

return "sample";: この行は、このメソッドの戻り値です。"sample" という文字列を返すことで、この処理が終了した後、"sample" という名前のビュー（HTMLページ）が表示されるようになります。

つまり、このコードはユーザーがフォームに名前を入力し、送信すると、その名前を受け取り、それをビューに渡して "sample" という名前のページを表示する処理を行うものです。

(3)．送信後の画面作成 (sample.html)
1.「src/main/resources/templates」フォルダ内に「sample.html」ファイルを作成して以下のコードを記述してください。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>TITLE</title>
</head>
<body>

<h1>サンプル画面</h1>
<p th:text="${user_name}"></p>

</body>
</html>

th:text="${user_name}": この部分は、実際のテキストが表示される部分です。
${user_name} という部分は、サーバーから送られてきたデータ（ユーザーの名前）を表示するための特別なコードです。ユーザーの名前はここに表示されます。

(4)．アプリケーションを起動している場合は、停止してから起動して以下のようになることを確認してください。