Vue 中級

Vue 中級

はじめに

教材の見方・PC 環境準備・配布物の中身

> 本章のテーマは Vue Router + computed + watch で「複数画面アプリ」 を作ること。

> 「Vue と FastAPI を繋ぐ」 部分の下拵え (CORS / .env / try-catch) は配布版に既に入っている。

学習の流れ (= 1 日完走想定 / 自分のペースで分割可)

> 本編だけで操作が完結するように作っている。 詰まったら答え (答え/step*/) を見る。

配布物の中身

配布資料/
├─ はじめに.pdf                  ← 今読んでいるもの
├─ Vue中級.pdf                   ← 本編 (今日の主役)
├─ サンプルコード/
│    ├─ 作業用/    ← STEP1 開始時点 (これを触る)
│    │    ├─ fastapi/      Python の FastAPI サーバー (起動するだけ)
│    │    └─ frontend/     Vue の画面 (vue-basic 完成形)
│    ├─ 完成品/    ← STEP5 完成形 (Router + 詳細 + computed + watch)
│    └─ 答え/      ← 各 STEP のゴール (詰まったら)
├─ 演習/                  Vue 中級の演習 (vitest)
├─ 演習問題.pdf            ← 演習の手引き
└─ 演習問題・ヒント.pdf    ← 詰まったときのヒント

進め方の基本姿勢

> 今日のキーワードは 「ターミナルを 2 本」。 FastAPI 用 と Vue 用 で常に 2 つ動かす。

PC 環境チェック (10 分)

🖥️ ターミナルで以下を確認:

python --version    # 3.10 以上を期待
node --version      # 20 以上を期待
npm --version       # 9 以上を期待

> 全部 OK なら次へ。 どれかが入っていない・古い場合は first-step に戻って環境構築から。

> 先に FastAPI (first-step/ch01-uv-mise) と Vue (vue-basic) を一通りこなしていれば、 同じ環境がそのまま使える。

作業フォルダを開く

📝 VS Code で サンプルコード/作業用/ フォルダを開く。

> 1 つの VS Code ウィンドウで 作業用/ を開けば、 fastapi/ と frontend/ の両方が見える。

詰まった時の歩き方

1. 本編 PDF の同じ STEP を読み直す (見落とし発見)
2. DevTools の Console を見る (赤い文字に答えがある)
3. 答え/stepN/ を開いて差分を確認 (どこが違うか)
4. それでも詰まったら 学習者に声を掛ける (一人で 15 分粘ったら声出す目安)

よくあるエラーと対処

安全装置

🛟 作業用フォルダを書き換えてしまっても、 完成品フォルダは触らない

サンプルコード/
├─ 作業用/     ← ここを触る (壊しても OK)
├─ 完成品/     ← 触らない (リファレンス用)
└─ 答え/       ← 触らない (詰まった時に見るだけ)

> もし作業用を壊しちゃっても、 完成品 / 答え を見れば必ず復活できる。 安心して試してみる。

始める準備 ✅

→ 全部 ✅ なら本編 PDF に進む。

それでは始めましょう

「本物の経路で動くフルスタックアプリ」 を 1 日で完成させる。

お楽しみに。

Vue 中級

Router と派生値で「複数画面アプリ」 に育てる

これまで作ってきたタスク管理アプリを、 画面が複数あって・派生値を計算する 本物のアプリへ。

今日のゴール

URL が変わる ・ ブラウザの戻る進むが効く ・ リロードしても状態が残る — これがあって初めて本物の Web アプリ。

今日の射程

> 前提: vue-basic/ch05-list-form で作った 1 画面 CRUD が動いている (= 今日の 作業用/frontend)。

昨日までのアプリ、 ここが困る

> 今日触る 3 つの道具 (Router / computed / watch) は、 すべて 既存アプリの困りごとへの直接の答え。

作るもののイメージ

ホーム(/)            タスク一覧(/tasks)         タスク詳細(/tasks/:id)
┌─────────┐         ┌─────────────────┐        ┌────────────┐
│ 全 5 件 │  →     │ □ 牛乳を買う 詳細│   →    │ ID: 1      │
│ [一覧へ]│         │ □ 掃除      詳細│        │ 牛乳を買う │
└─────────┘         │ 絞り込み: [   ] │        │ ← 戻る     │
                    │ 全5件/表示中5件 │        └────────────┘
                    └─────────────────┘

