Vueコンポーネント：SFCで部品化して組み立てる – 6/12

Vueのコンポーネント（SFC: Single File Component）は、テンプレートとロジックを1つのファイルにまとめられるのが特徴です。分割の基準も含めて説明します。

コンポーネント化の基準

次のどれかに当てはまるなら分割を検討します。

• 同じUIが繰り返し登場
• 画面が大きくなって読みづらい
• 責務を分離したい（入力部分と一覧など）

SFCの基本形

<template>
  <header><h1>My Site</h1></header>
</template>

<script setup>
// ここにロジック
</script>

<style scoped>
/* ここにCSS */
</style>

scoped はそのコンポーネントにCSSを閉じ込める機能です（学習段階では便利）。

App.vueで使う

<script setup>
import Header from "./components/Header.vue"
</script>

<template>
  <Header />
  <main>本文</main>
</template>

練習：Footerを追加

Footer.vue を作り、App.vue に追加して表示してみましょう。