こんにちは！
前回の 概要編 では、Spring Boot と Vue.js を使って超シンプルな ToDo アプリを作る方針を紹介しました。
この第2回は Spring Boot のバックエンド側のAPI を作成します！
今回の目標
- Spring Initializr でプロジェクト作成
- Entity / Repository / Controller の作成
- GET / POST / DELETE API の実装
- CORS設定
- Postman や curl で動作確認
1. Spring Initializr でプロジェクト生成
- Gradle / Maven: 使いやすい方でOK (この記事は Maven)
- Dependencies:
- Spring Web
- Spring Data JPA
- H2 Database
- Lombok
プロジェクトの Group を com.example や com.example.demo にした場合、生成されるパッケージ構成は com.example.demo になります。以下のコードでは com.example.demo を前提としています。
2. Entity の作成（src/main/java/com/example/demo/entity/Task.java）
package com.example.demo.entity;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.Getter;
import lombok.Setter;
@Entity
@Getter
@Setter
public class Task {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
}
解説
@Entity：このクラス(Task.java)がデータベースのテーブルにマッピングされることを示します。
@Id：private Long id;が主キーであることを示します。
@GeneratedValue：IDの値を自動生成します（MySQLでいうAUTO_INCREMENTのようなもの）。
@Getter, @Setter：Lombokにより、getter/setterメソッドを自動生成。
3. Repository の作成（src/main/java/com/example/demo/repository/TaskRepository.java）
package com.example.demo.repository;
import com.example.demo.entity.Task;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
@Repository
public interface TaskRepository extends JpaRepository<Task, Long> {
}
解説
JpaRepository<Task, Long>：Taskエンティティを扱うリポジトリで、主キーの型は Long。
findAll(), save(), deleteById() などの基本的なDB操作はSpring Data JPAにより、継承しただけで使えるようになります。
4. Controller の作成（src/main/java/com/example/demo/controller/TaskController.java）
package com.example.demo.controller;
import com.example.demo.entity.Task;
import com.example.demo.repository.TaskRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/tasks")
@CrossOrigin(origins = "http://localhost:5173")
@RequiredArgsConstructor
public class TaskController {
private final TaskRepository taskRepository;
@GetMapping
public List<Task> getAllTasks() {
return taskRepository.findAll();
}
@PostMapping
public Task createTask(@RequestBody Task task) {
return taskRepository.save(task);
}
@DeleteMapping("/{id}")
public void deleteTask(@PathVariable Long id) {
taskRepository.deleteById(id);
}
}
解説
@RestController：戻り値をそのままJSONとして返すWeb API用のクラスです。
@RequestMapping("/api/tasks")：このクラス内の全APIのURLの共通部分。
@CrossOrigin(...)：CORSエラーを回避するための設定です（Vueの開発サーバと通信可能にする）。
@GetMapping / @PostMapping / @DeleteMapping：HTTPメソッドごとに処理を振り分け。
@PathVariable：URLの中の {id} を取得。
@RequestBody：リクエストのJSONをJavaオブジェクトに変換。
5. 動作確認
アプリ起動
以下のコマンドは、プロジェクトのルートディレクトリ（pom.xml ファイルがある場所）で実行してください。
./mvnw spring-boot:run
💡 Windows環境では
mvnw.cmd spring-boot:runを使ってください。
起動に成功すると、http://localhost:8080 でAPIが待ち受けを開始します。
Postman / curl を使ってAPIの確認
タスク一覧を取得（GET）
curl http://localhost:8080/api/tasks
- 現在保存されているすべてのタスクを JSON 形式で取得します。
- 最初は空の配列
[]が返るはずです。
タスクを追加（POST）
# macOS / Linux / WSL の場合:
curl -X POST -H "Content-Type: application/json" -d '{"title":"test task"}' http://localhost:8080/api/tasks
# Windows (コマンドプロンプト) の場合:
curl -X POST -H "Content-Type: application/json" -d "{\"title\":\"test task\"}" http://localhost:8080/api/tasks
- 新しいタスク「test task」を追加します。
- レスポンスとして追加されたタスクの情報が返されます。
確認： 追加後に以下のコマンドを実行し、タスクが追加されているか確認しましょう。
curl http://localhost:8080/api/tasks
タスクを削除（DELETE）
curl -X DELETE http://localhost:8080/api/tasks/1
- IDが1のタスクを削除します。
- 成功すればレスポンスは空ですが、ステータスコード200が返ります。
確認： 削除後に以下のコマンドを実行し、該当のタスクが削除されたことを確認します。
curl http://localhost:8080/api/tasks
おわりに
これでSpring Boot側のAPIは完成です！ 次回はVue側の画面を作成し、このAPIを呼び出してタスクを操作できるようにします。
次回はこちら：https://qiita.com/ryusei_engineer/items/e5a0de7d9a362c720b59
この記事が良かったら、ストックやいいねをしてもらえると嬉しいです！