ブラウザの URL がそのまま画面に対応する。 = URL を共有すれば相手も同じ画面が開ける。

今日の道具

5 STEP で、 既存の単画面アプリを複数画面アプリへ育てる。

> 📝 = VS Code で書く / 🖥️ = ターミナルで叩く / 🌐 = ブラウザで見る

配布フォルダの中身

作業用/
  ├─ fastapi/       本物のサーバー (起動すれば使える状態)
  └─ frontend/      Vue アプリ (本章で育てる対象 / vue-basic 完成形)
完成品/             今日のゴール状態 (Router + 詳細 + computed + watch)
答え/step1〜step5/  各 STEP のゴール (詰まったら見る)

> 今日触るのは 作業用/frontend/src/ が中心。 FastAPI は起動するだけで触らない。

STEP1 🖥️📝🌐 配布物を起動して動かす

なぜここから? → 「今ある単画面アプリが動く状態」 を先に確認する。

STEP2 以降の改造で何かが壊れたとき、 「改造前は動いていた」 を起点に切り分けられる。

新しいコードは書かない。 動かすだけ。

STEP1 🖥️ ターミナル 2 本で起動する

# ターミナル1: FastAPI
cd 作業用/fastapi
python -m venv .venv
source .venv/bin/activate     # Windows: .venv\Scripts\activate
pip install -r requirements.txt
uvicorn main:app --reload

# ターミナル2: Vue
cd 作業用/frontend
cp .env.example .env           # API の場所を指定する .env を作る (Mac/Linux)
# Windows PowerShell の場合: copy .env.example .env
npm install
npm run dev

> ターミナルを 2 本 立てるのが今日の基本姿勢。

STEP1 🌐 ブラウザで確認

🌐 http://localhost:5173 を開く。

!h:330px

タスクが 3 件表示される / 追加 / 編集 / 削除 が動く = 昨日まで作ってきたアプリがそのまま動いている。

STEP1 解説: 配布版に既に入っているもの

「Vue から FastAPI を叩く」 ためには本来いくつか下拵えが必要。 今日は backend/fastapi/topics/fastapi-basic/ + middleware/ch01-cors で習った要素なので配布版に組み込み済:

> 「もう動く」 状態から始める。 ここから Vue 中級 に集中する。

STEP1 のゴール ✅

> 今の状態は 1 画面のアプリ。 ここから 複数画面アプリ に育てていく。

STEP2 何が嬉しい? — URL の話

今のアプリは何をしても URL が / のまま。 すると:

• ❌ 友達に「このタスク見て」 と URL を送れない
• ❌ リロードしたらいつも最初の画面に戻る
• ❌ ブラウザの「戻る」 が効かない (= 履歴がない)

この 3 つを一気に解決するのが Vue Router。

STEP2 解説: なぜ Router を使う?

「画面を切り替える」 を自前で書こうとすると意外と難しい:

> 「自分で書くと地獄、 Router なら一発」。 まず「困りごと → 道具」 の対応を頭に入れてから手を動かす。

STEP2 今日覚える Router 4 単語

> これ以外 (createWebHistory / use(router) / router-link-active) は 添え物。 今は気にしない。

STEP2 📝 進め方 (順序)

事故を避けるため、 この順序で進める:

1. vue-router をインストール
2. ページコンポーネントを 2 つ作る (HomePage.vue / TaskListPage.vue)
3. router.js を作る
4. main.js でルーターを使う宣言
5. 最後に App.vue を書き換え (旧コードは App.vue.bak にリネームして温存)

> 旧 App.vue を最後に触る = 「動いていた状態をギリギリまで残す」 安心感を確保。

STEP2 ① 🖥️ vue-router をインストール

cd 作業用/frontend
npm install vue-router

> 失敗したら: node --version で Node 20 以上か確認。

STEP2 ② 📝 ページコンポーネントを 2 つ作る

📝 frontend/src/pages/ フォルダを新規作成。 その中に 2 ファイル:

<!-- frontend/src/pages/HomePage.vue (新規) -->
<script setup>
import { RouterLink } from 'vue-router'
</script>

