Vue 3から導入されたComposition APIは、ロジックの再利用性や状態管理の明確化に大きく貢献する新しい記述スタイルです。従来のOptions APIと比べて、機能単位でコードを整理しやすく、保守性にも優れています。本記事では、Composition APIの基礎から、setup()関数を使った状態管理の方法まで、実用的なコード例を交えて解説します。
Composition APIとは？
Composition APIは、Vue 3で正式に導入された関数ベースの記述方法です。コンポーネントのロジックを機能ごとにまとめることができ、複雑なコンポーネントでも見通しの良い構成が可能になります。
主な特徴は以下の通りです。
setup()関数を中心とした構造- リアクティブ変数の宣言に
ref()やreactive()を使用 - ライフサイクルフックが関数として独立
基本構成：setup関数の書き方
<template>
<div>
<p>カウント: {{ count }}</p>
<button @click="increment">増やす</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
refを使うことで、リアクティブな変数を定義できます。参照時には.valueを使う点がOptions APIと異なります。
複数の状態をまとめて扱う
複数の関連するデータをまとめたい場合は、reactiveを使うことでオブジェクト全体をリアクティブにできます。
<script setup>
import { reactive } from 'vue'
const state = reactive({
name: '',
age: 0
})
function reset() {
state.name = ''
state.age = 0
}
</script>
ライフサイクルフックの使い方
Composition APIでも、ライフサイクルフックは使用可能です。従来のmounted()などに相当する関数をインポートして使います。
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('コンポーネントがマウントされました')
})
</script>
外部関数でロジックを分離する（Composable）
Composition APIの真価は、ロジックを「Composable」として切り出せることにあります。以下のように共通処理を外部関数にまとめることで、再利用性が向上します。
// useCounter.js
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}
<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>
まとめ
Composition APIは、Vueアプリケーションの状態やロジックを機能単位で整理する強力な手法です。setup()を中心に、ref・reactive・ライフサイクルフックを使いこなすことで、よりスケーラブルで保守しやすいコードが書けるようになります。まずは小さなコンポーネントから導入し、徐々に再利用可能なComposableへと発展させていきましょう。
