【ToDoアプリ開発講座 第4回】まとめと振り返り

こんにちは！
この記事は、Spring Boot と Vue.js で作る超シンプルToDoアプリ開発シリーズ の最終回、振り返り編です。

---

ここまでのおさらい

第1回 概要編

• Spring Boot と Vue を使ったアプリを作成する方針を説明

第2回 Spring Boot API編

• Task エンティティとレポジトリ、コントローラを作成
• GET / POST / DELETE の REST API を実装
• Postman や curl で動作確認

第3回 Vue画面編

• Vite + Vue 3 でプロジェクト生成
• タスク一覧の表示 / 追加 / 削除
• Axios でバックエンドAPIと連携

---

開発の流れ（シリーズ総まとめ）

1. バックエンド構築（Spring Boot）

   • Entity, Repository, Controller を用意
   • REST API（GET / POST / DELETE）を実装
   • フロントと通信できるように CORS を設定

2. フロントエンド構築（Vue 3）

   • Vite で Vue プロジェクトをセットアップ
   • タスクの表示、追加、削除機能を実装
   • Axios でバックエンドAPIと非同期通信

3. テストと確認

   • curl や Postman でAPI確認
   • フロント画面から一通り操作して動作確認

---

学んだこと

• Spring Boot でシンプルな REST API を作成する手順
• Vue 3 (Composition API) の基本的な使い方
• Axios での非同期API呼び出し
• CORS問題との向き合い方
• フロントエンドとバックエンドの分離と連携

---

これからの発展アイデア

• タスクに「完了状態」を追加して切り替え
• デザインを表示してもっと見やすく
• DB を MySQL / PostgreSQL に変更
• リファクタリング (edit 機能)の実装
• ログイン機能（管理者用）
• テストの作成 (Spring Boot Test / Vitest)

---

おわりに

ここまで読んで頂きありがとうございました！

このシリーズは、フルスタックWeb開発の最初の一歩として、有益な練習になるように考えて作成しました。

この記事が良かったら、ストックやコメントで応援頂けると幸いです！