Vue.jsのコンポジションAPIを使って再利用可能なロジックを実装する

作成日 2024.12.20
Vue.js
Vue.js

Vue.js 3で導入されたコンポジションAPIは、ロジックの再利用性とコードの可読性を向上させるための強力な機能を提供します。この記事では、コンポジションAPIを使った実装方法とその応用例を詳しく説明します。

1. コンポジションAPIの基本
2. Reactive APIを使った状態管理
3. カスタムフックの作成
4. カスタムフックの利用
5. Provide/Injectを活用したデータ共有
6. Watch APIを用いたデータ監視
7. テンプレート内でのComposition APIの使用
8. Lifecycleフックの利用
9. Ref vs Reactiveの使い分け
10. リアクティブデータを外部モジュールで管理
11. テスト可能なコンポジションロジック
12. 既存のオプションAPIとの併用
13. まとめ

コンポジションAPIの基本

コンポジションAPIは、`setup`関数を使ってコンポーネントのロジックを定義します。このアプローチにより、ロジックをモジュール化して再利用しやすくなります。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};

Reactive APIを使った状態管理

`reactive`関数を利用して、複数のプロパティを持つオブジェクトをリアクティブにすることができます。

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello',
    });

    function updateMessage(newMessage) {
      state.message = newMessage;
    }

    return {
      state,
      updateMessage,
    };
  },
};

カスタムフックの作成

カスタムフックを使用することで、ロジックを簡単に再利用できます。

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  return {
    count,
    increment,
    decrement,
  };
}

カスタムフックの利用

作成したカスタムフックを利用して、複数のコンポーネントで同じロジックを使うことができます。

import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement } = useCounter();

    return {
      count,
      increment,
      decrement,
    };
  },
};

Provide/Injectを活用したデータ共有

Provide/Injectを使うと、親コンポーネントから子コンポーネントにデータを効率的に渡せます。

import { provide, inject } from 'vue';

// 親コンポーネント
export default {
  setup() {
    const message = 'Shared Data';
    provide('sharedMessage', message);
  },
};

// 子コンポーネント
export default {
  setup() {
    const message = inject('sharedMessage');
    return { message };
  },
};

Watch APIを用いたデータ監視

`watch`関数を使ってデータの変化を監視し、特定のアクションを実行できます。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return { count };
  },
};

テンプレート内でのComposition APIの使用

テンプレートでReactiveなデータやメソッドを直接使用できます。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};
</script>

Lifecycleフックの利用

`onMounted`や`onUpdated`などのライフサイクルフックを使うと、コンポーネントの特定のタイミングで処理を行えます。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('');

    onMounted(() => {
      message.value = 'Component has been mounted!';
    });

    return { message };
  },
};