L08 ch06 — Vue + FastAPI フルスタック連携

ch06-fastapi 演習解説

⚠️ 自力でドリルを解いてから読んでください

ドリル 1: fetch PATCH/DELETE - CRUD 4動詞の連携 — 模範解答

ドリル名: 01-fill-patch-delete

<script setup>
import { ref, onMounted } from 'vue'
const newTitle = ref('')
const tasks = ref([])

async function loadTasks() {
  const res = await fetch('http://localhost:8000/tasks')
  tasks.value = await res.json()
}

async function addTask() {
  if (!newTitle.value.trim()) return
  await fetch('http://localhost:8000/tasks', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: newTitle.value }),
  })
  newTitle.value = ''
  await loadTasks()
}

async function toggleDone(task) {
  await fetch(`http://localhost:8000/tasks/${task.id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: task.title, done: !task.done }),
  })
  await loadTasks()
}

async function deleteTask(id) {
  await fetch(`http://localhost:8000/tasks/${id}`, {
    method: 'DELETE',
  })
  await loadTasks()
}

onMounted(loadTasks)
</script>

<template>
  <h1>タスク一覧</h1>
  <input v-model="newTitle" placeholder="タスク名を入力" />
  <button @click="addTask">追加</button>
  <ul>
    <li v-for="task in tasks" :key="task.id">
      <input type="checkbox" :checked="task.done" @change="toggleDone(task)" />
      <span :style="{ textDecoration: task.done ? 'line-through' : 'none' }">
        {{ task.title }}
      </span>
      <button @click="deleteTask(task.id)">削除</button>
    </li>
  </ul>
</template>

ドリル 1: fetch PATCH/DELETE - CRUD 4動詞の連携 — 解説

ドリル名: 01-fill-patch-delete

async function toggleDone(task) {
  await fetch(`http://localhost:8000/tasks/${task.id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: task.title, done: !task.done }),
  })
  await loadTasks()
}

async function deleteTask(id) {
  await fetch(`http://localhost:8000/tasks/${id}`, {
    method: 'DELETE',
  })
  await loadTasks()
}

• ___1 → 'PATCH'
• ___2 → loadTasks
• ___3 → id
• ___4 → 'DELETE'

ドリル 2: computed + filter - リスト絞り込み — 模範解答

ドリル名: 02-add-filter

<script setup>
import { ref, computed, onMounted } from 'vue'
const newTitle = ref('')
const tasks = ref([])
const filter = ref('all')

async function loadTasks() {
  const res = await fetch('http://localhost:8000/tasks')
  tasks.value = await res.json()
}

async function addTask() {
  if (!newTitle.value.trim()) return
  await fetch('http://localhost:8000/tasks', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: newTitle.value }),
  })
  newTitle.value = ''
  await loadTasks()
}

async function toggleDone(task) {
  await fetch(`http://localhost:8000/tasks/${task.id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: task.title, done: !task.done }),
  })
  await loadTasks()
}

async function deleteTask(id) {
  await fetch(`http://localhost:8000/tasks/${id}`, {
    method: 'DELETE',
  })
  await loadTasks()
}

const filteredTasks = computed(() => {
  if (filter.value === 'active') return tasks.value.filter(t => !t.done)
  if (filter.value === 'done') return tasks.value.filter(t => t.done)
  return tasks.value
})

onMounted(loadTasks)
</script>

<template>
  <h1>タスク一覧</h1>
  <input v-model="newTitle" placeholder="タスク名を入力" />
  <button @click="addTask">追加</button>

  <div>
    <button @click="filter = 'all'">すべて</button>
    <button @click="filter = 'active'">未完了のみ</button>
    <button @click="filter = 'done'">完了のみ</button>
  </div>

  <ul>
    <li v-for="task in filteredTasks" :key="task.id">
      <input type="checkbox" :checked="task.done" @change="toggleDone(task)" />
      <span :style="{ textDecoration: task.done ? 'line-through' : 'none' }">
        {{ task.title }}
      </span>
      <button @click="deleteTask(task.id)">削除</button>
    </li>
  </ul>
  <p>表示中 {{ filteredTasks.length }} 件 / 全 {{ tasks.length }} 件</p>
</template>

ドリル 2: computed + filter - リスト絞り込み — 解説

ドリル名: 02-add-filter

{{ANSWER_CODE}}

ドリル 3: select + 動的バインド - 優先度フィールド追加 — 模範解答

