Vue3.0で導入されるComposition APIを、いち早く使いこなすためのリンク集
はじめに
Vue.js × TypeScriptを始めるにあたり、Vue3.0からComposition APIというものが導入されるらしいということを知りました。 Vue2.x系であれば、vue-class-componentというライブラリを使うことが多いそう。 ただ、どうせ新しくなるならとComposition APIを使い始めました。
調査を進め、実際に使ってみた中でこれはいいぞ！と感じたので、参考にしたサイトをまとめてみました。
まず最初に、簡単にComposition APIの概要を説明した後、リンクのまとめに入ります。 リンクのまとめは調査の目的別に、3つのカテゴリに分類しました。
<目次>
- はじめに
- Composition APIとは？
- 1. Composition APIの最新情報を手に入れたい
- 2. Composition APIが導入された背景を理解したい
- 3. Composition APIの具体的な実装を学びたい
- おわりに
Composition APIとは？
Vue.3.0で導入されるコンポーネントを書くための新しいAPIです。React Hookから影響を受けていて、 現在提供されているAPI(Options-based API)が抱える課題を克服するために作られました。 ※現状のOptions-basedが完全に置き換わる訳ではないようです。
Vue3.0へのアップデートの中でも、注目されている変更の一つのようです。 Vue.js London2019でも、3つのセッションでComposition APIが取り上げられていました。
Composition APIで大きく変わるのは以下の2点です。
1. TypeScriptの全面的サポート
2. ロジックの関心をベースにコードを構造化できるようになる
1について 現状のAPIはそもそも型推論を念頭においた設計になっていないので、TypeScriptで書くには大変だったとのこと。Composition APIではそれを解消しました、という話。もちろん今まで通りJavaScriptも引き続きサポートしています。
2について 現状のOptions-based APIは 「このコンポーネントはdataを2つ持っていて、methodを3つ持っていて...」という書き方になり、コードが断片的になってしまいます。あるロジックを変更しようとした時、コンポーネントファイル中に散らばる関係各所に影響が出る可能性が高くなります。特に、コンポーネントが複雑になるほど変更しづらくなっていきます。
Composition APIでは、「このコンポーネントがしようとしていることは、X, YとZということです。」 という書き方ができるようになり、ロジックが何をしたいのかということをベースにコードを書けるようになります。
公式のRFCでは下の画像のようなイメージと説明されています。
出典: https://vue-composition-api-rfc.netlify.com/#code-organization
Composition APIの特徴はこれだけではありません。 しかし、全部書くとそれだけで1記事書けるボリュームになりそうなので、概要はここまでさせていただきます。 以下リンクのまとめに入っていきます。
1. Composition APIの最新情報を手に入れたい
1. RFC
やはり公式の情報。 概要から、実装例、背景となる考え方まで必要最低限のことはここに書いてあります。 全部読もうとすると、大変ですので、まずはなぜComposition APIなのかと何ができるようになるのかの章を読むだけでも良いと思います。
2. Vue Mastary
全8回のビデオコース。包括的かつ、わかりやすく説明されています。 現在は2回分のレッスンのみ公開されていますが、2019年11月19日までに全レッスン公開される予定です。 画像を使いながら説明してもらえるので、イメージが湧きやすいかと思います。 RFCは詳細まで書いてある分、分量もそこそこあるので、この動画から始めるのはアリかと思います。
3. Twiiter上の発信をキャッチアップする。
リリース情報や有用な情報はTwitterから得られることも多いです。 以下のアカウントをフォローしていれば、大体の情報はキャッチアップできるはず。 Evan You Vue.jsの作者 Vue.js公式 Vue.jsコアチームが運用する公式アカウント Vue.jsニュースレター リリース情報やイベント情報・tipsなど、まとめて発信している Vue Mastery レッスン情報だけでなく、有用な記事のシェアをしている ツイート検索 時折、スライドや講演動画が見つかることがある
4. Pull Request
ここでは、Composition APIの主に、実装の面での質疑応答がやりとりされています。 つまりどころや不明点などの質問に対して公式からの回答があります。 他の人の質疑から知見を得ることもできますし、自ら質問を投げても良いでしょう。
5. 実装の進捗はこのリポジトリから。
ソースコードをいち早く読みたい場合は、ここで読むことができます。
2. Composition APIが導入された背景を理解したい
1. Vue Mastary
上でも挙げましたが、Vue Mastaryの説明はとてもわかりやすいです。
2. RFCのMotivationの章に導入の背景が書いてあります
こちらも上で挙げたものです。 Vue Mastaryのレッスンを見たあとより詳細を知りたい方はこちらを読むといいでしょう。
3. 廃止されたClass APIのPR
なぜクラススタイルが廃止されたのか理由が詳細に書いてあります。 Class APIでは、TypeScriptのサポート問題を解決できないことや、内部的な実装が難しいこと、デコレータに依存し実装に不確実性が残ることなど、事細かに説明されています。 こちらを読むと、Composition API導入の背景を詳しく知ることができるかと思います。
3. Composition APIの具体的な実装を学びたい
1. API Reference
言わずもがな、API リファレンス 実装するなら、リファレンスには一通り目を通しておくと良いでしょう。
2. Vue2.x用ライブラリ
このライブラリで、Vue2.x系でComposition APIを使えるようになります。
3. Vue3.0デモンストレーション
source code PDF Vue.js London 2019にて行われた、Vue.js コアメンバーLinusborgによるデモンストレーション
Vue MastaryにてVue.js London 2019の発表動画が公開予定だそうです。
4. サンプルアプリケーション
@JAStewartがVue2系とVue3系を比較しています。 @VueJsGlasgowでの発表だそうです。
30分弱ある動画ですが、Vue2系とVue3系でどう実装が変わるのか、pros/consは何か、詳しく比較しています。 Composition APIを使った、Vue3らしい書き方を学ぶ時に参考になります。
5. 日本語での解説
今のところ、Composition APIについての日本語の解説記事は少ないですが @ryo2132さんの記事と@Daikids2さんの発表資料 はとてもわかりやすいです。
おわりに
リリースはまだ先のVue3.0ですが、Composition APIによってVueが進化するのは間違いなさそうです。 一足先にComposition APIを学びたい、取り入れたいという人に向けて参考になれば幸いです。 新しい情報が出たら随時更新していきます！
なお、記載していることに間違いや修正点があればコメントでご教授いただければと思います。
それでは、楽しいVue Lifeを！
