Composition API はVue.js 3で本格導入され、現在の開発の標準となっています。従来のOptions API（dataやmethodsに分ける記述方法）と比較しながら、そのメリットとデメリットを整理しました。
Composition APIとは
Composition APIは、コンポーネントのロジックを柔軟に「組み立てる（Compose）」ための記述スタイルです。
Options APIが「オブジェクトの構造（Vue独自のルール）」に従ってコードを記述していたのに対し、Composition APIは「機能（関心の対象）」ごとにコードをまとめて整理できるのが特徴です。
Options APIとComposition APIのコード比較
同じ機能（カウントアップとメッセージ入力・クリア）を持つコンポーネントの記述例です。
1. Options API
<template>
<div>
<p>カウント: {{ count }} / 倍数: {{ doubleCount }}</p>
<button @click="increment">＋1</button>
<input v-model="message" type="text" />
<button @click="clearMessage">クリア</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
count: 0,
message: ''
}
},
computed: {
doubleCount(): number {
return this.count * 2
}
},
methods: {
increment() {
this.count++
},
clearMessage() {
this.message = ''
}
}
})
</script>
2. Composition API（<script setup>）
<template>
<div>
<p>カウント: {{ count }} / 倍数: {{ doubleCount }}</p>
<button @click="increment">＋1</button>
<input v-model="message" type="text" />
<button @click="clearMessage">クリア</button>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
// カウント機能
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
const increment = () => {
count.value++
}
// メッセージ機能
const message = ref('')
const clearMessage = () => {
message.value = ''
}
</script>
主な違い
-
thisの撤廃：this.countなどの記述が不要になり、純粋なJavaScriptの変数・関数としてスコープ内で完結します。 - 関心の対象による分割：機能ごとに変数や関数を近くに配置できるため、コードの縦移動（スクロール）が減ります。
-
ボイラープレートの削減：
export defaultやリターン文などの定型コードが最小限になります。
Composition APIのメリット
1. 純粋なJavaScript/TypeScriptに近い感覚で書ける
Vue特有のオブジェクト構造や this の挙動に依存しないため、一般的なJS/TSの知識をそのまま活かして直感的に記述できます。
2. コードを機能ごとにまとめられる
コンポーネントが肥大化しても、同じ機能に関するロジックが分散しないため、コードの可読性とメンテナンス性が向上します。
3. TypeScriptとの親和性
プレーンな関数と変数で構成されるため、特別な設定や記述をしなくても、TypeScriptの型推論の恩恵を受け、IDE等の強力なサポートを得られます。
Composition APIのデメリットと注意点
基本的にはComposition APIの利用が推奨されますが、Options APIからの移行にあたっては以下に注意が必要です。
1. 自由度の高さによるコードの散らかり
記述の自由度が高いため、プロジェクト内でルールや切り出し基準を定めておかないと、1つのファイル内に乱雑なコードが量産される原因になります。
2. リアクティブシステム（ref / reactive）の理解コスト
値を画面と連動させるためにラッパー関数（ref など）を使用する必要があります。JavaScript側からアクセスする際、.value の付け忘れが発生しやすいといった特有のルールに慣れが必要です。
公式による推奨
Vue.js公式ドキュメントでは、本番環境や中大規模のアプリケーション、およびNuxtなどのフルスタックフレームワークを利用する場合において、Composition APIと <script setup> の組み合わせを推奨しています。理由として以下の点が挙げられています。
- 本番環境でのパフォーマンス向上（プロキシを経由しないためメモリ効率と実行速度が最適化される）
- ソースコード量の削減
- エコシステム（Nuxt 3やPiniaなど）との整合性
まとめ
Options APIも引き続きサポートされてはいますが、現在のエコシステムやTypeScriptとの親和性を考慮すると、今後はComposition APIの採用が推奨されます。まだ移行していないプロジェクトについては移行を検討し、新規開発のプロジェクトにおいては原則Composition APIを採用すべきでしょう。
Composition API FAQ https://ja.vuejs.org/guide/extras/composition-api-faq
<script setup> https://ja.vuejs.org/api/sfc-script-setup