ドリル名: 03-add-priority

<script setup>
import { ref, onMounted } from 'vue'
const newTitle = ref('')
const newPriority = ref(2)
const tasks = ref([])

async function loadTasks() {
  const res = await fetch('http://localhost:8000/tasks')
  tasks.value = await res.json()
}

async function addTask() {
  if (!newTitle.value.trim()) return
  await fetch('http://localhost:8000/tasks', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: newTitle.value, priority: Number(newPriority.value) }),
  })
  newTitle.value = ''
  await loadTasks()
}

async function toggleDone(task) {
  await fetch(`http://localhost:8000/tasks/${task.id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: task.title, done: !task.done, priority: task.priority }),
  })
  await loadTasks()
}

async function deleteTask(id) {
  await fetch(`http://localhost:8000/tasks/${id}`, {
    method: 'DELETE',
  })
  await loadTasks()
}

function priorityColor(priority) {
  if (priority === 1) return 'red'
  if (priority === 3) return 'gray'
  return 'black'
}

onMounted(loadTasks)
</script>

<template>
  <h1>タスク一覧</h1>
  <input v-model="newTitle" placeholder="タスク名を入力" />
  <select v-model="newPriority">
    <option :value="1">1（高）</option>
    <option :value="2">2（中）</option>
    <option :value="3">3（低）</option>
  </select>
  <button @click="addTask">追加</button>

  <ul>
    <li v-for="task in tasks" :key="task.id">
      <input type="checkbox" :checked="task.done" @change="toggleDone(task)" />
      <span :style="{ textDecoration: task.done ? 'line-through' : 'none', color: priorityColor(task.priority) }">
        {{ task.title }}
      </span>
      <button @click="deleteTask(task.id)">削除</button>
    </li>
  </ul>
</template>

ドリル 3: select + 動的バインド - 優先度フィールド追加 — 解説

ドリル名: 03-add-priority

FastAPI 側のポイント

@app.post("/tasks", status_code=201)
async def create_task(request: Request):
    body = await request.json()
    priority = body.get("priority", 2)          # デフォルト 2
    if priority not in (1, 2, 3):
        raise HTTPException(status_code=400, detail="priority must be 1, 2, or 3")
    ...
    new_task = {
        "id": ..., "title": ..., "done": ...,
        "priority": priority,                    # dict に追加
    }

PATCH も同様。"priority" in body で省略されたリクエストを通す。

Vue 側のポイント

:value="1" と v-model の組み合わせ

<select v-model="newPriority">
  <option :value="1">1（高）</option>
  <option :value="2">2（中）</option>
  <option :value="3">3（低）</option>
</select>

:value で数値バインディング。v-model="newPriority" にすると選択した値が数値として newPriority に入る。ただし <select> の初期値は文字列として扱われる場合があるため、POST 時に Number(newPriority.value) で明示的に変換する。

色の切り替え

function priorityColor(priority) {
  if (priority === 1) return 'red'
  if (priority === 3) return 'gray'
  return 'black'
}

テンプレートにロジックを埋め込むより関数に切り出した方が読みやすい。

設計上の選択肢

• priorityColor を computed で書く方法もある（tasks が多い場合は computed の方がキャッシュ効率が良い）
• PATCH 時に priority を省略可能にするか必須にするかは要件次第。今回は省略可能にした

チェックポイント（自問自答用）

• バックエンドを変えると既存の tasks.json（priority なし）との互換性はどうなる？
• priority フィールドがない古いレコードが混在したとき、Vue 側で undefined が来たらどう表示される？

ドリル 4: onMounted + fetch + チェックボックス + 動的スタイル - フルスタック Todo を白紙から — 模範解答

ドリル名: 04-build-fullstack-todo

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

const API = 'http://localhost:8000'
const newTitle = ref('')
const tasks = ref([])

async function loadTasks() {
  const res = await fetch(`${API}/tasks`)
  tasks.value = await res.json()
}

async function addTask() {
  if (!newTitle.value.trim()) return
  await fetch(`${API}/tasks`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: newTitle.value }),
  })
  newTitle.value = ''
  await loadTasks()
}

