Vue 3 Composition API 活用術

Vue 3 Composition API を活用した開発パターン

Vue 3 の Composition API は、リアクティブな JavaScript コードを再利用可能な関数として組織化する強力な機能です。従来の Options API と比較して、より柔軟で保守性の高いコードを作成できます。この記事では、Composition API を活用した開発パターンについて掘り下げていきます。

リアクティブな関数 (Composable) の作成

Composition API の中心となるのは、リアクティブな関数、別名 Composable です。Composable は、特定のアクションまたはロジックをカプセル化し、他の Composable から再利用できるようにします。Composable は、React の Hooks と似たようなものです。

// counter.js
import { ref } from 'vue'

export default function useCounter() {
  const count = ref(0)

  const increment = () => {
    count.value++
  }

  return {
    count,
    increment
  }
}

上記の例では、`useCounter` という Composable が作成されています。`count` というリアクティブな変数と `increment` という関数が含まれています。`increment` 関数は、`count` の値をインクリメントします。`count` の値が変更されると、リアクティブなシステムが自動的に更新されたコンポーネントを通知します。

依存性の注入 (Dependencies Injection)

Composable 内で他の Composable を利用する場合、依存性の注入という手法が有効です。これにより、Composable がコンポーネントの作成時に依存関係を注入されるようにすることができます。これにより、Composable の依存関係が明確になり、テストも容易になります。

// form.js
import { ref } from 'vue'
import useCounter from './counter.js'

export default function useForm() {
  const name = ref('')
  const count = useCounter()

  const handleSubmit = () => {
    console.log('Name:', name.value, 'Count:', count.count.value)
  }

  return {
    name,
    handleSubmit,
    count: count.count
  }
}

上記の例では、`useForm` という Composable が作成されています。この Composable は、`useCounter` composable をインポートし、その `count` プロパティを利用しています。これにより、`useForm` composable が `useCounter` composable に依存することになります。

Reusable Logic の抽出

Composition API の最も大きな利点の 1 つは、特定のロジックを再利用できることです。Composable を作成し、複数のコンポーネントで共有できます。これにより、コードの重複を減らし、保守性を向上させることができます。

まとめ

Vue 3 Composition API は、リアクティブな JavaScript コードを再利用可能な関数として組織化する強力な機能です。Composable を活用することで、より柔軟で保守性の高いコードを作成できます。依存性の注入と再利用可能なロジックの抽出は、Composition API の重要な概念です。これらの概念を理解することで、Vue 3 アプリケーションをより効率的に開発することができます。