0Pricing
Frontend Academy · レッスン

Vue SFC：script・template・style

単一ファイルコンポーネント形式を理解します。ロジックには script ブロック、ビューには template ブロック、スコープ付き CSS には style ブロックを使います。

「Vue SFC：script・template・style」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

単一ファイルコンポーネントとは

VueのSingle-File Component（SFC）は、3つのブロックを持つ.vueファイルです。<script>にはJavaScriptのロジック、<template>にはHTMLビュー、<style>にはCSSを記述します。1つのコンポーネントに必要なものをすべて1つのファイルにまとめます。

<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>

<template>
  <h1>{{ greeting }}</h1>
</template>

<style scoped>
h1 { color: #42b883; }
</style>

scriptブロック

ロジック、データ、インポート、Composition APIのコードをここに記述します。<script setup>を使うと、トップレベルで宣言した変数やインポートが自動的にテンプレートで利用可能になります。

script setup — 最新のアプローチ

<script setup>は推奨されるSFC構文です。ここで宣言した変数、computedプロパティ、関数は、明示的にreturnしなくてもテンプレートから直接利用できます。

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
function increment() { count.value++; }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

templateブロック

templateにはコンポーネントのHTMLビューを記述します。Vueのテンプレートはrender関数にコンパイルされます。template内では、Vue固有の属性やディレクティブ（v-if、v-for、@click）を使います。

テンプレートの補間

二重中括弧{{ }}を使うと、リアクティブなデータをテキストとして出力できます。VueはHTMLを自動的にエスケープします。HTMLを描画するにはv-htmlディレクティブを使います（使用には注意が必要です）。

<template>
  <p>{{ message }}</p>
  <p>{{ count * 2 }}</p>
  <p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>

styleブロック

styleブロックのCSSはコンポーネントに適用されます。scopedを追加すると、このコンポーネントの要素だけにスタイルを適用でき、意図しないグローバルへのスタイル漏れを防げます。

<style scoped>
.card {
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>

スコープ付きスタイルの仕組み

Vueはコンポーネントの要素に一意のdata属性（data-v-abc123のようなもの）を追加し、スコープ付きCSSセレクターを書き換えてその属性を含めます。これにより、スタイルがこのコンポーネント内の要素にだけ一致するようになります。

VueのCSS Modules

scopedの代わりに、CSS Modules用の<style module>を使うこともできます。テンプレートでは$styleオブジェクトを介してクラス名にアクセスします。

<template>
  <div :class="$style.card">Content</div>
</template>

<style module>
.card { background: white; }
</style>

グローバルスタイル

scopedを付けていないスタイルはグローバルに適用されます。よくあるパターンは、基本スタイルとデザイントークンをまとめたグローバルなapp.cssに加え、コンポーネント固有のルールを各コンポーネントのスコープ付きスタイルに記述する方法です。

SFCでのTypeScript

TypeScriptを使うには、scriptブロックにlang="ts"を追加します。Volar（公式のVue IDE拡張機能）は、型チェック付きテンプレートを含むVue SFCの完全なTypeScriptサポートを提供します。

SFCのファイル命名

テンプレートで使用するコンポーネントのSFCファイルはPascalCase（UserProfile.vue）で命名します。Vueでは、HTML要素との競合を避けるために複数語の名前が推奨されています。

クイックチェック

Vueの<style>ブロックにあるscoped属性は何をしますか？

復習: Vue SFC

.vueファイルには3つのブロックがあります。script（ロジック）、template（ビュー）、style（CSS）です。現代的なComposition APIのアプローチには