Vue.jsで単一ファイルコンポーネントを実装する

単一ファイルコンポーネント（Single File Component、SFC）は、Vue.jsでコンポーネントを作成する際の推奨される方法の1つです。この方法では、HTMLテンプレート、JavaScriptロジック、CSSスタイルを1つのファイルにまとめます。以下に、単一ファイルコンポーネントを作成する手順を示します。

1. プロジェクトの準備: Vue.jsの開発環境を準備し、プロジェクトディレクトリに移動します。
2. コンポーネントファイルの作成: 新しいVueコンポーネントを含む.vueファイルを作成します。たとえば、MyComponent.vueというファイルを作成します。
3. コンポーネントファイルの記述: 作成した.vueファイルに、テンプレート、スクリプト、スタイルのセクションを記述します。

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

<script>
export default {
  data() {
    return {
      message: 'Hello from MyComponent!'
    };
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

コンポーネントの使用: 作成したコンポーネントを他のVueコンポーネントやVueインスタンスで使用します。

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

<style>
/* Appコンポーネントのスタイルを記述 */
</style>

これで、Vue.jsで単一ファイルコンポーネントを作成する方法が理解できると思います。.vueファイルにHTML、JavaScript、CSSを組み合わせることで、コンポーネントを管理しやすくし、再利用性を高めることができます。