<template>
  <h1>マイ・タスク</h1>
  <p>タスクを一覧で見ましょう。</p>
  <RouterLink to="/tasks">タスク一覧へ</RouterLink>
</template>

TaskListPage.vue は次のスライドで詳しく。

STEP2 ② 📝 TaskListPage.vue へ「何を」 移植するか

📝 frontend/src/pages/TaskListPage.vue を新規作成。 旧 App.vue の中身を 選んで コピーする。

✅ 移植する (旧 App.vue から):

• <script setup> の tasks / loading / errorMsg / newName / API / onMounted / addTask / removeTask
• <template> の <input> + <button>追加</button> + <ul> + <TaskItem> 部分 + errorMsg 表示
• <style scoped> の中身

❌ 持ってこない:

• editingId / editName / startEdit / cancelEdit / saveEdit
• <template> の「編集中だけ表示される入力欄」 (<div v-if="editingId" class="edit-box"> 部分)

> 編集機能は STEP3 で詳細画面に移管 するため、 ここでは持ってこない。

> TaskItem は今はそのまま使ってよい。 STEP3 で <li> 直書きに置き換える。

STEP2 ② 📝 TaskListPage.vue の完成形

<script setup>
import { ref, onMounted } from 'vue'
import TaskItem from '../components/TaskItem.vue'

const tasks = ref([])
const loading = ref(true)
const errorMsg = ref('')
const newName = ref('')
const API = `${import.meta.env.VITE_API_BASE ?? 'http://localhost:8000'}/tasks`

onMounted(async () => {
  try {
    const res = await fetch(API)
    if (!res.ok) throw new Error(`サーバーが ${res.status} を返しました`)
    tasks.value = await res.json()
  } catch (e) { errorMsg.value = `読み込みに失敗: ${e.message}` }
  finally { loading.value = false }
})

async function addTask() {
  if (newName.value === '') return
  try {
    const res = await fetch(API, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: newName.value }),
    })
    if (!res.ok) throw new Error(`追加に失敗しました (${res.status})`)
    tasks.value.push(await res.json())
    newName.value = ''
    errorMsg.value = ''
  } catch (e) { errorMsg.value = e.message }
}

async function removeTask(id) {
  try {
    const res = await fetch(`${API}/${id}`, { method: 'DELETE' })
    if (!res.ok) throw new Error(`削除に失敗しました (${res.status})`)
    tasks.value = tasks.value.filter(task => task.id !== id)
    errorMsg.value = ''
  } catch (e) { errorMsg.value = e.message }
}
</script>

> import TaskItem from '../components/TaskItem.vue' の .. (1 つ上に戻る) に注意 (pages/ から見て components/ は 1 階層上)。

> TaskItem.vue は components/ フォルダから コピーして使う (= @edit を発火しない単純版に簡略化済 / 答え step2/src/components/TaskItem.vue 参照)。

STEP2 ② 📝 TaskListPage.vue の <template> + <style>

<template>
  <h1>タスク一覧</h1>
  <input v-model="newName" placeholder="新しいタスク" />
  <button @click="addTask">追加</button>

  <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
  <p v-if="loading">読み込み中...</p>
  <ul v-else>
    <TaskItem v-for="task in tasks" :key="task.id"
      :name="task.name" @remove="removeTask(task.id)" />
  </ul>
</template>

<style scoped>
.error { color: #c00; background: #fff0f0; padding: 8px; border-radius: 4px; }
</style>

> <TaskItem> の @edit ハンドラは外した (= 編集機能を持ってこなかった)。

STEP2 ③ 📝 router.js を作る

📝 frontend/src/router.js を新規作成 (src/ 直下):

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from './pages/HomePage.vue'
import TaskListPage from './pages/TaskListPage.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/',      component: HomePage },
    { path: '/tasks', component: TaskListPage },
  ],
})

> これが「URL → コンポーネント」 の対応表。

STEP2 ④ 📝 main.js でルーターを使う

📝 frontend/src/main.js を 書き換え (Before/After):

// 旧 (Before)
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

// 新 (After) — 追加は import 1 行 + .use(router) 1 か所
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router.js'        // ← 追加
createApp(App).use(router).mount('#app')    // ← .use(router) を追加

> 増えるのは 2 か所だけ。

