Nuxt.jsにComposition APIを利用して1ヶ月でどう変わったか

Vue3での目玉として追加された機能の一つであるComposition APIは、2020年09月18日に正式リリースされ、4ヶ月が経ちました。この機能をベースにNuxt向けに提供されているNuxt Composition APIを開発に導入して、1ヶ月がたったのでそのことについて紹介したいと思います。

Composition APIとは

Composition APIがなぜ必要かというお話は、こちらのサイトに詳しく書かれているのですが、大きく捉えると”Componetとロジックが密結合にならないようにするための機能”を提供する仕組みだと思ってもらえば大丈夫です。

導入するには?

インストール自体は、Introductionで紹介されている通りに下記コマンドを実行します。

$ yarn add -D @nuxtjs/composition-api

従来の書き方との違いは?

ミニマムの書き方としては、下記のように書きます。

Option APIの書き方

import Vue from "vue"
export default Vue.extend({
})

Compositon APIの書き方

import { defineComponent } from "@vue/composition-api"
 
export default defineComponent({
  setup() {}
})

このような書き方でsetUp()の中で必要なものすべて定義する形をとります。最初は、この違いに戸惑いましたが、しばらくすると慣れます。

Composition APIが掲げるロジックの再利用性について

Vueの提供するWatchやComputed、Dataバインド機能などは、便利なのでそのままComponentの中に実装してしまいがちなのですが、このCompositon APIの機能を使うことで、WatchやComputed, data自体もComponentから切り離すことができます。下記は、疑似コードですが、setUp()のタイミングでEmit, Watch等の従来、コンポネント側で実装するような機能もComponentと切り離すことができます。

import { defineComponent } from "@vue/composition-api"
import { compositionAPI  } from "@/api/hogeCompositionAPI"
  
export default defineComponent({
  setup() {
    // ここで必要な依存関係を注入する(watch, emitなんかも)
    { 
      renderData,
      clickHandler
    } = compositionAPI()
    return {
      renderData,
      clickHandler
    }
  }
})

こんな感じで画面(HTMLテンプレートの部分)とロジックの部分を切り離すことができます。このような形でsetUp()は、必要なものをインジェクションするような形が取れるので従来のロジックだとコンポネントのテストして、このロジックの単体テストを書かないといけなかったのが、ロジックのみ部分で単体テストができるようになります。1ヶ月前は、Componentに書いていたロジックがComponentから消えて見通しよくなりました。

まとめ

Composition APIを導入して1ヶ月たったのですが、 当初感じていたよりも導入コストは低く感じています。開発メンバーも1〜2週間程度で、慣れたという印象があります。導入自体も簡単なので、さっと導入してモダンな機能を使ってみましょう。