Vue.js Composition API完全ガイド：使い方とベストプラクティス

Vue.jsのComposition APIは、Vue 3で導入された新しい機能で、Vue.jsのコンポーネントの設計と再利用性を向上させるために開発されました。このAPIは、既存のOptions APIに代わるものとして提供されており、より柔軟でロジックの再利用がしやすいコードを書くことができます。

Composition APIの主な特徴

1. 再利用可能なロジック

Composition APIは、複数のコンポーネント間で使用できる「composable」関数を作成することを可能にします。これにより、特定の機能をコンポーネントのロジックとして一箇所にまとめ、それを必要に応じて他のコンポーネントで簡単に再利用できます。

2. より良い型推論のサポート

TypeScriptとの互換性が向上しています。Composition APIはTypeScriptの型推論をフルに活用し、より堅牢なアプリケーションの構築を支援します。

3. ロジックの整理

大規模なコンポーネントでは、Options APIを使用すると、関連するロジックがプロパティ、メソッド、ライフサイクルフックなど、異なるセクションに分散してしまうことがあります。Composition APIを使用すると、関連するロジックを一箇所にまとめて配置でき、コンポーネントがより読みやすく、管理しやすくなります。

基本的な使用法

Composition APIを使用する際の基本的なステップは以下の通りです：

1. setup() 関数: すべてのComposition APIのコードは、コンポーネントの setup() 関数内で書かれます。この関数は、コンポーネントのインスタンスが作成される前に実行され、reactiveなデータ、computedプロパティ、メソッドなどを返すことができます。
2. reactiveなリファレンス: ref() 関数を使ってreactiveなデータを作成します。これは、プリミティブなデータタイプをreactiveにするために使用されます。
3. リアクティブなステート: reactive() 関数は、複数のプロパティを含むオブジェクトをreactiveにするために使用されます。
4. computedプロパティとウォッチャ: computed() と watch() 関数を使用して、データの変更に応じて計算されるプロパティや、データの変更を監視するロジックを設定できます。

例

以下は、Composition APIを使用したシンプルなカウンターコンポーネントの例です：

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

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

export default {
  setup() {
    const count = ref(0)
    function increment() {
      count.value++
    }
    return { count, increment }
  }
}
</script>

この例では、ref() を使用してreactiveなカウント変数を作成し、ボタンクリックでその値を増やす関数を定義しています。これにより、Composition APIを使って、簡潔で再利用しやすいコンポーネントを作成できます。