STEP2 ⑤ 📝 最後に App.vue を書き換え

まず 旧 App.vue を App.vue.bak にリネーム (= 念のため温存):

cd 作業用/frontend/src
mv App.vue App.vue.bak    # Windows: rename App.vue App.vue.bak

📝 新しい App.vue を作成:

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <nav>
      <RouterLink to="/">ホーム</RouterLink>
      <RouterLink to="/tasks">タスク一覧</RouterLink>
    </nav>
  </header>
  <main>
    <RouterView />
  </main>
</template>

STEP2 ⑤ 📝 App.vue にグローバル CSS も入れる

上記の <template> の下に <style> (scoped なし) を追記:

<style>
body { font-family: system-ui, sans-serif; margin: 0; }
header { background: #2563eb; color: white; padding: 12px 24px; }
nav a { color: white; text-decoration: none; margin-right: 24px; font-weight: bold; }
nav a.router-link-active { border-bottom: 2px solid white; padding-bottom: 2px; }
main { max-width: 720px; margin: 24px auto; padding: 0 16px; }
</style>

> scoped を 付けない のがポイント (= グローバル CSS なのでアプリ全体に効かせる)。

> これがないとナビが裸テキストで横並びにならず「壊れた?」 と不安になる。

STEP2 🌐 動作確認

🌐 ブラウザで:

• / → ホーム画面 (「タスク一覧へ」 のリンクが見える)
• /tasks → タスク一覧画面 (タスクが 3 件表示)
• ヘッダーの「タスク一覧」 をクリック → URL が /tasks に変わる
• ブラウザの 戻る ボタンで / に戻れる

!h:280px

STEP2 🛟 白画面になったときの順番

> 1 分粘って分からなければ「答え」 を覗いてよい。 黙って止まる時間が一番もったいない。

STEP2 のゴール ✅

> ここまでで 「画面が分かれている」 状態。 次は画面 → 画面の動的な遷移。

STEP3 何が嬉しい? — タスクの詳細を URL で開きたい

タスクが 100 件あったら、 一覧から 1 つクリックして詳細を見たい。

そのとき URL が /tasks/42 のように タスク ID 付き になっていれば:

• ✅ URL を送れば相手も同じタスクが開ける
• ✅ ブラウザのお気に入りに登録できる
• ✅ 一覧画面に戻ったり別タスクへ飛んだりが自然

タスク 100 個分のルートを 100 行書くわけにいかない → 動的ルート を使う。

STEP3 遷移系 API の地図 (4 つの使い分け)

今日出てくる「画面を移動する / URL を読む」 道具は 4 つ。 場面で使い分け:

> useRoute = 読み取り (= 現在地) / useRouter = 操作 (= 移動) 。

> 名前が紛らわしいが「読みと書きで関数を分けてある」 設計。

STEP3 📝 進め方

1. router.js に /tasks/:id ルートを追加
2. TaskDetailPage.vue を新規作成 (= 詳細画面 + 編集 / 削除機能)
3. TaskListPage.vue を編集して「詳細」 ボタンを追加 (この時 TaskItem を <li> 直書きに置き換える / 編集・削除は詳細画面に移管)

STEP3 ① 📝 router.js (全文・3 ルート版)

📝 router.js を 全文書き換え (STEP2 から増えるのは import 1 行 + routes 1 行):

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from './pages/HomePage.vue'
import TaskListPage from './pages/TaskListPage.vue'
import TaskDetailPage from './pages/TaskDetailPage.vue'   // ← 追加

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/',           component: HomePage },
    { path: '/tasks',      component: TaskListPage },
    { path: '/tasks/:id',  component: TaskDetailPage },   // ← 追加
  ],
})

> :id の部分は 任意の値が入る場所。 /tasks/1 /tasks/42 などすべてこの 1 つのルートで受ける。

STEP3 ② 📝 TaskDetailPage.vue (全文)

📝 frontend/src/pages/TaskDetailPage.vue を新規作成 (script + template + style まで一気に):

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter, RouterLink } from 'vue-router'

const route = useRoute()
const router = useRouter()
const API_BASE = import.meta.env.VITE_API_BASE ?? 'http://localhost:8000'
const task = ref(null)
const loading = ref(true)
const errorMsg = ref('')
const editing = ref(false)
const editName = ref('')

