Composableファクトリとパラメーター化Composable
Composableファクトリの作成、インスタンスごとの状態のスコープ化、共有シングルトン状態の回避
「Composableファクトリとパラメーター化Composable」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
パラメーターを受け取るコンポーザブル
通常のコンポーザブルは固定された動作を返します。パラメーター化されたコンポーザブルは、引数を受け取って動作をカスタマイズします。ベースURL、オプション、デフォルト値などを指定できるため、1つの関数で多くのケースに対応できます。
シンプルなパラメーター化コンポーザブル
設定を引数として渡します。ここではURLを呼び出し側から指定するため、1つのuseFetchでどのエンドポイントにも対応できます。
import { ref } from "vue"
export function useFetch(url) {
const data = ref(null)
fetch(url).then(r => r.json()).then(d => data.value = d)
return { data }
}オプションオブジェクトを受け取る
設定項目が多い場合は、デフォルト値を持つオプションオブジェクトを受け取ります。これにより、呼び出し側が読みやすくなり、コンポーザブルの柔軟性も保てます。
export function useFetch(url, options = {}) {
const { immediate = true, method = "GET" } = options
const data = ref(null)
function run() { /* fetch with method */ }
if (immediate) run()
return { data, run }
}コンポーザブルファクトリとは
ファクトリはさらに一歩進んだものです。共有設定であらかじめ構成されたコンポーザブルを返す関数です。一度設定すれば、コンポーネント間で使える用途に合わせたコンポーザブルを取得できます。
ファクトリを作る
外側の関数が共有設定（例：baseURL）を保持し、返される内側の関数がコンポーザブルになります。クロージャによって設定が組み込まれています。
export function createApi(baseURL) {
return function useApi(path) {
const data = ref(null)
fetch(baseURL + path).then(r => r.json()).then(d => data.value = d)
return { data }
}
}ファクトリを使う
ファクトリを一度呼び出し（共有モジュール内で行うことがよくあります）、設定済みのコンポーザブルを生成します。その後、どこからでもインポートして使用します。
// api.js
export const useApi = createApi("https://api.example.com")
// component
import { useApi } from "./api"
const { data } = useApi("/users")インスタンスごとのスコープ付き状態
コンポーザブルを呼び出すたびに、そこで作成されるrefは新しく、その呼び出しに固有のものになります。2つのコンポーネントがuseFetchを呼び出すと、それぞれ独立したdata refを取得するため、意図しない共有は発生しません。
const a = useFetch("/posts") // its own data ref
const b = useFetch("/comments") // a separate data refモジュールレベルで共有するシングルトン
1つのインスタンスを共有したい場合もあります。状態をモジュールレベル（関数の外側）で宣言すると、コンポーザブルがその状態をクロージャで保持し、すべての呼び出し元が同じrefを共有します。
import { ref } from "vue"
const user = ref(null) // module-level, shared
export function useAuth() {
function login(u) { user.value = u }
return { user, login }
}インスタンスごとの状態とシングルトン
- 関数の内部にある状態 → 呼び出しごと（コンポーネントごと）に新しくなります。フォームやフェッチャーに適しています。
- モジュールレベルにある状態 → 共有シングルトンになります。現在のユーザー、テーマ、アプリ全体のフラグに適しています。
データがコンポーネント固有かグローバルかに応じて選択してください。
ファクトリとシングルトンを組み合わせる
ファクトリでシングルトンを生成することもできます。ファクトリの呼び出し時に共有状態を作成し（1回だけ実行されます）、返されるコンポーザブルからその状態をクロージャで参照します。
export function createStore(initial) {
const state = ref(initial) // created once per factory call
return function useStore() {
return { state }
}
}
export const useCounter = createStore(0)ファクトリを使う場面
複数のコンポーザブルで設定（ベースURL、ヘッダー、クライアントインスタンスなど）を共有する場合や、小さなライブラリを作成して利用者が一度だけ設定できるようにする場合は、ファクトリを使用してください。それ以外では、パラメーター化コンポーザブルのほうがシンプルです。
確認テスト
コンポーザブルファクトリとスコープについての理解度を確認します。
まとめ
コンポーザブルファクトリとスコープについて学びました。
- パラメーター化コンポーザブルは、引数やオプションを受け取って動作をカスタマイズします。
- ファクトリは、あらかじめ構成されたコンポーザブルを返す関数です（設定はクロージャで保持されます）。
- 関数の内部にある状態はインスタンスごとになり、モジュールレベルにある状態は共有シングルトンになります。
- コンポーネント固有のデータにはインスタンスごとの状態を、アプリ全体の状態（現在のユーザー、テーマなど）にはシングルトンを使用します。
よくある質問
「Composableファクトリとパラメーター化Composable」レッスンは無料ですか？
はい。「Composableファクトリとパラメーター化Composable」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「Composableファクトリとパラメーター化Composable」で何を学びますか？
Composableファクトリの作成、インスタンスごとの状態のスコープ化、共有シングルトン状態の回避 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Composableファクトリとパラメーター化Composable」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 高度なリアクティビティ：shallowRefとtriggerRef
- Composableファクトリとパラメーター化Composable
- VueでのXStateによるステートマシン
- グループ化したエフェクトのためのeffectScope