Frontend Academy · レッスン

Composable：再利用可能な Composition 関数

リアクティブなロジックを use で始まる Composable 関数に抽出し、コンポーネント間で共有し、Mixin との違いを理解します。

「Composable：再利用可能な Composition 関数」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Composables とは

composable は Composition API のフックを使用して、状態を持つロジックをカプセル化し、再利用する関数です。namespace の衝突や隠れた依存関係がない点で、Composition API における mixin に相当します。

基本的な Composable

リアクティブなロジックを、use で始まる関数に切り出します。setup() と同じように、ref、computed、watch、ライフサイクルフックを使用できます。

// useCounter.ts
import { ref } from 'vue';

export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => (count.value = initial);
  return { count, increment, decrement, reset };
}

// Usage in any component:
const { count, increment } = useCounter(10);

ライフサイクルフックを使う Composable

composable ではライフサイクルフックを登録できます。フックは、その composable を呼び出したコンポーネントを基準に実行されます。

// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';

export function useOnlineStatus() {
  const isOnline = ref(navigator.onLine);

  const update = () => (isOnline.value = navigator.onLine);

  onMounted(() => {
    window.addEventListener('online', update);
    window.addEventListener('offline', update);
  });
  onUnmounted(() => {
    window.removeEventListener('online', update);
    window.removeEventListener('offline', update);
  });

  return { isOnline };
}

非同期処理を使う Composable（useFetch）

composable は非同期のデータ取得に適しています。loading、error、data のパターンをカプセル化できます。

// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
  const data = ref<T | null>(null);
  const loading = ref(true);
  const error = ref<string | null>(null);

  watchEffect(async (onCleanup) => {
    const controller = new AbortController();
    onCleanup(() => controller.abort());
    loading.value = true;
    error.value = null;
    try {
      const res = await fetch(unref(url), { signal: controller.signal });
      data.value = await res.json();
    } catch (e: any) {
      if (e.name !== 'AbortError') error.value = e.message;
    } finally { loading.value = false; }
  });

  return { data, loading, error };
}

引数としての Ref の受け取り

composable は、MaybeRef<T>（= T | Ref<T>）と unref() を使用して、通常の値または ref のどちらでも引数として受け取れます。

import type { MaybeRef } from 'vue';
import { unref } from 'vue';

function useDouble(num: MaybeRef<number>) {
  return computed(() => unref(num) * 2);
}

Composables と Mixins

mixin はプロパティを明確な出所なしにコンポーネントへ注入します。一方、composable は明示的で、戻り値から何を提供するかを正確に確認できます。名前の衝突なしに複数の composable を使用できます。

コンポーネント間での状態の共有

composable の内部で ref() を呼び出すと、その composable を呼び出す各コンポーネントがそれぞれ独自の状態を取得します。コンポーネント間で状態を共有するには、モジュールスコープ（composable 関数の外側）で ref() を呼び出します。

// Shared state (module-level):
const sharedCount = ref(0);

export function useSharedCounter() {
  // All callers share the same sharedCount
  return { count: sharedCount, increment: () => sharedCount.value++ };
}

Composable ライブラリ

VueUse（vueuse.org）は、useLocalStorage、useFetch、useDark、useIntersectionObserver など、すぐに使える 200 以上の composable を提供します。自分で一から実装する前に、必ず VueUse を確認してください。

Composables のテスト

composable は、小さなテスト用コンポーネント内で呼び出すか、@vue/test-utils の mountedApp パターンを使用してテストします。Vitest は Vue のリアクティビティシステムとよく統合できます。

Composable の命名規則

必ず use を接頭辞に付けます（useAuth、useFetch、useMediaQuery）。それぞれ単一の関心事に集中させてください。関係のない処理を多く行う composable は避けてください。

Composable の整理

composables/ フォルダーを作成します。composable ごとに 1 ファイルを用意します。インデックスファイルからすべての composable を再エクスポートします。これは、React プロジェクトでカスタムフックを整理する方法に対応します。

クイックチェック

Vue の mixin と比べた composable の主な利点は何ですか？

まとめ: Vue Composables

composable は、Composition API のフックを呼び出す use 接頭辞付きの関数です。モジュールレベルの ref を使用しない限り、呼び出し元ごとに独立した状態が与えられます。MaybeRef と unref を使用して、ref または値を受け取ります。composable の内部でライフサイクルフックを登録します。自作する前に VueUse を確認してください。明示的な戻り値により、mixin のような namespace の汚染を防げます。

よくある質問

「Composable：再利用可能な Composition 関数」レッスンは無料ですか？

はい。「Composable：再利用可能な Composition 関数」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Composable：再利用可能な Composition 関数」で何を学びますか？

リアクティブなロジックを use で始まる Composable 関数に抽出し、コンポーネント間で共有し、Mixin との違いを理解します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Composable：再利用可能な Composition 関数」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

ref() と reactive()
computed() と watch()
setup() 関数と script setup
Composable：再利用可能な Composition 関数

← Frontend Academyに戻る