🚀 はじめに

Vue.js の Composition API は、Options API の代替として登場し、コンポーネントのロジックをより構造化し再利用可能にする強力な機能です。本記事では、Composition API の基礎から応用までを網羅的に解説します。Options API で苦労していた方、コンポーネントの複雑さを感じている方必見です。

📚 基礎知識

Options API では、データ、メソッド、computed properties、watcher など、コンポーネントのロジックが個別のオプションとして定義されます。Composition API は、これらのロジックを関数としてまとめて記述することで、より柔軟で再利用可能なコードを実現します。これにより、関連するロジックを一つのまとまりに保ち、コンポーネントの可読性と保守性が向上します。

🗎 Reactive と Ref

Composition API の中でも特に重要な概念が、`reactive` と `ref` です。これらは、コンポーネント内でデータのリアクティブ性を実現するための関数です。

`reactive` 関数は、オブジェクト全体をリアクティブにします。オブジェクトのプロパティが変更されると、変更が自動的に検出し、ビューを更新します。

import { reactive } from 'vue';

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

    return {
      state
    }
  }
};

`ref` 関数は、単一の値（数値、文字列、オブジェクトなど）をリアクティブにします。 `ref` でラップされた値にアクセスするには、`.value` プロパティを使用する必要があります。

import { ref } from 'vue';

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

    return {
      count
    }
  }
};

⚙️ Lifecycle Hooks

Composition API では、Lifecycle Hooks は `onMounted`, `onUpdated`, `onUnmounted` などの関数を使って利用します。これらは `setup` 関数内で呼び出すことができます。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted!');
    });

    return {}
  }
};

✨ Custom Hooks

Custom Hooks を使うことで、再利用可能なロジックをカプセル化し、コンポーネントのコードをより簡潔に保つことができます。Custom Hooks は、`use` というプレフィックスを付けることが一般的です。

// useCounter.js
import { ref, onMounted } from 'vue';

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

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return {
    count,
    increment,
    decrement
  };
}

// MyComponent.vue
import { useCounter } from './useCounter';

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

    return {
      count,
      increment,
      decrement
    }
  }
};

🛠️ エラーハンドリング

エラーハンドリングは、アプリケーションの安定性を確保するために不可欠です。Composition API では、`try…catch` ブロックを使用してエラーをキャッチし、適切な処理を行うことができます。

import { ref } from 'vue';

export default {
  setup() {
    const data = ref(null);

    const fetchData = async () => {
      try {
        const response = await fetch('https://example.com/api/data');
        data.value = await response.json();
      } catch (error) {
        console.error('Error fetching data:', error);
        // エラーメッセージをユーザーに表示するなど、適切な処理を行う
      }
    };

    fetchData();

    return {
      data
    }
  }
};

🚀 パフォーマンス

Composition API を使用する際には、パフォーマンスを考慮することが重要です。特に、リアクティブなデータやライフサイクルフックを過度に使用すると、パフォーマンスが低下する可能性があります。

以下は、パフォーマンスを向上させるためのヒントです。

• リアクティブなデータを必要最小限に保つ
• 不要なライフサイクルフックの使用を避ける
• `watchEffect` や `watch` を使用する際には、依存関係を適切に指定する
• `memoized` を使用して、計算コストの高い処理を最適化する

🎉 まとめ