コンポーザブルとは何か、どのように書くのか？

Question

コンポーザブルとは何か、どのように書くのか？

Accepted Answer

**コンポーザブル**は、Composition API を使用して**ステートフルなロジック**をカプセル化する再利用可能な関数です。慣例により `useXxx` という名前が付けられ、リアクティブな状態と関数を返します — ミックスインや繰り返しなしでコンポーネント間でロジックを共有できます。 ## コンポーザブルを書く ```js // composables/useCounter.js import { ref, computed } from "vue"; export function useCounter(initial = 0) { const count = ref(initial); // encapsulated reactive state const double = computed(() => count.value * 2); function increment() { count.value++; } function reset() { count.value = initial; } return { count, double, increment, reset }; // expose the API } ``` ## 任意のコンポーネントで使用する ```vue ``` `useCounter()` を呼び出す各コンポーネントは、**独立した**独自の `count` を取得します — コンポーザブルは呼び出しごとに新鮮な状態を作成します。これは共有モジュールレベル変数とは異なります。 ## 実例：ライフサイクル付き useFetch ```js import { ref, onUnmounted } from "vue"; export function useMousePosition() { const x = ref(0), y = ref(0); const update = (e) => { x.value = e.pageX; y.value = e.pageY; }; window.addEventListener("mousemove", update); // set up onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup! return { x, y }; } ``` コンポーザブルはライフサイクルフック、ウォッチャー、その他のコンポーザブルを使用できます — そして重要なことに、**独自のクリーンアップをカプセル化**（`onUnmounted`）するため、コンシューマーはそれを覚えておく必要がありません。 ## コンポーザブル vs ミックス（古い方法） ```text Mixins (Vue 2): merged into the component — unclear where properties came from, naming collisions between mixins, implicit dependencies Composables: explicit imports + return values — clear sources, no collisions, can be composed, fully typed in TypeScript ``` ## なぜ重要なのかコンポーザブルは Vue 3 でステートフルなロジックを抽出および再利用するための*標準的な*方法です — データ取得、フォーム処理、マウス/スクロール追跡、デバウンスなど。 Vue 2 のミックスインが失敗した場所で、ロジック再利用の問題を明確に（明示的、競合なし、合成可能、TypeScript フレンドリー）解決します。これがチームが Composition API を採用する主な理由です：共有ロジックは散在またはコード重複ではなく、単純でテスト可能な関数になります。