onMounted(async () => {
  try {
    const res = await fetch(`${API_BASE}/tasks/${route.params.id}`)
    if (res.status === 404) throw new Error('このタスクは見つかりません')
    if (!res.ok) throw new Error(`サーバーが ${res.status} を返しました`)
    task.value = await res.json()
  } catch (e) { errorMsg.value = e.message }
  finally { loading.value = false }
})

function startEdit() {
  editName.value = task.value.name
  editing.value = true
}

async function saveEdit() {
  try {
    const res = await fetch(`${API_BASE}/tasks/${task.value.id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: editName.value }),
    })
    if (!res.ok) throw new Error(`保存に失敗しました (${res.status})`)
    task.value = await res.json()
    editing.value = false
  } catch (e) { errorMsg.value = e.message }
}

async function removeTask() {
  if (!confirm('このタスクを削除しますか?')) return
  try {
    const res = await fetch(`${API_BASE}/tasks/${task.value.id}`, { method: 'DELETE' })
    if (!res.ok) throw new Error(`削除に失敗しました (${res.status})`)
    router.push('/tasks')
  } catch (e) { errorMsg.value = e.message }
}
</script>

> 編集/削除は 詳細画面でのみ可能 にする (= 一覧画面はクリーンに保つ設計判断)。

> useRouter を import に追加するのを忘れない (= 削除後の一覧画面遷移に必要)。

STEP3 ② 📝 TaskDetailPage.vue の <template> + <style>

<template>
  <RouterLink to="/tasks">&larr; タスク一覧へ戻る</RouterLink>
  <h1>タスク詳細</h1>
  <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
  <p v-if="loading">読み込み中...</p>
  <div v-else-if="task" class="detail">
    <p class="id">ID: {{ task.id }}</p>
    <div v-if="!editing">
      <p class="name">{{ task.name }}</p>
      <div class="actions">
        <button @click="startEdit">編集</button>
        <button @click="removeTask" class="danger">削除</button>
      </div>
    </div>
    <div v-else>
      <input v-model="editName" />
      <div class="actions">
        <button @click="saveEdit">保存</button>
        <button @click="editing = false">やめる</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.detail { margin-top: 16px; padding: 16px; border: 1px solid #ddd; border-radius: 8px; }
.id { color: #666; font-size: 13px; margin: 0 0 8px 0; }
.name { font-size: 24px; margin: 8px 0 16px 0; }
.actions { display: flex; gap: 8px; }
.actions button { padding: 6px 16px; cursor: pointer; }
.danger { background: #c00; color: white; border: 1px solid #900; }
input { width: 100%; padding: 8px; font-size: 16px; margin-bottom: 8px; }
.error { color: #c00; background: #fff0f0; padding: 8px; border-radius: 4px; }
</style>

> useRoute() で「現在のルート情報」 が取れる。 route.params.id で :id の値を取り出す。

STEP3 ③ 📝 TaskListPage.vue を編集 (Before/After)

「詳細」 ボタンを追加し、 <TaskItem> を <li> 直書きに置き換える。

Before (STEP2 終了時点):

<ul v-else>
  <TaskItem v-for="task in tasks" :key="task.id"
    :name="task.name" @remove="removeTask(task.id)" />
</ul>

After (STEP3):

<ul v-else>
  <li v-for="task in tasks" :key="task.id" class="task">
    <span>{{ task.name }}</span>
    <button @click="openDetail(task.id)">詳細</button>
  </li>
</ul>

> ここで初めて <TaskItem> を捨てる。 import TaskItem の行も削除してよい。

STEP3 ③ 📝 TaskListPage.vue の <script setup> に追加

<script setup> の冒頭 import に useRouter を追加:

import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'   // ← 追加

const router = useRouter()                // ← 追加: ページ遷移用
// ... 既存の tasks / loading / errorMsg / newName / API はそのまま ...

function openDetail(id) {                 // ← 追加: 詳細へ遷移
  router.push(`/tasks/${id}`)
}

> 1 文字違いに注意: useRoute (e なし・読み取り) と useRouter (r 付き・操作) は別物。

STEP3 📝 TaskListPage.vue の <style scoped> も足す

<li class="task"> のスタイルがないと一覧が崩れる。 <style scoped> に追加:

.task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  list-style: none;
}
button { padding: 4px 12px; cursor: pointer; }
ul { padding: 0; }

STEP3 🌐 動作確認

🌐 ブラウザで:

• /tasks でタスクの「詳細」 ボタンをクリック → /tasks/1 などに飛ぶ
• 詳細画面で ID と名前が見える
• アドレスバーで直接 /tasks/2 と入力しても表示できる
• 存在しない /tasks/99999 を入れると「このタスクは見つかりません」
• 詳細画面の「編集」 → 名前を変えて「保存」 で更新される (= PATCH)
• 詳細画面の「削除」 → 確認ダイアログ → 一覧画面に戻り、 削除済み (= DELETE)

!h:240px

> ⚠️ 一覧画面 (/tasks) には 編集/削除ボタンを置かない (= 詳細画面に集約する設計)。

> 「一覧から消す」 ときは詳細画面に入って削除する流れ。

STEP3 解説: サーバーはなぜ /tasks/{id} も持っていた?

fastapi/main.py には GET /tasks/{task_id} が既に書いてある。

今日まで使っていなかったが、 詳細画面のために用意されていた。

@app.get("/tasks/{task_id}")
def get_task(task_id: int):
    ...
    return dict(row)

> 「フロントが何を必要とするか」 をサーバー側が先に想像して用意しておく。

> 18 日からのチーム開発では、 フロントとサーバーで「何が必要か」 を会話で詰める 場面の連続。

STEP3 のゴール ✅

STEP4 派生値って何?

「元の値」 から「計算で出る値」 = 派生値。

派生値の特徴: 元が変わったら派生も自動で変わってほしい 。

これをラクに書く道具が computed。

STEP4 解説: 3 つの書き方を比べる

「タスクをキーワードで絞り込む」 を 3 通りで書ける:

> Vue 中級の作法は (C)。 「派生値はテンプレに書かない」 を覚える。

STEP4 📝 進め方

TaskListPage.vue を 3 段階で育てる:

1. 検索入力欄を追加 (= まだ何も絞られない)
2. 空の computed で filteredTasks を作る (= 全件返すだけ・動作確認)
3. filter を足して実際に絞り込む
4. 件数表示 (countLabel) も computed で作る

> いきなり完成形を書かない。 1 段ずつ「動く」 を確認しながら進む。

STEP4 ① 📝 import に computed を追加

📝 TaskListPage.vue の <script setup> の最初の import 文を 書き換え:

// Before
import { ref, onMounted } from 'vue'

// After (computed を追加)
import { ref, computed, onMounted } from 'vue'

> 既存行を 置き換え。 新しい import 行を増やすと二重定義 で警告が出る。

STEP4 ① 📝 検索入力欄 + keyword ref

<script setup> に keyword を追加 (既存の newName の近くがおすすめ):

const keyword = ref('')

<template> の <h1>タスク一覧</h1> の 直下 に絞り込み欄を追加:

<div class="controls">
  <input v-model="keyword" placeholder="名前で絞り込み..." />
</div>

> ここまでは「入力欄ができただけ」。 何も絞られない (= まだ正常)。

STEP4 ② 📝 filteredTasks を空で作る (動作確認)

📝 <script setup> に追加 (まずは全件返すだけ):

const filteredTasks = computed(() => tasks.value)

<template> の <li v-for> を tasks → filteredTasks に書き換え (Before/After):

<!-- Before -->
<li v-for="task in tasks" :key="task.id" class="task">
<!-- After -->
<li v-for="task in filteredTasks" :key="task.id" class="task">

> 変えるのは in の右側だけ。 ループ変数の task (左側) や :key="task.id" は触らない。

> 🌐 ブラウザで全件が見えれば OK = computed の繋ぎ込みが成功している。

STEP4 ③ 📝 filter を足して実際に絞り込む

filteredTasks の中身を書き換え:

const filteredTasks = computed(() => {
  if (keyword.value === '') return tasks.value
  return tasks.value.filter(t => t.name.includes(keyword.value))
})

> 🌐 「名前で絞り込み」 に "牛" と入れる → 即座に絞られる。 入力ごとに 自動再計算。

> keyword か tasks のどちらかが変わった瞬間に filteredTasks も変わる = これが Vue の リアクティビティ。

STEP4 ④ 📝 件数表示も computed で

<script setup> に追加:

const countLabel = computed(() =>
  `全 ${tasks.value.length} 件 / 表示中 ${filteredTasks.value.length} 件`
)

> computed から computed を参照できる (countLabel が filteredTasks を参照)。

> Vue が依存関係を勝手にたどり、 元のデータが変わったときだけ再計算する。

<template> の絞り込み欄の隣に表示:

<div class="controls">
  <input v-model="keyword" placeholder="名前で絞り込み..." />
  <span class="count">{{ countLabel }}</span>
</div>

<style scoped> に: .controls { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .controls input { flex: 1; padding: 6px 8px; } .count { color: #666; font-size: 13px; }

STEP4 🌐 動作確認

!h:280px

STEP4 解説: ref と computed の .value ルール

> Vue は テンプレート内では自動で .value を外してくれる。 script 内では明示する。

STEP4 のゴール ✅

STEP5 副作用って何?

computed の仕事は「値を返す」 こと (= 派生値)。

これに対して「画面の外に何かをする」 = 副作用。

副作用を起こしたいときの道具が watch。

STEP5 解説: computed vs watch

> 迷ったときの判定: 「返り値が欲しい」 = computed / 「副作用が欲しい」 = watch。

STEP5 📝 今日 watch を使う 2 か所

> 2 つの場所で 書き方が少し違う (= watch の第 1 引数の形)。 後でまとめて比較する。

STEP5 ① 📝 import に watch を追加

📝 TaskListPage.vue の <script setup> の import を書き換え:

// Before
import { ref, computed, onMounted } from 'vue'

// After (watch を追加)
import { ref, computed, onMounted, watch } from 'vue'

STEP5 ① 📝 keyword を localStorage に保存する

<script setup> に追加 (computed の下あたり):

watch(keyword, (newVal) => {
  localStorage.setItem('lastKeyword', newVal)
})

onMounted の 冒頭で読み戻し (既存の try/catch の 上):

onMounted(async () => {
  keyword.value = localStorage.getItem('lastKeyword') ?? ''   // ← 追加 1 行
  try {                                                       // ↓ ここから既存のまま
    const res = await fetch(API)
    // ... 以下、既存の fetch ロジック ...
  } finally { loading.value = false }
})

> 既存の try { ... } finally { ... } は 触らない。 1 行追加するだけ。

STEP5 ① 🌐 動作確認 (localStorage)

🌐 ブラウザで:

1. 検索欄に "牛" と入れる → 一覧が絞られる
2. ブラウザをリロード
3. タスクが再取得され、 検索欄は "牛" のまま / 一覧も絞られたまま

!h:280px

> 💡 リロード時の流れ: onMounted で keyword.value = ... を実行 → watch(keyword) が発火 → 同じ値を localStorage に書き戻す (= 実害なし)。

STEP5 ② 📝 詳細画面で URL 変化に追随

詳細画面 (TaskDetailPage.vue) で、 /tasks/1 を見ているときにアドレスバーで /tasks/2 に変えると...

ページコンポーネントが再利用される ので onMounted が再実行されない。 = 中身が古いまま。

→ watch で URL の :id を見張る 必要がある。

STEP5 ② 📝 TaskDetailPage.vue の全文 (Before/After)

📝 全文書き換え (関数 loadTask に切り出して onMounted と watch から呼ぶ):

<script setup>
import { ref, watch, onMounted } from 'vue'              // ← watch を追加
import { useRoute, RouterLink } from 'vue-router'

const route = useRoute()
const API_BASE = import.meta.env.VITE_API_BASE ?? 'http://localhost:8000'
const task = ref(null)
const loading = ref(true)
const errorMsg = ref('')

async function loadTask(id) {                            // ← 関数に切り出し
  loading.value = true
  errorMsg.value = ''
  try {
    const res = await fetch(`${API_BASE}/tasks/${id}`)
    if (res.status === 404) throw new Error('このタスクは見つかりません')
    if (!res.ok) throw new Error(`サーバーが ${res.status} を返しました`)
    task.value = await res.json()
  } catch (e) { errorMsg.value = e.message; task.value = null }
  finally { loading.value = false }
}

onMounted(() => loadTask(route.params.id))                // ← 初回
watch(() => route.params.id, (newId) => {                 // ← URL 変化時
  if (newId) loadTask(newId)
})
</script>

> 元 onMounted の中身が 丸ごと loadTask に移った。 元の try-catch は loadTask 内にある。

STEP5 解説: watch の第 1 引数の 2 形式

TaskListPage.vue と TaskDetailPage.vue で書き方が違うのに気付いたか?

> プロパティを見たいときは () => ... で getter にくるむ。

> 直接 watch(route.params.id, ...) と書くと「値を渡しただけ」 になり、 変化を捕まえられない (= リアクティブにならない)。

STEP5 🌐 動作確認 (URL 追随)

🌐 ブラウザで:

• /tasks/1 を開く → タスク 1 の詳細
• アドレスバーで /tasks/2 に変更 → ページはそのまま、 中身だけ切り替わる
• (= フル再読み込みが起きていない = onMounted ではなく watch で再取得した証拠)

> DevTools の Network タブで GET /tasks/2 のリクエストが新しく飛んでいるのが見える。

STEP5 のゴール ✅

今日の判断軸 (持ち帰り 1 枚)

明日からのチーム開発で迷ったとき、 この 3 行を思い出す:

今日の完成 ✅

> 1 画面アプリ → 複数画面 + 検索 + 詳細追随 まで 1 日で育った。

> 明日 (後編) は、 状態を 画面をまたいで共有 (Pinia) + 入力チェック + エラー UX 洗練。

振り返り

「1 画面しかなかったタスクアプリ」 が、 1 日で「複数画面 + 検索 + 詳細追随」 まで育った。

これらは Vue を使う限り 毎日触る道具。 まずは「使ったことがある」 状態を作るのが今日の目的。

[vue-basic ch01-06]                [本章 (app-tasks/ch01)]
1画面 / ref / v-for       3画面 / Router / computed / watch
↓ 育てる
[state-management/ch03-pinia-cross-view]            [forms/ch01-reactive-validation + api/ch01-async-ux-3states]
Pinia / バリデーション    両方の道具を実戦投入

翌日言える 1 文 (= 自分の言葉で言語化する)

> 「昨日は 画面を切り替える方法 (Router) と、 派生値を作る方法 (computed) と、 値の変化に反応する方法 (watch) を体に入れた」

声に出してみる。 言葉が出てこない部分がある = 明日の復習対象。

> 詰まった所がそのまま次章 (state-management/ch03-pinia-cross-view) のスタートライン。 「ここがまだ自分の言葉になっていない」 を 1 つは見つけておく。

夕方は演習に進む

「読む」 から「書く」 に切り替える。 演習問題.pdf を開いて、 以下の順番がおすすめ:

> 全部やり切る必要はない。 「ここ手を動かしたい」 と思ったところから。

チャレンジ (時間が余ったら)

1. ホーム画面に 「最後に開いたタスク」 を表示する (= STEP5 の watch + localStorage の応用)
2. 動的ルートを /tasks/:id/edit で編集専用画面にも対応させる
3. watchEffect を使って 依存を自動検出させる (watch との違いを体感)
4. <RouterLink :to="..."> で to を オブジェクト形式 で書き直す ({ name: '...' } 形式)

FAQ

Q. Vue Router と Vue は別ライブラリ?

A. はい。 公式チームが作っているが別パッケージ。 npm install vue-router で入れる。

Q. useRoute() と useRouter() の違いは?

A. useRoute = 読み取り (現在のルート情報) / useRouter = 操作 (push 等で遷移)。 1 文字違いで意味が違う。

Q. computed の代わりに function を使ってもいい?

A. 動くが 毎回再計算が走る。 computed は値が変わったときだけ計算する (自動キャッシュ)。

Q. watch と watchEffect の違いは?

A. watch は「何を監視するか」 を明示。 watchEffect は「使ったものを自動で監視」。 入門は watch から。

Q. App.vue.bak はいつ消していい?

A. STEP5 まで通って動作確認 OK なら消してよい。 不安なら明日まで残しておく。

おわり

複数画面アプリの基礎一式が、 1 日で身に付いた。

明日は「散らからない状態」 にしていく (Pinia / バリデーション / エラー UX)。

お疲れさまでした。