Composableとは？
主にClassの代わりです。
Composition APIでは、関数にロジックを記述するため、Classを(そのままでは)利用できません。
そこで、関数内に関数(手続き)と変数(データ)を作成しオブジェクトに封入し返す関数を作成します。
Classをどうしても利用したいor既存のClassを利用したい場合、Classをインスタンス化し返すラッパー関数としてComposableを作成するテもあります。
JS/TSのClassはオブジェクト・リテラルのシンタックス・シュガー(糖衣構文)なので、ラッパー関数の返すオブジェクトはそのまま分割代入できます。
関数と変数を一塊としてオブジェクトにして返すことで、そのままprovide/injectできます。provide/injectを使いたくないなら、コンポーネントのpropsに(オブジェクトとして)そのままセットすることもできます。
ロジックの実行のみを行い、オブジェクトを返さない、引数を介して値をやりとりする関数もありです。
これらの関数がComposable(合成関数)です。
Composableはクロージャです。
ナゼ、Composable？
名が体を表しています。
Composableの真価=ロジックの合成です。
Composableの中でComposableを呼び出し、Composable内に記述したロジックを合成していけるからです。
Mixinに対するComposableの利点
名前の衝突がエラーになります。
名前が衝突した場合、明示的に別名をつける等しないと解決できません。
Mixinの場合、名前が衝突しても、後から上書いたほうが採用されるだけで、衝突を検出できません。
Mixinに内在するような問題は、Composableにはありません。
Composableのスコープ
Composableはクロージャであり、関数の一種なので、そのスコープは基本的に、関数内に限定されます。
Composable内の変数や関数は、戻り値に含めることで、外部へ公開できます。
Composableの返り値 or 引数が呼び出し元で利用されている限り、そのComposableは存在し続けます。
Composableでの多態性
JS/TSでは、関数を変数(値)として扱えます。
インターフェース(引数と戻り値の型)のみ規定した関数の型をComposable or Composable内の関数に渡す関数の型とすることで、多態性を実現できます。
Composableでの継承
継承はできません。
継承の代わりに、Composableの中でComposableを呼び出します。
Composableの中でComposableをいくつでも呼び出せます。多重継承相当のことが実現できます。
多重継承はバグの原因になることが多いため、Classベースオブジェクト指向言語(OOPL)の多くは多重継承を禁止しています。
ClassベースOOPLでは、委譲を利用することで、多重継承相当のことを実現可能です。
Composableも、委譲により継承相当のことを実現できます。
Composableの設計
オブジェクト指向設計/Class設計を学び、応用すればいいのです。
関数型(指向)での設計手法を模索するより、こちらのほうが建設的？です。
関数型(指向)は突きつめる？と、難解になりがちです。
GoFのデザインパターンも(アレンジして？)適用可能です。
React Hooksとの違い
React Hooksも、名が体を表しています。
Reactにフックする(引っ掛ける)関数なので、
React Hooksです。
ComposableとReact Hooksの違いは、Vue.jsとReactのリアクティブ・システムの違いに起因しています。
Vue.jsのリアクティブ・システム(v3以降、後年Signalsと呼ばれるようになったモノの一種)は、UIから独立しています、(直接の)関係はありません、UIのないサーバーサイドでも普通に利用できます。
それに対し、Reactのリアクティブ・システムは、UI(のレンダリング)と深く結びついています。
Composableは、refやreactiveを内部で特に注意を払うことなく利用でき、ComposableからComposableを呼び出し、チェインして(繋いで)いけます。
Composableは、UIとは関係ないので、サーバーサイドでもクライアントサイドと同じように扱えます。
Reactでは、そうはいきません。
Reactでは、カスタムHookからカスタムHookを呼び出し、チェインして(繋いで)いくことは(あまり？)想定されていません。
HookからHookの呼び出しで確実に安全？なのは、カスタムHookからのReactビルトインのHookの呼び出しくらいです。
カスタムHookからカスタムHookを呼び出し、
チェインして(繋げて)いくことはやろうと思えばできますが、その場合、カスタムHookの挙動に注意を払っておく必要があります。
また、カスタムHookは、ReactのビルトインHookがサーバーサイドでは利用できないので、サーバーサイドでは利用できません。
Composableは、refやreactiveがUI(及び そのレンダリング)から独立しているので、クライアントサイド/サーバーサイド 問わず、利用できます。
推敲中? …