ch01 — 静的データで Vue 基礎

ch01 — 静的データで Vue 基礎

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

作るもの

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

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

4日間のロードマップ

サンプルコードの使い方

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

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

ch01

Vue.js の基礎を体で覚える

ch01 で作るもの

静的データ (APIなし) で国カードを表示・絞り込みできるUI

Step 1: {{ }} でデータを表示する

<script setup>
import { ref } from "vue"

const countries = ref([
  { name: "Japan",  region: "Asia",    population: 123210000 },
  { name: "France", region: "Europe",  population: 68070000  },
  { name: "Brazil", region: "Americas",population: 215313000 },
])
</script>

<template>
  <h1>🌍 国図鑑</h1>
  <p>{{ countries[0].name }}</p>
  <p>人口: {{ countries[0].population.toLocaleString() }} 人</p>
</template>

💡 <code>ref()</code> で作った値は <code>.value</code> でアクセス。テンプレート内では自動展開される。

Step 2: v-for でリスト表示

<template>
  <div class="grid">
    <div v-for="country in countries" :key="country.name" class="card">
      <h2>{{ country.name }}</h2>
      <p>地域: {{ country.region }}</p>
      <p>人口: {{ country.population.toLocaleString() }} 人</p>
    </div>
  </div>
</template>

<style scoped>
.grid { display: flex; flex-wrap: wrap; gap: 16px; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; width: 200px; }
</style>

🔑 <code>:key</code> は一意な値を指定する。重複するとDOMの更新が乱れる。

Step 3: v-if で条件表示

<template>
  <p v-if="selected">選択した国: <strong>{{ selected }}</strong></p>
  <p v-else>国を選んでください</p>
</template>

Step 4: @click + ref でボタン反応

<script setup>
import { ref } from "vue"

const selected = ref(null)

function onSelect(name) {
  selected.value = name
}
</script>

<template>
  <p v-if="selected">選択: {{ selected }}</p>
  <div v-for="country in countries" :key="country.name"
       class="card" @click="onSelect(country.name)">
    {{ country.name }}
  </div>
</template>

Step 5: computed で地域フィルタ

<script setup>
import { ref, computed } from "vue"

const selectedRegion = ref("すべて")
const regions = ["すべて", "Asia", "Europe", "Americas", "Africa"]

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

<template>
  <select v-model="selectedRegion">
    <option v-for="r in regions" :key="r">{{ r }}</option>
  </select>
  <div v-for="country in filtered" :key="country.name">...</div>
</template>

💡 <code>computed</code> は依存する <code>ref</code> が変わると自動で再計算される。

Step 6: コンポーネントを作る

CountryCard.vue を作って国カードを分離する。

<!-- CountryCard.vue -->
<script setup>
const props = defineProps({
  country: { type: Object, required: true },
})
const emit = defineEmits(["select"])

function handleClick() {
  emit("select", props.country.name)
}
</script>

<template>
  <div class="card" @click="handleClick">
    <img :src="country.flag" :alt="country.name" />
    <h2>{{ country.name }}</h2>
    <p>{{ country.region }}</p>
  </div>
</template>

Step 7: 親コンポーネントで使う

<!-- App.vue -->
<script setup>
import CountryCard from "./components/CountryCard.vue"

function onSelect(name) { selected.value = name }
</script>

<template>
  <div class="grid">
    <CountryCard
      v-for="country in filtered"
      :key="country.name"
      :country="country"
      @select="onSelect"
    />
  </div>
</template>

props: 親 → 子へデータを渡す (:country="country")

emit: 子 → 親へイベントを上げる (@select="onSelect")

ch01 まとめ