ch03 — 一覧から詳細画面へ

ch03 — 一覧から詳細画面へ

Vue.js で世界の国を探索するアプリを作ろう

作るもの

「世界の国を調べられる国図鑑Webアプリ」

• 250カ国以上の国旗・人口・地域を一覧表示
• 国名で検索・地域でフィルタ
• カードをクリックして詳細を見る
• お気に入り登録

4日間のロードマップ

サンプルコードの使い方

サンプルコード/
├── day1/
│   ├── starter/   ← ここから始める (穴あきコード)
│   └── answer/    ← 完成形 (ヒントに使う)
├── day2/ ...
├── day3/ ...
├── day4/ ...
└── 完成品/        ← ch04 完成形の全コード

# starter を起動する例
cd day1/starter
npm install
npm run dev

ch03

API設計体験 — 一覧から詳細へ

ch03 で作るもの

一覧画面と詳細画面を本格的に連携させ、地域フィルタも追加する

詳細エンドポイント

GET /v3.1/alpha/{cca2}?fields=name,flags,region,population,capital,currencies,languages,borders

// レスポンス例 (Japan)
{
  name: { common: "Japan", official: "Japan" },
  flags: { png: "https://flagcdn.com/w320/jp.png" },
  region: "Asia",
  population: 123210000,
  capital: ["Tokyo"],
  currencies: { JPY: { name: "Japanese yen", symbol: "¥" } },
  languages: { jpn: "Japanese" },
  borders: ["PRK", "KOR"]   // 隣接国のcca3コード
}

詳細画面: 全フィールドを表示

<template>
  <div v-if="country" class="detail">
    <img :src="country.flags.png" :alt="country.name.common" class="flag" />
    <h1>{{ country.name.common }}</h1>

    <table class="info-table">
      <tr><th>地域</th><td>{{ country.region }}</td></tr>
      <tr><th>人口</th><td>{{ country.population.toLocaleString() }} 人</td></tr>
      <tr><th>首都</th><td>{{ country.capital?.[0] ?? "—" }}</td></tr>
      <tr>
        <th>通貨</th>
        <td>{{ Object.values(country.currencies ?? {}).map(c => c.name).join(", ") }}</td>
      </tr>
      <tr>
        <th>言語</th>
        <td>{{ Object.values(country.languages ?? {}).join(", ") }}</td>
      </tr>
    </table>

    <router-link to="/">← 一覧に戻る</router-link>
  </div>
</template>

Pinia に地域フィルタを追加

// stores/countries.js に追加
const selectedRegion = ref("すべて")
const regions = ["すべて", "Africa", "Americas", "Asia", "Europe", "Oceania"]

const filtered = computed(() => {
  if (selectedRegion.value === "すべて") return list.value
  return list.value.filter(c => c.region === selectedRegion.value)
})

return {
  list, isLoading, error, fetchAll,
  selectedRegion, regions, filtered   // 追加
}

💡 Pinia の <code>selectedRegion</code> は HomeView と Navbar の両方から使える。

コンポーネント間での状態共有が Pinia の強み。

HomeView を更新する (ch03版)

<script setup>
import { onMounted } from "vue"
import { useCountriesStore } from "../stores/countries"
import CountryCard from "../components/CountryCard.vue"

const store = useCountriesStore()
onMounted(() => {
  if (store.list.length === 0) store.fetchAll()
})
</script>

<template>
  <!-- 地域フィルタ -->
  <div class="filter">
    <select v-model="store.selectedRegion">
      <option v-for="r in store.regions" :key="r">{{ r }}</option>
    </select>
    <span>{{ store.filtered.length }} カ国</span>
  </div>

  <!-- カード一覧 -->
  <div class="grid">
    <CountryCard v-for="c in store.filtered" :key="c.cca2" :country="c" />
  </div>
</template>

ch03 まとめ