「Nuxt 3」の新機能を体験してみよう――環境作成からVue 3の新機能活用・Nuxt Bridgeの利用方法まで

JavaScriptフレームワーク「Vue 3」と「Nuxt 3」の活用 第1回

Vue 3のComposition APIを試す

　前述の通り、Nuxt 3ではVue 3の機能が利用できます。そこで、Vue 3の目玉機能の一つといえる「Composition API」を利用して、図7の簡単なWebページを実装してみます。このWebページでは、入力した苗字と名前をつないで画面表示します。また「あいさつ」ボタンを押すとあいさつ文をダイアログで表示します。

図7　Nuxt 3とComposition APIで実装したWebページ（p002-nuxt3-composition）

　図7の通り表示させるため、app.vueファイルをリスト3の通り実装します。

［リスト3］図7に対応するapp.vueの実装（p002-nuxt3-composition/app.vue）

<template>
  <div>
    <div>
      <input v-model="family"><input v-model="given">
    </div>
    <div>名前: {{ fullName }} </div>
    <button @click="onClickGreet">あいさつ</button>
  </div>
</template>
<script lang="ts">
export default defineComponent({ // コンポーネント処理内容の記述 ...（1）
  setup() { // Composition APIでページ内容を設定 ...（2）
    // 変数 ...（3）
    const family = ref('吉川')
    const given = ref('英一')
    // 算出プロパティ ...（4）
    const fullName = computed(function() {
      return `${family.value} ${given.value}`
    })
    // メソッド ...（5）
    const onClickGreet = () => {
      alert(`こんにちは、${fullName.value}さん`)
    }
    // 変数・算出プロパティ・メソッドを返却 ...（6）
    return {
      family,
      given,
      fullName,
      onClickGreet
    }
  }
})
</script>

　Webページの内容を<template>部、その処理内容を<script>部に記述します。<script>部のdefineComponent（1）は、TypeScriptの型推論を機能させるため、Vue 3で導入されたメソッドです。このメソッド内に、Composition APIで定義されたsetupメソッド（2）を記述して、ページ（コンポーネント）を実装していきます。

　Webページで参照する変数（3）は、変数値を引数にしたrefメソッドで定義することで、Webページで変更した内容が変数に反映される、いわゆる双方向データバインディングが実現できます。変数をもとに、動的に処理した内容をプロパティとして参照できる算出プロパティ（4）はcomputedメソッドの引数に処理内容を記述し、通常のメソッド（5）は変数として定義します。最後にそれらをsetupメソッドの戻り値として返却します（6）。返却された変数・算出プロパティ・メソッドは<template>部で参照・利用できます。

　ここではComposition APIのさわりだけを説明しましたが、詳細はVue 3の過去記事も参考にしてください。

[補足]Nuxt 3の自動インポート機能

　リスト3では、defineComponent、setup、ref、computedをインポートするimport文の記述がありません。これはNuxt 3がこれらのメソッドを自動的にインポートしてくれるためです。自動インポートされるのは、Composition APIのメソッドやNuxtが提供するメソッドで、すべてのメソッドは、プロジェクト実行時に生成される.nuxt/auto-import.d.tsで確認できます。

図8　自動インポートされるメソッドがリストされるauto-import.d.tsファイル（p002-nuxt3-composition/.nuxt/auto-import.d.ts）

　また、プロジェクトにcomponents、composablesフォルダーが存在する場合、その配下に配置したコンポーネントなどのファイルも自動インポートされます。