こんにちは。今回は Spring Boot (Java) と Vue.js (JavaScript) を使って、超シンプルな ToDoアプリ を作成します。
目標
最小限の機能だけに縛って、フロントエンドとバックエンドを連携させる経験 をするのが目的です！
実装する機能：
- タスク一覧表示 (GET)
- タスク追加 (POST)
- タスク削除 (DELETE)
✅ 完了状態切り替えなし
✅ CSSなし (デザインなし)
技術スタック
| 分類 | 技術 |
|---|---|
| フロントエンド | Vue 3 (Vite) |
| バックエンド | Spring Boot |
| DB | H2 (開発用インメモリDB) |
| API通信 | Axios |
| ビルドツール | Maven / npm |
完成イメージ
下記のようなシンプルなUIです（cssは本講座では記述しませんが、vueの初期CSSが適用され、下記のようなデザインになります）。
開発の流れ（全体像）
-
Spring Boot の準備と REST API の作成
- Java で Task エンティティ・リポジトリ・コントローラを作る
- GET / POST / DELETE API を実装
- フロントからアクセスできるように CORS を設定
-
Vue でフロントエンドの画面作成
- Vite で Vue プロジェクトを作成
- タスク一覧表示・追加・削除の UI を作る
- Axios で Spring Boot のAPIと通信
-
動作確認とまとめ
- curl や Postman でAPI確認
- フロントエンドで実際に動かしてチェック
このシリーズで学べること
- Vue と Spring Boot の役割の分離
- REST API の基本 (GET / POST / DELETE)
- CORS 設定とフロントエンドとバックエンドをつなぐ方法
- Webアプリ開発の最低限の流れ
今後の構成（全4回）
このシリーズは、全4回で完結します：
- 第1回：概要編（この記事）
- 第2回：Spring Boot で REST API を作成
- 第3回：Vue で画面を作成し API を呼び出す
- 第4回：まとめと振り返り
こんな人にオススメ
- Vue も Spring Boot も体験してみたい
- フルスタックの最初の一歩を踏み出したい
- UI/デザインより、コードに集中したい
おわりに
次回は Spring Boot 側の開発に入ります。プロジェクト作成から、API の設計までやっていきましょう！
次回はこちら：https://qiita.com/ryusei_engineer/items/14d3157fcdbf2133edd3
このシリーズで、Web開発の初歩を楽しんでもらえると幸いです。この記事が良かったら、ストックやいいねをしてもらえると嬉しいです！