Vuejs における Composables 〜 ステートフルなロジックのカプセル化〜

Vue.jsにおけるComposables（コンポーザブル）は、Vue.jsアプリケーションのコードを再利用可能なロジックユーティリティとして抽象化するためのパターンです。これは、Vue 3から導入された概念で、Composition APIと密接に関連しています。Composablesは、アプリケーション内で頻繁に使用されるロジックを分離し、コードの保守性を向上させ、コードの再利用性を高めるのに役立ちます。

Composablesは通常、以下のような特徴を持ちます

1. 単一の責務: Composableは一つの具体的な責務を持ち、特定の機能やデータロジックに焦点を当てます。例えば、フォームバリデーション、データの取得、ローカルストレージの操作など、さまざまな用途に合わせて作成できます。
2. 再利用性: Composablesはアプリケーション内で再利用可能であり、同じロジックを複数のコンポーネントで共有できます。これにより、コードの重複を減少させ、保守性を向上させます。
3. 独立性: ComposableはVueコンポーネントと独立しており、外部のコンポーネントと組み合わせて使用できます。これにより、コンポーネントの再利用性とテスト容易性が向上します。

Composablesを使用すると、アプリケーション内で特定のロジックを簡単に共有し、保守性を向上させることができます。また、Composition APIと組み合わせて使用することで、Vue.jsアプリケーションをより構造化され、理解しやすくするのに役立ちます。

以下は、Composablesの一例です。この例では、フォームバリデーションのためのComposableを作成しています。

// useValidation.js
import { ref } from 'vue';

export function useValidation() {
  const error = ref(null);

  function validateEmail(email) {
    if (!email.includes('@')) {
      error.value = '有効なメールアドレスを入力してください';
    } else {
      error.value = null;
    }
  }

  return {
    error,
    validateEmail,
  };
}

このComposableを使用するVueコンポーネントでは、以下のようにインポートして利用できます。

// MyComponent.vue
<template>
  <div>
    <input v-model="email" @blur="validateEmail(email)" />
    <span v-if="error">{{ error }}</span>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useValidation } from './useValidation';

export default {
  setup() {
    const email = ref('');
    const { error, validateEmail } = useValidation();

    return {
      email,
      error,
      validateEmail,
    };
  },
};
</script>

このようにして、フォームバリデーションのロジックをComposableとして抽象化し、異なるコンポーネントで再利用できるようになります。