async function toggleDone(task) {
  await fetch(`${API}/tasks/${task.id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ done: !task.done }),
  })
  await loadTasks()
}

async function deleteTask(id) {
  await fetch(`${API}/tasks/${id}`, { method: 'DELETE' })
  await loadTasks()
}

onMounted(loadTasks)
</script>

<template>
  <div>
    <h1>Todo</h1>
    <input v-model="newTitle" type="text" placeholder="タスク名" />
    <button @click="addTask">追加</button>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <input type="checkbox" :checked="task.done" @change="toggleDone(task)" />
        <span :style="{ textDecoration: task.done ? 'line-through' : 'none' }">
          {{ task.title }}
        </span>
        <button @click="deleteTask(task.id)">削除</button>
      </li>
    </ul>
  </div>
</template>

ドリル 4: onMounted + fetch + チェックボックス + 動的スタイル - フルスタック Todo を白紙から — 解説

ドリル名: 04-build-fullstack-todo

フルスタック実装の思考プロセス

1. データの流れを設計する — UI ↔ Vue state ↔ HTTP API ↔ FastAPI
2. マウント時の初期化 — onMounted で API 呼び出し
3. ユーザー操作 → API 呼び出し → state 更新 — 一連の流れを関数化
4. エラーハンドリング — 本ドリルでは省略可、実務では try/catch で UI に伝える

「楽観的UI」 vs 「サーバー再取得」

このドリルでは サーバー再取得 (loadTasks()) 方式を採用:

スタートは「サーバー再取得」、慣れたら「楽観的UI」に書き換えてみると深い学習に。

実装が複数あり得る点

• 状態管理: ref / reactive / Pinia (このドリルでは Pinia は不要)
• fetch のラッパー: 関数毎に直接書く / 共通の api.js を作る
• 完了状態の見せ方: 取り消し線 / 文字色変更 / アイコン
• 削除確認ダイアログ: あり / なし

ヒント: PATCH / DELETE の空欄

• ___1: 既存リソースの部分更新に使う HTTP メソッド（PUT は全体置き換え）
• ___2: onMounted で呼んでいる「一覧を取得して画面に反映する関数」と同じもの
• ___3: deleteTask(id) で受け取った引数をそのまま URL に入れる
• ___4: リソースを削除する HTTP メソッド

解答: PATCH / DELETE の空欄

async function toggleDone(task) {
  await fetch(`http://localhost:8000/tasks/${task.id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: task.title, done: !task.done }),
  })
  await loadTasks()
}

async function deleteTask(id) {
  await fetch(`http://localhost:8000/tasks/${id}`, {
    method: 'DELETE',
  })
  await loadTasks()
}

• ___1 → 'PATCH'
• ___2 → loadTasks
• ___3 → id
• ___4 → 'DELETE'

> {{HINT}}

解答

{{ANSWER_CODE}}

ヒント

FastAPI 側

• body.get("priority", 2) でデフォルト値 2 を設定できる
• バリデーション: if priority not in (1, 2, 3): raise HTTPException(400, ...)
• new_task の dict に "priority": priority を追加する
• PATCH も同様に priority を t.update(...) の中に含める

Vue 側

• newPriority = ref(2) で優先度の状態を管理する
• <select v-model="newPriority"> でセレクトボックスを双方向バインディング
• v-model は数値として受け取るために :value="1" のように : をつける（または Number() で変換）
• 色の切り替えには :style バインディングを使う:

  :style="{ color: task.priority === 1 ? 'red' : task.priority === 3 ? 'gray' : 'black' }"
  

• PATCH の body に priority: task.priority を追加する

解答

FastAPI 側のポイント

@app.post("/tasks", status_code=201)
async def create_task(request: Request):
    body = await request.json()
    priority = body.get("priority", 2)          # デフォルト 2
    if priority not in (1, 2, 3):
        raise HTTPException(status_code=400, detail="priority must be 1, 2, or 3")
    ...
    new_task = {
        "id": ..., "title": ..., "done": ...,
        "priority": priority,                    # dict に追加
    }

PATCH も同様。"priority" in body で省略されたリクエストを通す。

Vue 側のポイント

:value="1" と v-model の組み合わせ

<select v-model="newPriority">
  <option :value="1">1（高）</option>
  <option :value="2">2（中）</option>
  <option :value="3">3（低）</option>
</select>

:value で数値バインディング。v-model="newPriority" にすると選択した値が数値として newPriority に入る。ただし <select> の初期値は文字列として扱われる場合があるため、POST 時に Number(newPriority.value) で明示的に変換する。

色の切り替え

function priorityColor(priority) {
  if (priority === 1) return 'red'
  if (priority === 3) return 'gray'
  return 'black'
}

テンプレートにロジックを埋め込むより関数に切り出した方が読みやすい。

