Vue 3 の Composition API を初心者向けに解説

はじめに

Vue 3 では新しい Composition API が導入され、より柔軟で再利用しやすいコードを書くことができるようになりました。本記事では、Vue 2 の Options API との違いや、Composition API の基本的な使い方、実践例について解説します。

Vue 2 と Vue 3 の違い

Vue 2 の Options API と Vue 3 の Composition API の違い

Vue 2 では Options API を使用し、data, methods, computed, watch などを分けて記述していました。

Vue 2 の Options API の例

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

Vue 3 では Composition API を導入し、setup() 関数内でロジックをまとめて記述できます。

Vue 3 の Composition API の例

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

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

Composition API を導入するメリット

• ロジックをまとめて記述できるため、可読性が向上
• コードの再利用がしやすく、複数のコンポーネントで同じロジックを簡単に使い回せる
• TypeScript との相性が良く、型のサポートが強化されている

Vue 3 での開発の基本的な流れ

1. Vue 3 プロジェクトの作成 (create-vue または vite を使用)
2. setup() 関数を活用してデータや関数を管理
3. ライフサイクルフックやリアクティブな状態管理を組み込む

setup() 関数の使い方

setup() 関数の基本構造と役割

• setup() は Vue コンポーネントの 最初に実行される関数 で、データや関数を定義する役割を持ちます。
• this を使用せずにデータを扱える のが特徴。

基本の setup() の構造

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

const message = ref('Hello Vue 3');
</script>

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

setup() でデータを管理する方法（ref() や reactive() の活用）

ref() と reactive() を使用して、リアクティブなデータを管理できます。

リアクティブとはVue では、データが変更されたときに 自動的に UI（画面）を更新 する仕組みです。これにより、手動で DOM を更新する必要がなくなり、より直感的な開発が可能になります

ref() の例（単一の値をリアクティブにする）

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

const count = ref(0);
</script>

reactive() の例（オブジェクトや配列をリアクティブにする）

<script setup>
import { reactive } from 'vue';

const user = reactive({
  name: 'Taro',
  age: 25
});
</script>

setup() 内で computed() や watch() を使う方法

Vue 3 の computed() と watch() はどちらもリアクティブデータを使いますが、役割や動作の仕組みが異なります。

computed() を使った動的なデータ処理

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

const price = ref(1000); // 商品の価格
const taxRate = ref(0.1); // 税率（10%）
const totalPrice = computed(() => price.value * (1 + taxRate.value)); // 税込み価格を計算
</script>

<template>
  <div>
    <p>商品価格: {{ price }} 円</p>
    <p>税込価格: {{ totalPrice }} 円</p>
  </div>
</template>

仕組みの詳細

1. price や taxRate が変更されると、自動的に totalPrice が再計算される
2. totalPrice の値がキャッシュされ、依存データ (price や taxRate) が変わらない限り無駄な再計算が行われない
3. テンプレート内では totalPrice を通常の変数のように扱える

watch() を使った動的なデータ処理

watch() は、指定したリアクティブなデータの変更を 監視（ウォッチ） し、その変更に応じて特定の処理を実行するのに使われます。
たとえば、API の再取得や、特定の処理をデータの変更に応じて実行する 場合に便利です。

watch() の基本的な使い方

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

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`count が ${oldVal} から ${newVal} に変更されました`);
});
</script>

<template>
  <div>
    <p>カウント: {{ count }}</p>
    <button @click="count++">増やす</button>
  </div>
</template>

watch() の仕組み

1. count の値が変更されるたびに watch() のコールバック関数が実行される。
2. watch(count, (newVal, oldVal) => {...}) の第1引数 newVal には新しい値、第2引数 oldVal には変更前の値が入る。
3. ボタンをクリックすると count の値が増え、コンソールに変更が表示される。

computed()とwatch()の違い

ref() と reactive() を使った状態管理

ref() を使った単純なリアクティブデータの管理

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

const message = ref('Hello Vue 3');
</script>

reactive() を使ってオブジェクトや配列をリアクティブにする方法

<script setup>
import { reactive } from 'vue';

const user = reactive({ name: 'Taro', age: 25 });
</script>

ref() と reactive() の違いと使い分け

• ref() → 単一の値に適用（数値・文字列・真偽値など)
• reactive() → オブジェクトや配列に適用

Composition API の実践例

カウンターアプリを作成して ref() を使った状態管理を体験する

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

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

<template>
  <button @click="increment">カウント: {{ count }}</button>
</template>

フォーム入力のバインディングと reactive() を使った状態管理の例

<script setup>
import { reactive } from 'vue';

const form = reactive({ name: '', email: '' });
</script>

<template>
  <input v-model="form.name" placeholder="名前を入力" />
  <input v-model="form.email" placeholder="メールアドレスを入力" />
  <p>名前: {{ form.name }}</p>
  <p>メール: {{ form.email }}</p>
</template>

まとめ

• Vue 3 の Composition API は、より柔軟で再利用しやすいコードを実現する
• setup() 内で ref() や reactive() を使い、リアクティブなデータを管理できる
• computed() はキャッシュされる計算プロパティ、watch() はデータ変更時に処理を実行するために使う
• Composition API を活用すると、コードの可読性・再利用性が向上し、大規模なアプリ開発にも適している

Composition API を活用し、よりモダンで効率的な Vue 3 の開発を始めましょう！