優れたComposableとは
命名規則（useName）、リアクティブな状態のカプセル化、生の値ではなくrefを返す方法について学習します。
「優れたComposableとは」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
コンポーザブルとは
コンポーザブルとは、Vue Composition API を使って state を持つロジックをカプセル化し、再利用する関数です。mixins に代わる Vue 3 の方法であり、より明示的で、型も扱いやすくなっています。
useプレフィックスの慣例
慣例として、コンポーザブルにはuseプレフィックスを付けて命名します。useCounter、useFetch、useMouseなどです。これにより、その関数がリアクティブなロジックを含むことがすぐに分かります。
function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }生の値ではなくrefを返す
利用側が分割代入してもリアクティブ性を維持できるように、ref（またはリアクティブな状態）を返します。count.valueを返すと、更新されないスナップショットが渡されてしまいます。
function useCounter() {
const count = ref(0);
return { count }; // return the ref itself
}安全な分割代入
refを返すため、利用側はリアクティブ性を失わずに自由に分割代入できます。それぞれのrefが独自のリアクティブな接続を維持します。
const { count } = useCounter();
// count stays reactive after destructuring単一責任
優れたコンポーザブルは1つのことに専念します。useFetchはデータを取得し、useLocalStorageは永続化を担当します。小さく目的を絞ったコンポーザブルを組み合わせることで、大きな機能もきれいに構成できます。
コンポーザブルの合成
コンポーザブルは他のコンポーザブルを呼び出して、階層化されたロジックを構築できます。たとえば、useUserProfileの内部でuseFetchを利用できます。
function useUserProfile(id) {
const { data } = useFetch("/users/" + id);
return { user: data };
}副作用をクリーンアップする
コンポーザブルがリスナー、タイマー、購読などを追加する場合は、メモリリークを防ぐためにonUnmountedでそれらを削除する必要があります。
import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));リアクティブな引数を受け取る
コンポーザブルは入力としてrefやゲッターを受け取り、watchやwatchEffectでそれらの変化に反応できます。これにより柔軟に利用できます。
function useDouble(source) {
return computed(() => unref(source) * 2);
}名前の衝突を避ける
コンポーザブルが多くの値を返す場合は、分かりやすい名前を付けて公開します。2つのコンポーザブルがdataを返す場合は、分割代入時に名前を変更して衝突を避けます。
const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");フレームワークの作法に沿う
ライフサイクルフックを正しく登録できるように、コンポーザブルはsetup（または別のコンポーザブル）のトップレベルで同期的に呼び出します。条件分岐の中や非同期コールバックの中で呼び出してはいけません。
// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after awaitドキュメントと返り値の形
利用側が受け取る内容を把握できるように、予測しやすいオブジェクトを返します。一貫した形（状態とメソッド）にすると、コンポーザブルを学びやすく使いやすくなります。
return { count, increment, decrement, reset };確認問題
コンポーザブルは、なぜ生の値ではなくrefを返す必要があるのでしょうか。
まとめ
優れたコンポーザブルの特徴を学びました。useプレフィックス、分割代入しても安全なrefの返却、単一責任、onUnmountedでの副作用のクリーンアップ、そして返却するオブジェクトでの名前の衝突の回避です。
よくある質問
「優れたComposableとは」レッスンは無料ですか？
はい。「優れたComposableとは」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「優れたComposableとは」で何を学びますか？
命名規則（useName）、リアクティブな状態のカプセル化、生の値ではなくrefを返す方法について学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「優れたComposableとは」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。