ビジネスとIT活用に役立つブログBlog


過去のコードをComposition APIを使って書き直してみる(前編)

この記事をシェアする:

VueのメジャーバージョンアップがQ3 2020に予定されており、Roadmap通りであればもうすぐ公開されます。
そこで、Vue3の目玉のひとつである「Composition API」を使って、過去に当ブログでご紹介したコードを書き直してみたいと思います。

今回は前編として、Composition APIについてまとめて行きます。

Composition APIとは?

Introducing the Composition API: a set of additive, function-based APIs that allow flexible composition of component logic.

公式には「コンポーネントロジックの柔軟な構成を可能にする追加の関数ベースのAPI」と記載があります。

具体的には、コードが見やすくなったり、コードの共通化がしやすくなったり、TypeScriptライクになったりするみたいです。

筆者の環境

$ vue -V
@vue/cli 4.4.1

環境構築

  • presetは「Manually select features」を選択します
  • featuresは今回「TypeScript」を指定します。
  • Use class-style componentは「No」を選択します
  • Vue2系でComposition APIを使えるよう、「@vue/composition-api」をAddします
  • main.tsでComposition APIを宣言します

以上で、Vue2系でもComposition APIが使えるvue-cliの環境ができました。

書き方の違い

標準(Option API)のTypeScriptとComposition APIを使用した書き方の違いを見ていきます。

定義

Option API

Composition API

 setup関数 の中にdataやmethodを定義していきます。
 defineComponent を用いることで型推論を有効化しています。

data

Option API

Composition API

 ref関数  reactive関数 を用いて宣言します。
 <template> 内で扱うdataはsetup関数内でreturnしてあげます。

Use ref and reactive just like how you’d declare primitive type variables and object variables in normal JavaScript. It is recommended to use a type system with IDE support when using this style.

とあるように、 ref はプリミティブな値、 reactive はオブジェクトを宣言するときに使いますが、まだ明確な使い分けは決まっていないようです。

method

Option API

Composition API

methodもdataと同様にsetup関数内で定義し、returnします。

computed

Option API

Composition API

computedはsetup関数内で computed 関数を用いて定義します。
こちらもdata, methodと同様、returnしてあげます。

props, emit

Option API

Composition API

親ComponentはOption APIと基本的には同じです。
v-bindで子Componentにpropsでデータを渡し、子ComponentのEmit Eventを受けて発火させたmethodで受け取ったデータを処理します。

子Componentではpropsで受け取った値をsetup関数に渡します。
emitには this ではなく context を用います。
contextの型は SetupContext です。

Lifecycle Hooks

Option API

Composition API

setup関数内で各関数を定義し、その中にロジックを書きます。
マッピングは下記の表の様になっています。
 created  beforeCreate はsetup関数に内包されています。

Option API Composition API
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
activated onActivated
deactivated onDeactivated
errorCaptured onErrorCaptured

まとめ

筆者自身がフロントエンド開発経験が少ないこともありますが、 this に縛られ、思うようにmethodを切り出せなかったり、TypeScriptの型推論と格闘したりと苦い思い出があります。 今回Composition APIを導入してみて、ストレスフリーな書き味になったなと感じました。

次回は、当ブログの過去記事「JavaScriptフレームワークの「Vue.js」を使ってToDoリストを実装してみよう」前編 後編 のコードを実際にComposition APIで書き直しながらリファクタリングしていきたいと思います。


この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!