はじめに

自分自身の学習の一環としてAIに作成してもらったハンズオンです。
@itsuki_mさんが紹介していた学習方法で、いいなと思って実践してみました！

私は普段からAIに、自分の学習状況を共有しているので進捗に合わせたハンズオンを作ってくれます！(ホントに便利で助かる...)

上記のような背景から内容についてソース不明です。閲覧や実践は自己責任でお願いいたします。

目的

このハンズオンでは、Spring Bootを使用して簡単なCRUDアプリを作成します。
具体的には、メモを管理するアプリを作成し、以下の機能を実装します。
-メモの作成
-メモの一覧表示
-メモの編集
-メモの削除

開発環境

-Java 23.0.1
-Spring Boot 3.x
-MyBatis
-H2 Database（組み込みDB）
-Thymeleaf（テンプレートエンジン）
-VS Code

1. Spring Bootとは？

Spring Bootは、JavaでWebアプリケーションを簡単に作成できるフレームワークです。設定を最小限にしながら、必要な機能を柔軟に追加できるのが特徴です。

2. Thymeleafとは？

Thymeleaf（タイムリーフ）は、Javaのテンプレートエンジンの1つです。HTMLファイルに直接組み込めるため、フロントエンドとバックエンドをスムーズに連携できます。

3. MyBatisとは？

MyBatisは、SQLを直接書けるO/Rマッパー（Object-Relational Mapper）です。データベースの操作をJavaコードと分離しつつ、自由度の高いクエリが記述できます。

4. プロジェクトの作成

4.1 Spring Initializrを使用してプロジェクトを作成

以下の依存関係を追加してください。
Spring Web（Webアプリケーション開発）
Thymeleaf（テンプレートエンジン）
Spring Boot DevTools（開発支援ツール）
MyBatis Framework（O/Rマッパー）
H2 Database（組み込みデータベース）

5. データベース設定（H2 Database）

src/main/resources/application.properties に以下を追加してください。

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.h2.console.enabled=true
mybatis.mapper-locations=classpath:mapper/*.xml

6. メモのデータモデルを作成

6.1 エンティティクラス

Memo.java

package com.example.demo.model;

public class Memo {
    private int id;
    private String content;

    public int getId() { return id; }
    public void setId(int id) { this.id = id; }

    public String getContent() { return content; }
    public void setContent(String content) { this.content = content; }
}

Q1: このエンティティクラスでprivateを使う理由は何でしょうか？

6.2 MyBatisのマッパー

MemoMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.MemoMapper">

    <select id="findAll" resultType="com.example.demo.model.Memo">
        SELECT * FROM memos;
    </select>

    <insert id="insert">
        INSERT INTO memos (content) VALUES (#{content});
    </insert>

    <update id="update">
        UPDATE memos SET content=#{content} WHERE id=#{id};
    </update>

    <delete id="delete">
        DELETE FROM memos WHERE id=#{id};
    </delete>
</mapper>

Q2: #{content} や #{id} はどのような役割を果たしているでしょうか？

7. Thymeleafのテンプレート作成

7.1 メモ一覧表示

memo/index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>メモ一覧</title>
</head>
<body>
    <h1>メモ一覧</h1>
    <form action="/memos/add" method="post">
        <input type="text" name="content" placeholder="新しいメモ">
        <button type="submit">追加</button>
    </form>
    <ul>
        <li th:each="memo : ${memos}">
            <span th:text="${memo.content}"></span>
            <form action="/memos/update" method="post" style="display:inline;">
                <input type="hidden" name="id" th:value="${memo.id}">
                <input type="text" name="content" th:value="${memo.content}">
                <button tAype="submit">更新</button>
            </form>
            <form action="/memos/delete" method="post" style="display:inline;">
                <input type="hidden" name="id" th:value="${memo.id}">
                <button type="submit">削除</button>
            </form>
        </li>
    </ul>
</body>
</html>

Q3:`th:text="${memo.content}"` はどのような処理を行っているでしょうか？

8. アプリの起動手順

VS Code でプロジェクトを開く
ターミナルで mvn spring-boot:run を実行
http://localhost:8080/memos/ にアクセスして動作を確認

課題:

1.エラーハンドリングを追加してみよう！
2.MyBatisのマッパーを使って検索機能を追加してみよう！

次のステップ:

-Spring BootをAWS Lambdaにデプロイする方法を学ぶ
-S3やRDSを活用したクラウドアプリ開発

さいごに

デフォルトでAIに作ってもらうと上からコピペするだけのハンズオンになったりします。
難易度、説明の粒度、問題や課題の有無を設定してあげることで調整できます！
ぜひぜひ実践してみてください～
ハンズオンの感想、技術的な指摘などお待ちしてます～！