🎯 この記事で実現すること

名前と点数を入力フォームで送信し、それを一覧テーブルに追加表示する本格的なWebアプリケーションを作成します。前回の「表示だけ」から一歩進んで、ユーザーが実際にデータを入力できる動的なアプリに挑戦しましょう！

📱 完成イメージ

入力画面

一覧画面

名前	点数
太郎	85
花子	92
次郎	78

[新しい学生を登録] ← リンクで入力画面に戻る

🗂 ファイル構成

今回作成するファイルは以下の4つです：

ファイル名	役割
Student.java	名前と点数を持つモデルクラス
StudentController.java	入力フォームと一覧を処理するコントローラ
student_form.html	入力画面（フォーム）
student_list.html	一覧表示画面（テーブル形式）

🛠 実装手順

Step 1: Studentモデルクラスを拡張

前回からsetterを追加します。フォームからデータを受け取るために必要です。

ファイル： src/main/java/com/example/demo/model/Student.java

重要ポイント：

• public Student() {} – 空のコンストラクタが必要
• setName(), setScore() – フォームから値を設定するため

Step 2: StudentControllerを作成

3つの処理（フォーム表示・送信処理・一覧表示）をまとめて管理します。

ファイル： src/main/java/com/example/demo/controller/StudentController.java

処理の流れ：

1. GET /student/form → 入力フォーム画面を表示
2. POST /student/submit → 送信されたデータをリストに追加
3. GET /student/list → 登録済みデータを一覧表示

Step 3: 入力フォーム画面を作成

ファイル： src/main/resources/templates/student_form.html

フォームの技術ポイント：

• th:action="@{/student/submit}" – 送信先URL
• th:object="${student}" – バインドするオブジェクト
• th:field="*{name}" – Studentクラスのnameフィールドと連携
• required – 必須入力チェック

Step 4: 一覧表示画面を作成

ファイル： src/main/resources/templates/student_list.html

表示の技術ポイント：

• th:if="${#lists.isEmpty(studentList)}" – リストが空の場合の表示
• th:unless – 条件の逆（リストが空でない場合）
• th:each="student, stat : ${studentList}" – 繰り返し表示
• th:href="@{/student/form}" – フォーム画面へのリンク

🔍 動作確認手順

1. Spring Bootアプリケーションを起動
2. ブラウザで http://localhost:8080/student/form にアクセス
3. 名前（例：太郎）と点数（例：85）を入力
4. 「一覧に追加」ボタンをクリック
5. 一覧画面に遷移し、入力したデータが表示される
6. 「新しい学生を登録」リンクで再びフォーム画面に戻れる

💡 技術解説

MVCパターンの実装

• Model（Student）: データ構造を定義
• View（HTML）: ユーザーインターフェース
• Controller（StudentController）: 処理ロジックとデータの橋渡し

Spring Bootの重要な機能

アノテーション	役割
@Controller	このクラスがコントローラーであることを宣言
@GetMapping	HTTP GETリクエストを処理
@PostMapping	HTTP POSTリクエストを処理
@ModelAttribute	フォームデータを自動でオブジェクトに変換

Thymeleafの便利な機能

属性	説明
th:action	フォーム送信先URL
th:object	バインドするオブジェクト
th:field	フォーム要素とオブジェクトのフィールドを連携
th:each	リスト要素の繰り返し表示
th:if/unless	条件分岐表示

🚀 さらなる機能拡張

この基本形ができたら、以下の機能に挑戦してみましょう：

1. データベース連携

2. 合格判定機能

3. バリデーション機能

4. 削除・編集機能

• 各行に「編集」「削除」ボタンを追加
• RESTful URLパターンの実装

📝 まとめ

この記事では、Spring Boot + Thymeleafを使って完全な CRUD（Create, Read）操作の基礎を実装しました。

習得した技術スキル：

• フォームデータの送受信
• MVCアーキテクチャの実装
• Thymeleafテンプレートエンジンの活用
• RESTfulなURL設計の基礎

実用的なポイント：

• ユーザー入力の受け取り方法
• データの一時保存と表示
• 画面間の遷移制御

このチュートリアルをマスターすれば、多くのWebアプリケーションの基本パターンが理解できます。次はデータベース連携や高度な機能に挑戦して、より実用的なアプリケーションを作ってみましょう！

次回予告： 「Spring Boot + H2データベースで永続化機能を実装しよう！」