Vue3リリース間近!!「UIT meetup vol.10 Vue 三昧」参加レポート

公開：2020/09/18
更新：2020/09/236 min読了の目安（約3800字）TECH技術記事 4
JavaScript
TypeScript
Vue.js
#
勉強会

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にマイグレーションしやすいのは利点
  • 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!!