Vue3.3 での Function Signature を用いた JSX での Vue コンポーネントの書き方

概要

Vue.jsはバージョン3.3以降で、開発者に新しい書き方を提供するための機能を追加しました。この新機能、Function Signature を用いることで、VueコンポーネントをJSX形式でより簡潔に書くことが可能になります。今回は、この Function Signature を用いたコンポーネントの書き方について説明します。

Function Signatureとは?

Vue 3.3 から導入された Function Signature は、コンポーネントの定義を関数のシグネチャーを通して行う新しい方法です。これにより、JSXを使ったVueコンポーネントの記述が、<script setup>構文と同じくらい直感的になります。

以下の例は、Function Signature を用いたVueコンポーネントの定義方法を示しています。

export default defineComponent(props => {
  const count = ref(0)

  return () => {
    return <div>{count.value}</div>
  }
},
{
  props: ['msg', 'list']
})

このコード例では、defineComponent関数を使って、コンポーネントの関数シグネチャーを定義しています。props => { ... }の形で、propsを受け取り、コンポーネントの内部ロジックを定義しています。このアプローチにより、JSXを利用している場合でも、Vueのリアクティブシステムと統合された、宣言的で読みやすいコードを書くことができます。

注意点

Function Signatureを使用する際の重要な注意点は、definePropsやdefineEmitsといったマクロがまだ利用できないことです。これは、propsやemitsの定義を別途行う必要があることを意味します。そのため、コンポーネントの第二引数としてpropsの定義を含める必要があります。

参照: Vue.js 公式ドキュメント