設計上の選択肢

• priorityColor を computed で書く方法もある（tasks が多い場合は computed の方がキャッシュ効率が良い）
• PATCH 時に priority を省略可能にするか必須にするかは要件次第。今回は省略可能にした

チェックポイント（自問自答用）

• バックエンドを変えると既存の tasks.json（priority なし）との互換性はどうなる？
• priority フィールドがない古いレコードが混在したとき、Vue 側で undefined が来たらどう表示される？

ヒント

段階1: データを ref で持ち、マウント時に fetch

import { ref, onMounted } from 'vue'
const tasks = ref([])

async function loadTasks() {
  const res = await fetch('http://localhost:8000/tasks')
  tasks.value = await res.json()
}

onMounted(loadTasks)

段階2: 入力欄 + 「追加」ボタン

const newTitle = ref('')
async function addTask() {
  await fetch('http://localhost:8000/tasks', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: newTitle.value }),
  })
  // 追加後は loadTasks() で再取得
}

段階3: v-for + チェックボックス + 削除

<li v-for="task in tasks" :key="task.id">
  <input type="checkbox" :checked="task.done" @change="toggleDone(task)" />
  <span :style="{ textDecoration: task.done ? 'line-through' : 'none' }">
    {{ task.title }}
  </span>
  <button @click="deleteTask(task.id)">削除</button>
</li>

段階4: 完了切替

async function toggleDone(task) {
  await fetch(`http://localhost:8000/tasks/${task.id}`, {
    method: 'PATCH',
    body: JSON.stringify({ done: !task.done }),
    headers: { 'Content-Type': 'application/json' },
  })
  await loadTasks()
}

解説

フルスタック実装の思考プロセス

1. データの流れを設計する — UI ↔ Vue state ↔ HTTP API ↔ FastAPI
2. マウント時の初期化 — onMounted で API 呼び出し
3. ユーザー操作 → API 呼び出し → state 更新 — 一連の流れを関数化
4. エラーハンドリング — 本ドリルでは省略可、実務では try/catch で UI に伝える

「楽観的UI」 vs 「サーバー再取得」

このドリルでは サーバー再取得 (loadTasks()) 方式を採用:

スタートは「サーバー再取得」、慣れたら「楽観的UI」に書き換えてみると深い学習に。

実装が複数あり得る点

• 状態管理: ref / reactive / Pinia (このドリルでは Pinia は不要)
• fetch のラッパー: 関数毎に直接書く / 共通の api.js を作る
• 完了状態の見せ方: 取り消し線 / 文字色変更 / アイコン
• 削除確認ダイアログ: あり / なし

ヒント

1. ref を追加

const searchQuery = ref('')

2. computed で絞り込み

