Vue.js の `<script>` 部分の構造解説

Vue.js では、コンポーネントのロジックを script セクションに記述します。Vue 3 では Composition API を、Vue 2 では Options API を使うのが一般的です。本記事では、それぞれの構造について解説し、さらに data や computed の種類についても詳しく説明します。

---

1. Composition API (<script setup>)

Vue 3 で推奨される Composition API を使うと、よりシンプルなコードを書くことができます。

基本構造

<script setup>
import { ref, computed, onMounted } from 'vue';

// 1. データの定義
const count = ref(0);

// 2. 計算プロパティ
const doubleCount = computed(() => count.value * 2);

// 3. メソッド
const increment = () => {
  count.value++;
};

// 4. ライフサイクルフック
onMounted(() => {
  console.log('コンポーネントがマウントされました');
});
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

各部分の解説

1. データの定義 (ref)

   • ref(0) を使ってリアクティブな変数 count を定義。
   • count.value で値を取得・更新する。

2. 計算プロパティ (computed)

   • computed を使い、count * 2 の値をリアクティブに計算。

3. メソッド

   • increment 関数で count を増加させる。

4. ライフサイクルフック (onMounted)

   • onMounted を使い、コンポーネントがマウントされたときの処理を実行。

---

2. Options API

Vue 2 互換の Options API では、オブジェクト形式でコンポーネントの設定を行います。

基本構造

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  mounted() {
    console.log('コンポーネントがマウントされました');
  }
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

各部分の解説

1. data()

   • data() メソッドでリアクティブな変数 count を定義。

2. computed

   • 計算プロパティ doubleCount を定義。

3. methods

   • increment() メソッドで count を増やす。

4. mounted

   • mounted() ライフサイクルフックでログを出力。

---

3. <script> 内で使用できるブロックの種類

Vue の script 部分には、以下のブロックがあります。

1. data

• コンポーネントの状態を定義する。
• Options API では data() メソッドを使い、Composition API では ref() や reactive() を使用。

2. computed

• 既存のデータをもとに、新しい値を計算するプロパティ。
• getter のみのものと getter / setter 両方を持つものがある。

3. methods

• イベント処理などのメソッドを定義。
• Composition API では単なる関数、Options API では methods 内に記述。

4. watch

• 特定のデータの変化を監視し、副作用を実行。
• Composition API では watch()、Options API では watch オプションを使用。

5. watchEffect

• watch よりも即時に実行され、依存関係を自動収集。

6. props

• 親コンポーネントから受け取る値を定義。

7. emits

• 子コンポーネントが親に対して発火するイベントを宣言。

8. setup

• Composition API でデータやメソッドを定義するための関数。

---

4. まとめ

比較	Composition API (setup)	Options API (export default)
データ定義	ref() / reactive()	data() を return
計算プロパティ	computed()	computed オプション
メソッド	ただの関数	methods オプション
ライフサイクル	onMounted() など	mounted() など
シンプルさ	簡潔で直感的	記述が長め

新規プロジェクトでは Composition API を使うのが推奨されますが、チームの方針やプロジェクトの要件に応じて選択してください。

Vue.js の script 部分の構造について理解が深まったでしょうか？ 質問があればコメントで教えてください！