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

Volardev 編集部 April 28, 2026

ゼロから最初の SFC（Single File Component） Webページを作成するために、以下の手順を進めていきます：

新しくクリーンな Vue プロジェクトを作成する
App.vue ファイルにコードを記述する
開発中に Web ページが自動的に更新される様子を確認する
本番環境（Production）向けにページをビルド（Build）する

1. プロジェクトのクリーンアップ

まずは、前のページで作成したサンプルプロジェクトのコンテンツをすべて削除し、自分たちのシンプルな Web ページを作成するための準備をします。

コードを書き始める前に、App.vue 内の <template>、<script>、および <style> タグの中身をすべて空にし、setup や scoped といった 属性（Attributes） も削除してください。

あなたの App.vue ファイルは、以下のようになっているはずです。

App.vue:

<script></script>
<template></template>
<style></style>

また、src フォルダ内にある assets と components フォルダも削除してください。
次に、main.js ファイル内で アセット（Assets） を インポート（Import） している行を削除し、main.js を以下のような状態にします。

main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

これで、作業用の空のプロジェクトが整いました。

2. App.vue へのコーディング

プロジェクトがクリーンになったら、<template> タグの中に ヘッダー（Header） を追加してみましょう。

<template>
  <h1>Hello World!（こんにちは、世界！）</h1>
</template>

<script></script>

<style></style>

App.vue ファイルを保存し、ターミナル（Terminal） に表示されている ローカルホスト（localhost） のリンクから ブラウザ（Browser） を開いてください。結果が表示されていますか？

VS Code で変更を保存するたびに、ブラウザをわざわざ手動で リフレッシュ（Refresh） しなくても、ブラウザ側が自動的に更新されるはずです。

3. 実践例

もう少しだけ具体的な Vue の例を見てみましょう。

App.vue:

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'これは Vue のデータから表示されているテキストです'
    };
  }
};
</script>

<style></style>

4. 補足解説

上記の例において、export default は非常に重要な役割を果たしています。

これにより、main.js が import App from './App.vue' という記述でこのコンポーネントのデータを受け取ることが可能になります。その結果、index.html 内にある <div id="app"> タグに対して、アプリケーションを マウント（Mount） することができるのです。