README-JP.md

HTMX + Spring Boot + TailwindCSS

HtmxとSpring bootの学習用としてこのプロジェクトを作成しました。

このプロジェクトでは以下の機能を実装しています。

• ユーザーの検索
• ユーザーの作成
• ユーザーの編集
• ユーザーの削除

このプロジェクトはフロントエンド（Htmx）とバックエンド（Spring Boot）の2つのプロジェクトで構成されています。

project_root
├── frontend (Htmx)
└── backend (Spring boot)

目次

1. デモ
2. プロジェクト概要
3. 起動方法
4. テスト実施
5. Swagger

デモ

ユーザー作成

ユーザー更新

ユーザー削除

プロジェクト概要

各プロジェクトの概要は以下の通りです。

フロントエンド

• Htmx
  • 入力内容の検証
  • 入力フォームの送信
• TailwindCSS
  • 画面のデザイン・レイアウト作成
• FlowBite
  • モーダルの表示/非表示の制御
• Vitest・Puppeteer
  • E2Eテスト実装

バックエンド

• Spring Boot・Java
  • ユーザー検索
  • ユーザー作成
  • ユーザー更新
  • ユーザー削除
  • ユーザー作成モーダル表示
  • ユーザー更新モーダル表示
  • ユーザー削除モーダル表示
• JUnit
  • 単体テスト実装

各プロジェクトで使用している主要なライブラリ・フレームワークのバージョンは以下の通りです。

フロントエンド

• Htmx: 1.9.12
• TailwindCSS: 3.4.3
• FlowBite: 2.3.0
• Vitest: 1.5.3
• Puppeteer: 22.7.1

バックエンド

• Spring Boot: 3.2.0
• Java: 21.0.1
• Gradle: 8.5
• JUnit: 5.10.2
• MyBatis: 3.5.14

起動方法

概要

このプロジェクトのディレクトリ構成は以下になっています。

データベースはインメモリーデータベースを採用しているため別途環境を構築する必要はありません。

project_root
├── frontend (Htmx)
└── backend (Spring boot)

フロントエンド起動

$ cd frontend
$ npm ci
$ npm run start:fe

バックエンド起動

Linux / Mac

$ cd frontend
$ npm run build:be:linux
$ npm run start:be

Windows

$ cd frontend
$ npm run build:be:windows
$ npm run start:be

フロントエンドとバックエンドの起動後に以下のURLにアクセスします。

http://localhost:3000/src/

テスト実施

E2Eテスト実施

$ cd frontend
$ npm run start:fe
$ npm run start:be
$ npm run test:fe

バックエンド単体テスト実施

Linux / Mac

$ cd frontend
$ npm run test:be:linux

Windows

$ cd frontend
$ npm run test:be:windows

Swagger

Swaggerを用いてAPI定義を作成しています。

API定義を参照するにはバックエンドを起動後に以下のURLにアクセスします。

http://localhost:8080/swagger-ui/index.html