VueのCompositionAPIとgraphql-code-generatorの体験が良いので紹介したい。

vue3がリリースされてから、時間が立ちました。CompositionAPIはどれくらい使用されているのでしょうか。自分は新規開発をすることが多いので、小さいLPなども含めると5つくらいのプロジェクトをNuxt × CompositionAPIで作ってきました。
そのなかで、CompositionAPIの体験がよいと思ったので軽く紹介します。

CompositionAPIのメリット

CompositionAPIと以前からあるOption APIの違いを説明するとなった時に以下のような図が用いられます。

記述がまとまるということを示しているのですが、これがまとまったことで読みやすくなるかと言われるとそうでも無い気がします。笑
逆に、OptionAPIで言うところの、dataに値する、reactiveオブジェクトやcomputedなオブジェクトが同じSetup関数内に定義されることで、読みにくさも最初は感じていました。

しかし、徐々に使っていくうちにCompositionAPIのメリットが分かってきました。
それはtypescriptの世界とviewの世界を分けられ、そのことによって複雑なロジックをtypescriptファイルに切り出せることです。

以前まで、vueでtypescriptを導入するとなるとvue-property-decorator のこちらようなライブラリーを使用しないといけませんでした。こちらも良かったのですが、型の恩恵を通常のtypescriptを書くような感覚で受けられるか？と言われると少し微妙な感覚がありました。
CompositionAPIを使用することで、vueのoptionAPIで使用していた、data, computed, mountなどが全てtypescript形式で記述できるようになったため、型による恩恵の他に責務ごとモジュールを分けることが可能になり、optionAPIで使用すると羅列されるdata, computed, methodを分けることが可能になりました。

※イメージ

export default {
  data() {
    return {
       hoge: '',
       foo: ''
    }
  },
  computed: {
    hogehoge() {
    },
    hogehogehoge() {
    },
    hogehogehogehoge() {
    },
    foofoo(){
    },
    foofoofoo() {
    },
    foofoofoofooo() {
    }
  },
  methods: {
    hogeMethod_1() {
    },
    hogeMethod_2() {
    },
    hogeMethod_3() {
    },
    fooMethod_1() {
    },
    fooMethod_2() {
    },
    fooMethod_3() {
    },
    
  }

}

Composition Functionというものを使用した例です。
useXXXXの部分がComposition Functionを利用しているところです。
Composition Functionはuse prefixをつけるのが習慣になっています。

import useFoo from 'foo' #別TSファイルからimportしてこれるようになった！
import useFoge from 'hoge'

export default defineComponent({
  setup() {
     { hogehoge, hogehogehoge, hogehogehogehge, hogeMethod_1} = useHoge
     { foofoo, foofoofoo, foofoofoofoo, fooMethod_1 } = useFoo
     
     return {
       hogehoge, 
       hogehogehoge, 
       hogehogehogehge, 
       hogeMethod_1,
       foofoo,
       foofoofoo,
       foofoofoofoo,
       fooMethod_1
     }
  }
})

Reactを触ったことがある人はわかると思うのですが、この書き方はReact Hooksの書き方に非常に近いと感じました。
両方触っることで、webフロントエンドがどのような方向に向かっているのか、分かります。

graphql-code-generatorの紹介

compositionAPIの紹介は終えて、compositionAPIと併用しているgraphql-code-generatorの紹介をします。
graphql-code-generatorの良いところは、graphqlのschemaから関数から型まで自動で生成してくれることです。

以下は、実際の画面ですが、型による入力補完ができていることがわかります。

この型生成機能によって、サーバーとフロントの繋ぎこみがすごくスムーズになりました。この体験が本当に良い！(切実に)

現時点での注意点

自分が感じている、compositionAPIを使用する上での注意点をかいて行こうと思います。
自分が主に使っているNuxtに関することが多いです。

NuxtのライブラリーでcompositionAPIに対応していないのがある

自分はvueプロジェクトは基本的にNuxtを使っているのですが、NuxtのライブラリーではcompositionAPIにまだ対応できていないのが多い印象です。
例えば、nuxt-i18n対応できていないのですが、対応できていないというのはsetup関数内で、this.$tとライブラリーの関数を呼ぶことができていないです。
vue-i18nでは対応できているぽいので、そちら使うようにするなど対応が必要です。

Nuxt使用時、SSRの挙動が怪しい時があった

NuxtのCompositionAPIを使用時にSSRがうまく動かない時がありました。
自分のプロジェクトだと、SPAとSSGの場合はそこまで問題はなかったのですが、SSRがCompositionAPIではまだ怪しいかもしれません。