今回の目標

Vite + Vue 3 のプロジェクト作成
画面にタスク一覧を表示
新規追加と削除の実装
Axios で Spring Boot API を呼び出す

1. Vue 3 + Vite のプロジェクト作成

npm create vite@latest todo-frontend -- --template vue
cd todo-frontend
npm install
npm install axios
npm run dev

2. コンポーネント構成

src/components/TodoApp.vue

<template>
  <div>
    <h1>ToDo App</h1>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="新しいタスク" />
    <button @click="addTask">追加</button>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }}
        <button @click="deleteTask(task.id)">削除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const tasks = ref([])
const newTask = ref('')

async function fetchTasks() {
  const res = await axios.get('http://localhost:8080/api/tasks')
  tasks.value = res.data
}

async function addTask() {
  if (!newTask.value.trim()) return
  await axios.post('http://localhost:8080/api/tasks', { title: newTask.value })
  newTask.value = ''
  await fetchTasks()
}

async function deleteTask(id) {
  await axios.delete(`http://localhost:8080/api/tasks/${id}`)
  await fetchTasks()
}

onMounted(fetchTasks)
</script>

解説

このコンポーネントはタスクの表示・追加・削除という基本的なToDo機能を実装しています。

ref([])/ ref('')：Vue 3 の Composition API を使ってリアクティブな状態を定義しています。

onMounted(fetchTasks)：初回マウント時に API からデータを取得して画面に表示。

fetchTasks()：バックエンドの GET /api/tasks を呼び出して、全タスクを取得。

addTask()：新しいタスクのタイトルを POST で送信し、登録後に一覧を更新。

deleteTask(id)：指定IDのタスクを DELETE で削除し、再度一覧を取得。

v-model / v-for：Vueのテンプレート構文で、フォーム入力とループ表示を制御しています。

3. App.vue で表示

<template>
  <TodoApp />
</template>

<script setup>
import TodoApp from './components/TodoApp.vue'
</script>

4. CORS について

Spring Boot 側の Controller に

@CrossOrigin(origins = "http://localhost:5173")

を追加しておきましょう！

おわりに

これで、Vue 側の画面作成 & Spring Boot API 連携が完了です！

次回は、このシンプルアプリ開発を振り返って、今後の発展も考えてみます！

次回：https://qiita.com/ryusei_engineer/items/695e198a4a9f6e75b45b

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