※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。
Vue を学び始めて最初に「これは何だ？」と止まったのが .vue という見慣れない拡張子のファイルでした。開いてみると <template> と <script> と <style> という3つのタグが1つのファイルに同居していて、HTMLでもJSでもCSSでもない不思議な見た目。これが Vue の SFC（単一ファイルコンポーネント）です。この記事では、その .vue ファイルの読み方を整理します。
※ 学習用に調べた内容を個人的にまとめたものです。文章は AI の補助を受けて作成しています。
SFC＝1つの部品を1ファイルにまとめる仕組み
SFC は Single File Component の略で、日本語では「単一ファイルコンポーネント」。1つの画面部品（コンポーネント）に必要な見た目・動き・スタイルを、拡張子 .vue の1ファイルにまとめて書く仕組みです。
従来の Web 開発では HTML・JavaScript・CSS を別ファイルに分けるのが普通でした。SFC は逆に「1つの部品に関するものは1ファイルに集める」考え方です。ファイルを見ればその部品の全体が分かるので、見通しが良くなります。
3つのブロックの役割
| ブロック | 役割 |
|---|---|
<template> | 画面に表示する HTML のような部分（見た目の構造） |
<script setup> | 状態や処理を書く TypeScript / JavaScript の部分（動き） |
<style> | このコンポーネントの見た目を整える CSS の部分（スタイル） |
最小の .vue ファイルを読んでみる
ボタンを押すと数字が増えるだけの、最小のコンポーネントです。
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button class="counter" @click="count++">
クリック回数: {{ count }}
</button>
</template>
<style scoped>
.counter {
padding: 8px 16px;
font-size: 16px;
}
</style>scriptでcountという状態を用意するtemplateで{{ count }}と書くと、その値が画面に表示される@click="count++"でクリック時にcountを増やすと、画面も自動で更新される（リアクティブ）styleで.counterの見た目を整える
この「状態が変わると画面が変わる」感覚が Vue の核です。仕組みは別記事のリアクティブの基礎で解説しています。
タグの順序と scoped スタイル
トップレベルのブロックに技術的な順序の制約はありませんが、実務では template → script → style、あるいは script を先頭に置く並びが一般的です（ESLint の vue/block-order で統一できます）。チーム内で揃っていれば読みやすくなります。
もう1つ大事なのが <style scoped> の scoped。これを付けると、その CSS はそのコンポーネント内だけに適用され、他の部品に漏れません。付けないと全体に効いてしまい、意図しない場所のデザインが崩れる原因になります。部品ごとのスタイルは基本 scoped を付けておくと安全です。
よくある引っかかり
- 1ファイル1コンポーネントが基本。1つの
.vueに複数の部品を詰め込まない。 .vueはそのままブラウザで動かない。Vite などのビルドツールが JavaScript に変換して初めて動きます。templateの直下は基本1つの要素でOK（Vue 3 は複数ルート要素も許容されますが、最初は1つで囲むと分かりやすい）。
もっと体系的に学ぶなら（書籍）
この記事はシリーズの一部です。TypeScript前提で Composition API・Pinia・Vue Router・テストまで一冊で体系的に学びたい方には、内容がそのまま重なる次の本がおすすめです。
PR
📕 紙の本
 | Vue 3 フロントエンド開発の教科書 [ WINGSプロジェクト 齊藤 新三 ] 価格:3960円 |
📱 電子書籍版
 | Vue 3 フロントエンド開発の教科書 【電子書籍】[ WINGSプロジェクト 齊藤新三【著】 ] 価格:3960円 |
次に読む
PR
