Vue3リリース間近!!「UIT meetup vol.10 Vue 三昧」参加レポート
2020/09/18 19:00より開催された「UIT meetup vol.10 Vue三昧」の参加レポートです。
UIT Quiz
👨💻 発表者: @spring_raining
📷 動画開始位置: https://youtu.be/EjFKRr2ArFQ?t=302
QRコードからLINEアプリを開いて行う視聴者参加型のクイズでした。
新しい試みで面白かったです! ただ、問題進行の同期制御がなかなか大変そうでした。(自分の環境だとなかなか上手く次の問題に行きませんでした..)
Vue3直前Q&A「kazuponさんに聞くVue3」前編
👨💻 発表者: @kazu_pon
📷 動画開始位置: https://youtu.be/EjFKRr2ArFQ?t=968
@spring_rainingさんが事前に募集した質問を@kazu_ponさんに質問していくインタビュー形式のコンテンツでした。どの質問も気になっていたものだったので、回答を聞けて良かったです。
特にマイグレーションで使えるツールのvue-codemodは初耳だったので、調べてみようと思っています。
(以下内容メモ)
1. Composition APIと今までのAPIとの使い分けは?
- コンポーネント間でのロジックの共有のために使う。2.xのoptionスタイルでそれを行うためにはMixinを使うしかなかったが、ネームスペースの問題などがあった。Composition APIなら従来のJavaScriptの構文でロジックを共通化できる
- optionスタイルをどういった時に使う?
- JavaScriptのスキルが求められる
- Composition APIは設計スキルが、optionスタイルの方が良い
- 競合しないのかというと競合する
- 解決潤としては先にOptionスタイルが処理されて、その後にsetupが処理される
- setupで上書きされる
2. Composition APIにおけるVuexとの親和性は?
- Composition APIとVuexは使える
- Vuex4ではVue3のAPIとの互換性を持つ。Composition APIと一緒に使える
- Vuex5のロードマップもすでに出ている。今はデザインレベルの話まで。実装はこれから。
3. もしVue3を新規プロジェクトで始めるとしたらVuexを導入すべきかどうか?
- 小さい規模で使う場合は、オーバーヘッドになるので使うべきかというと難しい。Composition APIの方が良い場合もある
- VuexはSSRの時の状態のハイドレーションが出来る。SSRを使う場合はVuex or Nuxtを使うのが良い
4. Vue3の共有ステートの管理は何を使うべき?
- 状態管理の最適解は、アプリケーションの規模と、チームの規模によって変わる
- 3つの状態管理方法がある
- Vuex
- VuexはFluxでレールが決まってるので規約が楽。DevToolsでデバッグができる。SSR時のハイドレーションに対応
- TypeScriptの型が弱い。データフローが冗長になる
- Vue Observable + Provide/Inject
- 開発のガイドラインをチームで決める必要があるが自分たちに合わせてカスタマイズできる
- Provide/Injectを使えばDIで疎結合を保てる
- DevToolsが対応してないのは不便。SSRのハイドレーションは不便
- Composition API + Provide/Inject
- Observableとほぼ同じ
- Vue3にマイグレーションしやすいのは利点
- Vuex
- Vuex5はTypeScriptの4.1の機能で変わってくる。完全なTS化も出来そう
5. <script setup>
とサードパーティライブラリの対応
-
<script setup>
は実験的機能 - JavaScriptの機能をハックしているので、気持ち悪いと感じる人もいそうではある
6. Vue2からのマイグレーションをする際の戦略は?
- Vue2.7にVue3の機能をバックポートしている
- vue-codemodでマイグレーションを実行してから、 Vue2.7を入れて修正、Vue3に対応させるのが良い
(がんばらない)Vue3移行
📷 動画開始位置: https://youtu.be/EjFKRr2ArFQ?t=3621
👨💻 発表者: @nhayashida
📝 内容メモ:
- LINE LIVEではVue3を利用中
- esllint-plugin-vue@nextを入れて、Vue3で廃止される機能を使うとwarningを出すようにしてた
- vue-codemodも利用
- 移行完了までComposition APIの利用は我慢する
まずLINE LIVEでプロダクトとしてVue3を使ってるということに驚きでした。
esllint-plugin-vue@next, vue-codemodはかなり使えそうですね。eslint-plugin-vue@nextは早速プロダクトでも使っていきたいと思いました。あと、Composition APIをあえて入れないというのはなかなかキモだと思いました。
Vue Router Next ~ 意外と語られないVue3時代のルーティング ~
📷 動画開始位置: https://youtu.be/EjFKRr2ArFQ?t=4540
👨💻 発表者: @NozomuIkuta
📝 内容メモ:
- Vue Routerは実は大型アップデート。魅力的なアップデートである
- useRouteでrouteの情報を取得できる
- モーダル表示状態をネイティブにヒストリーに残せる Router view route prop
Vue Router Nextの変更は全く追ってなかったので勉強になりました。
特にuseRouteでのsetup関数内でのroute情報の取得と、Router view route propでのモーダル表示状態をヒストリーに残せる機能が良いですね。他にも便利な機能がたくさんありそうなので、RFCを読んでみようと思いました。
Vue3直前Q&A「kazuponさんに聞くVue3」後編
📷 動画開始位置: https://youtu.be/EjFKRr2ArFQ?t=5662
👨💻 発表者: @kazu_pon
最後にまたUITのLINEアプリを使って、今度は@kazu_ponさんから視聴者へのアンケートを実施しました。
Vue3をすぐ使うかどうかのアンケートから、IE11への対応アンケートまで幅広い内容でした。自分の回答結構マイノリティ側だったので新鮮でした。
終わりに
以上、「UIT meetup vol.10 Vue 三昧」参加レポートでした。
いやー面白かったです。運営の皆様ありがとうございました。
今夜VueJSGlobalにて(おそらく)Vue3が発表されるので、そちらも必見です。
2020/09/19 6:04追記
Vue3リリースされました〜!!まさかのOne PIece!!