【ToDoアプリ開発講座 第2回】Spring Boot で REST API を作成する（バックエンド）


こんにちは！

前回の [概要編](https://qiita.com/ryusei_engineer/items/cead89af1945c52b89de) では、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`）

```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`）

```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`）

```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` ファイルがある場所）で実行してください。

```bash
./mvnw spring-boot:run
```

> 💡 Windows環境では `mvnw.cmd spring-boot:run` を使ってください。

起動に成功すると、`http://localhost:8080` でAPIが待ち受けを開始します。

---

### Postman / curl を使ってAPIの確認

#### タスク一覧を取得（GET）

```bash
curl http://localhost:8080/api/tasks
```

- 現在保存されているすべてのタスクを JSON 形式で取得します。
- 最初は空の配列 `[]` が返るはずです。

#### タスクを追加（POST）

```bash
# 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」を追加します。
- レスポンスとして追加されたタスクの情報が返されます。

**確認：** 追加後に以下のコマンドを実行し、タスクが追加されているか確認しましょう。

```bash
curl http://localhost:8080/api/tasks
```

#### タスクを削除（DELETE）

```bash
curl -X DELETE http://localhost:8080/api/tasks/1
```

- IDが1のタスクを削除します。
- 成功すればレスポンスは空ですが、ステータスコード200が返ります。

**確認：** 削除後に以下のコマンドを実行し、該当のタスクが削除されたことを確認します。

```bash
curl http://localhost:8080/api/tasks
```

---

## おわりに

これでSpring Boot側のAPIは完成です！ 次回はVue側の画面を作成し、このAPIを呼び出してタスクを操作できるようにします。

次回はこちら：https://qiita.com/ryusei_engineer/items/e5a0de7d9a362c720b59

---

この記事が良かったら、ストックやいいねをしてもらえると嬉しいです！