Vue.jsコンポーネント入門：基礎から実践まで

Vue.jsは、シングルページアプリケーション（SPA）の構築に使われるフレームワークで、コンポーネントベースのアーキテクチャを採用しています。Vueコンポーネントは、再利用可能な独立したコードブロックで、アプリケーションのUIを構成するための基本単位です。以下にVueコンポーネントについて詳しく解説します。

Vueコンポーネントの基本

1. テンプレート (Template):

• コンポーネントのHTML構造を定義します。<template>タグ内に記述され、表示される内容を定義します。

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

2. スクリプト (Script):

• コンポーネントのロジックを記述します。<script>タグ内に書かれ、データやメソッド、ライフサイクルフックを定義します。

   <script>
   export default {
     data() {
       return {
         title: 'Hello Vue!',
         message: 'This is a sample component.'
       };
     }
   };
   </script>

3. スタイル (Style):

• コンポーネントのスタイルを定義します。<style>タグ内に記述され、コンポーネントに適用されるCSSを定義します。scoped属性を使用すると、そのコンポーネントにのみ適用されるスタイルを定義できます。

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

コンポーネントの構成

Vueコンポーネントは通常、以下のようなファイル形式で構成されます：

<template>
  <!-- コンポーネントのHTML -->
</template>

<script>
export default {
  // コンポーネントのデータ、メソッド、ライフサイクルフックなど
};
</script>

<style scoped>
/* コンポーネントのCSS */
</style>

コンポーネントの使用方法

1. 登録:

• コンポーネントを他のコンポーネントで使用するには、まず登録が必要です。ローカル登録とグローバル登録があります。 ローカル登録:

   import MyComponent from './MyComponent.vue';

   export default {
     components: {
       MyComponent
     }
   };

グローバル登録:

   import Vue from 'vue';
   import MyComponent from './MyComponent.vue';

   Vue.component('my-component', MyComponent);

2. 使用:

• 登録したコンポーネントは、テンプレート内でHTMLタグとして使用できます。

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

コンポーネント間の通信

1. プロパティ (Props):

• 親コンポーネントから子コンポーネントへデータを渡すために使用されます。 親コンポーネント:

   <template>
     <div>
       <child-component :message="parentMessage"></child-component>
     </div>
   </template>

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

   export default {
     components: { ChildComponent },
     data() {
       return {
         parentMessage: 'Hello from parent!'
       };
     }
   };
   </script>

子コンポーネント:

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

   <script>
   export default {
     props: ['message']
   };
   </script>

2. イベント (Events):

• 子コンポーネントから親コンポーネントへデータを渡すために使用されます。子コンポーネントがイベントを発火し、親コンポーネントがそのイベントをリスンします。 子コンポーネント:

   <template>
     <div>
       <button @click="sendMessage">Click me</button>
     </div>
   </template>

   <script>
   export default {
     methods: {
       sendMessage() {
         this.$emit('message-sent', 'Hello from child!');
       }
     }
   };
   </script>

親コンポーネント:

   <template>
     <div>
       <child-component @message-sent="receiveMessage"></child-component>
     </div>
   </template>

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

   export default {
     components: { ChildComponent },
     methods: {
       receiveMessage(message) {
         console.log(message);
       }
     }
   };
   </script>

これらが基本的なVueコンポーネントの構造と使用方法です。コンポーネントベースのアプローチを使用することで、アプリケーションをよりモジュール化し、再利用可能なコードを作成することができます。