const filteredTasks = computed(() => {
  if (!searchQuery.value) return tasks.value
  return tasks.value.filter(t =>
    t.title.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

.toLowerCase() で大文字小文字無視。

3. テンプレートで filteredTasks

<input v-model="searchQuery" placeholder="検索" />
<ul>
  <li v-for="task in filteredTasks" :key="task.id">

tasks を filteredTasks に差し替えるだけ。

解説

なぜ computed か

computed は 依存する ref が変わると自動再計算 + 結果をキャッシュ。

通常の関数だと renderingごとに毎回 filter が走ってしまうが、 computed なら tasks か searchQuery が変わったときだけ計算する。

フロント側 filter vs サーバー側 filter

実務では「初回ロード時に全件 → フロント filter」 と「都度 サーバー filter」 を組み合わせる。

debounce (高度な話)

ユーザーが「a / ap / app / appl / apple」 とタイプするたびに filter が走る。 通常は問題ないが、 サーバー filter と組み合わせる場合は debounce (300ms 待ってから検索) で API 呼び出し回数を減らす。

ヒント

sort() は破壊的なので copy を取る

const copy = [...tasks.value]
copy.sort((a, b) => a[sortBy.value] - b[sortBy.value])

tasks.value.sort(...) を直接やると元配列を書き換えてしまい reactivity に影響する。 spread でコピー。

数値ソートの key

(a, b) => a.id - b.id           // id 昇順
(a, b) => a.priority - b.priority  // priority 昇順

文字列なら localeCompare、 数値なら引き算で OK。

sortBy で動的にアクセス

a[sortBy.value] の bracket記法で動的にフィールドアクセスできる。

解説

なぜ sort() を直接呼んではいけないか

tasks.value.sort(...)   // ❌ tasks 自体が変わる

Vue 3 の reactivity は内部で proxy を介すが、 「並び替え」 だけでも書き換え判定が走り、 余計な再描画が起きる。 computed の中では 元データを保護 するのが定石。

ソート方向 (asc / desc)

• 昇順: (a, b) => a.key - b.key
• 降順: (a, b) => b.key - a.key (a, b を入れ替え)

将来 ?order=desc を加えるときも同じ書式で拡張できる。

安定ソート

JavaScript の Array.prototype.sort は ES2019 以降で 安定ソート保証。 同じキー値の要素は元の順序を維持する。

ヒント

async function deleteTask(id) {
  if (!window.confirm("削除しますか?")) return
  // 以下、 既存の fetch DELETE
}

window.confirm は OK で true、 キャンセル で false。

解説

なぜ確認ダイアログが必要か

DELETE は不可逆操作。 誤クリックで貴重なデータを失う事故を防ぐ。

window.confirm の制約

• カスタマイズ不可 (OK / Cancel ボタンのみ、 多言語切替不可)
• 同期的 (= ブロッキング) なのでスタイリッシュではない

実務では

• カスタムモーダル (Headless UI / Vuetify / 自前) を使うのが一般的
• 削除取り消し (Undo) パターンも検討 → 「削除しました [取消]」 トースト
• ダブルクリック必須にする UI もある

本 drill は最小コストで「削除 = 確認」 のパターンを学ぶ目的。

ヒント

状態管理

• editingId: 編集中の task id (null なら誰も編集中じゃない)
• editingTitle: 編集中の文字列バッファ

v-if で切替

<input v-if="editingId === task.id" v-model="editingTitle" @keyup.enter="saveEdit(task)" @blur="saveEdit(task)" />
<span v-else @click="startEdit(task)">{{ task.title }}</span>

キー modifier

• @keyup.enter = Enter キー
• @keyup.esc = Escape キー

Vue の event modifier で簡潔に書ける。

blur (フォーカスアウト) で保存

@blur イベントを使うと、 ユーザーが「クリックして他の要素に移動した」 時に自動保存。

解説

inline 編集の UX

「編集ボタンを押して別画面に行く」 より、 「その場でクリックして直す」 方が早い。 Trello, Notion 等の現代 UI で標準。

v-if vs v-show

本 drill では v-if を使った (DOM を生成/破棄)。

v-show は表示/非表示を CSS で切替。

inline edit では編集モード時のみ input が必要なので v-if で十分。

autofocus

input 要素に autofocus 属性をつけると、 描画直後に自動でフォーカスが当たる。 ユーザーがすぐタイプ開始できる。

編集中の他操作

実務では「他の task をクリックしたら現在の編集を確定/破棄するか」 等の判断が必要。 本 drill は単純化のため、 他をクリックしても影響しない仕様。

デバウンス自動保存

更に高度な UX として「タイプ中 1秒静止したら自動保存」 もある。 本 drill は Enter / blur で十分。

ヒント

try / finally で確実にリセット

async function loadTasks() {
  loading.value = true
  try {
    // fetch ...
  } finally {
    loading.value = false
  }
}

finally を使うとエラーが起きても確実に loading を false に戻せる。

disabled で連打防止

<button :disabled="loading">追加</button>
<input :disabled="loading" />

loading 中はユーザーが連打できないように。

v-if で表示切替

<p v-if="loading">読み込み中…</p>
<ul v-if="!loading">...</ul>

解説

ローディング表示の重要性

• ユーザーは「画面が反応しないと焦って連打する」 → サーバー負荷上がる
• 「今、 何かが進んでいる」 ことを伝えるのは UX の基本

try / finally パターン

loading.value = true
try {
  await heavyOperation()
} catch (e) {
  // エラー処理
} finally {
  loading.value = false  // 確実に解除
}

「成功でも失敗でも loading を解除する」 を明示する標準パターン。

グローバル loading vs 個別 loading

本 drill は全 fetch 共通の 1つの loading で UI 全体を制御。 実務では:

• 個別 loading (この task だけ削除中) → ボタン横の spinner
• グローバル loading → ページ全体の overlay

を使い分ける。

ローディング表示の見え方

• 短すぎる (~100ms) loading は表示するとちらつく → 200ms 以上の遅延で出すパターンも
• skeleton screen (= ぼやけたプレースホルダ) → 体感速度を改善する