ch02 — Router / Pinia / fetch

ch02 — Router / Pinia / fetch

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

作るもの

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

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

4日間のロードマップ

サンプルコードの使い方

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

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

ch02

Vue Router / Pinia / 本物のAPI

ch02 で作るもの

REST Countries API から250カ国を取得して一覧表示

https://restcountries.com/v3.1

プロジェクトを作り直す

npm create vue@latest vue-atlas
# ✔ Add Vue Router? → Yes
# ✔ Add Pinia? → Yes
# 他は No

cd vue-atlas
npm install
npm run dev

⚠️ <code>npm create vue@latest</code> は Router と Pinia を選択できる。

後から追加すると設定が複雑になるので最初に選ぶ。

REST Countries API の注意点

GET https://restcountries.com/v3.1/all?fields=name,flags,region,population,cca2

⚠️ <code>/all</code> は <strong><code>?fields=</code> が必須</strong>。省略すると 400 エラーになる。

レスポンスの構造:

// name はオブジェクト
country.name.common  // "Japan" ← これを使う
country.name.official // "Japan"

// flags はオブジェクト
country.flags.png    // "https://flagcdn.com/w320/jp.png"
country.flags.svg

// 国コード (2文字)
country.cca2         // "JP"

Pinia store を作る

// src/stores/countries.js
import { defineStore } from "pinia"
import { ref } from "vue"

export const useCountriesStore = defineStore("countries", () => {
  const list = ref([])
  const isLoading = ref(false)
  const error = ref(null)

  async function fetchAll() {
    isLoading.value = true
    error.value = null
    try {
      const res = await fetch(
        "https://restcountries.com/v3.1/all?fields=name,flags,region,population,cca2"
      )
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      list.value = await res.json()
    } catch (e) {
      error.value = e.message
    } finally {
      isLoading.value = false
    }
  }

  return { list, isLoading, error, fetchAll }
})

Vue Router を設定する

// src/router.js
import { createRouter, createWebHistory } from "vue-router"
import HomeView from "./views/HomeView.vue"
import DetailView from "./views/DetailView.vue"

export default createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/",              component: HomeView },
    { path: "/country/:cca2", component: DetailView },
  ],
})

HomeView: 一覧画面

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

const store = useCountriesStore()
onMounted(() => store.fetchAll())
</script>

<template>
  <p v-if="store.isLoading">読み込み中...</p>
  <p v-else-if="store.error" class="error">{{ store.error }}</p>
  <div v-else class="grid">
    <CountryCard
      v-for="c in store.list"
      :key="c.cca2"
      :country="c"
    />
  </div>
</template>

DetailView: 詳細画面

<script setup>
import { ref, onMounted } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
const country = ref(null)

onMounted(async () => {
  const cca2 = route.params.cca2
  const res = await fetch(
    `https://restcountries.com/v3.1/alpha/${cca2}` +
    `?fields=name,flags,region,population,capital`
  )
  country.value = await res.json()
})
</script>

<template>
  <div v-if="country">
    <img :src="country.flags.png" :alt="country.name.common" width="200" />
    <h1>{{ country.name.common }}</h1>
    <p>地域: {{ country.region }}</p>
    <p>人口: {{ country.population.toLocaleString() }} 人</p>
    <p>首都: {{ country.capital?.[0] }}</p>
  </div>
</template>

CountryCard を更新する (ch02版)

<!-- CountryCard.vue (ch02では router.push を使う) -->
<script setup>
import { useRouter } from "vue-router"

const props = defineProps({
  country: { type: Object, required: true },
})
const router = useRouter()

function handleClick() {
  router.push(`/country/${props.country.cca2}`)
}
</script>

<template>
  <div class="card" @click="handleClick">
    <img :src="country.flags.png" :alt="country.name.common" />
    <div class="info">
      <h2>{{ country.name.common }}</h2>
      <p>{{ country.region }}</p>
      <p>{{ country.population.toLocaleString() }} 人</p>
    </div>
  </div>
</template>

ch02 まとめ