APIを使ってみよう技術エントリ皆さんこんにちは虎の穴ラボのY.Fです。最近のWebフロントエンド界隈の話題を追っていると、フレームワークの勢力図的にはReactとVueの2大巨塔という感じがします。Vueに関してはメジャーバージョンアップであるVue3のリリースが迫っている状況です。ついて書いてみようと思います。Vue3についてVue3は2020年の第1クォーターにリリースが予定されている、Vue.jsのメジャーバージョンアップです。以下のような追加、変更が見込まれています。Slicingをサポートslotsの扱いを変更etc...現在はα版がリリース済みです。Vuexなどに対する対応はβ版で予定されています。準備自体も着々と進められており、以下のようなブログ投稿やリポジトリが用意されていたりします。コンポーネントを構築する新しい方法です。語弊を恐れずに言うと、ReactのHooksに近い機能となります。Vue2ではコンポーネントを構築する際に以下のような問題がありました。上記の問題を解消するために新たにVueに追加されるAPIとなります。詳細に関してはRFC用のサイトがあるので見てみてください。vue-composition-api-rfc.netlify.comまだVue3はリリースされていませんが、Vue2で先取りできるようにプラグインが用意されています。github.com今回はこのプラグインを使ってサンプルアプリを作りつつ、新旧の書き方を比較して見たいと思います。作るもの以下の条件でよくあるTODOアプリを作ります。利用しないVue2までの書き方Vue2までの書き方で素直に実装すると以下のような形になると思います。}});</script>この形式でも良いのですが、以下のような問題があります。個々のメソッドやプロパティの役割がわかりにくいTypeScriptを使っている時にthisに対する推論が効きにくい型推論の力を発揮するには、Vue.extendを利用しなければ行けないなど工夫が必要になる2個目の問題についてはvue-class-componentを利用することで解消出来ますが、今度はデコレータがたくさん必要になってしまいます。apiを使った方法を見てみます。先述したライブラリを使います。}</script>名前から役割が想像しづらいdataメソッドやmethodプロパティがなくなって、大分スッキリしたように見えるのではないでしょうか?createComponent関数を使ってコンポーネントを作成setup関数で各種設定を行うsetup関数からreturnされるものがtemplateの中で利用できるsetup関数はただの関数なので、TypeScriptによる補完が効きやすい肝はsetup関数になります。dataメソッドやmethodプロパティで定義されていた変数や関数はこのsetup関数の中で定義していくことになります。setup関数はあくまで関数です。したがって、中身の処理は別ファイルに切り出すことも出来ます。}});</script>変数の監視setup関数の中で見慣れないreactiveメソッドが使われていると思います。Vue2でのdataに値するものになります。reactiveで定義された変数が変更されると自動で表示も変更されます。Vue2触ったことある方は、computedやwatchはどこにいったんだ?と思うかもしれません。apiの関数として提供されます。watchも似たような形なので今回はcomputed関数のみ紹介します。}});</script>これらも当然別ファイルなどに切り出すことが可能です。ライフサイクルフックライフサイクルフックも同様にsetup関数の中で定義することが可能です。}});特に説明不要かと思います。ライフサイクルフックに関しては特にtemplateでは使われないのでreturnは不要になっています。apiについて紹介しました。今回は以下については触れませんでした。apiが入っても課題となる、template内でのTypeScript対応の解決策となる可能性があるので、今後も楽しみにしておきたいと思います。P.S.なんと、大阪説明会に続き札幌で説明会を実施することになりました!近隣にお住みの方はぜひお申し込みください!yumenosora.connpass.comまた、今年もLT会を順次開催予定です。Stage3その1)皆さんこんにちは。Bloodborneが安売りしてたので今さら買って...2019-10-09JavaプログラマがKotlin書いてみて便利だったところこんにちは、虎の穴ラボのH.Kです。虎の穴ラボに入ってはや2ヶ...2019-10-01WebAssemblyで遊んでみるその4〜WebAssemblyで非同期通信して脱衣(仮)ブロック崩...皆さんこんにちは。虎の穴ラボのY.Fです。Workerを使う〜こんにちは、Y.Fです。月別アーカイブ注目記事エンジニア・ディレクター積極採用中!はてなブログをはじめよう!toranoana-labさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。