📝

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

2020/09/18に公開・約3,800字・4件のコメント

JavaScript

2020/09/18 19:00より開催された「UIT meetup vol.10 Vue三昧」の参加レポートです。

UIT Quiz

👨‍💻 発表者: @spring_raining
📷 動画開始位置: https://youtu.be/EjFKRr2ArFQ?t=302

Vue3直前Q&A「kazuponさんに聞くVue3」前編

👨‍💻 発表者: @kazu_pon
📷 動画開始位置: https://youtu.be/EjFKRr2ArFQ?t=968

（以下内容メモ）

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の利用は我慢する

Vue Router Next ~ 意外と語られないVue3時代のルーティング ~

📷 動画開始位置: https://youtu.be/EjFKRr2ArFQ?t=4540
👨‍💻 発表者: @NozomuIkuta
📝 内容メモ:

Vue Routerは実は大型アップデート。魅力的なアップデートである
useRouteでrouteの情報を取得できる
モーダル表示状態をネイティブにヒストリーに残せる Router view route prop

Vue3直前Q&A「kazuponさんに聞くVue3」後編

📷 動画開始位置: https://youtu.be/EjFKRr2ArFQ?t=5662
👨‍💻 発表者: @kazu_pon

終わりに

以上、「UIT meetup vol.10 Vue 三昧」参加レポートでした。
いやー面白かったです。運営の皆様ありがとうございました。
今夜VueJSGlobalにて（おそらく）Vue3が発表されるので、そちらも必見です。

2020/09/19 6:04追記

Vue3リリースされました〜!!まさかのOne PIece!!

Discussion

とてもわかりやすいレポート、ありがとうございます！

既に把握されていたら申し訳ありませんが、発表資料が公開されていたため、コメントさせていただきました。

(がんばらない) Vue 3 移行

Vue Router Next - 意外と語られない Vue 3 時代のルーティング

資料URLありがとうございます!!!!🤩
反映させます!!!

反映させました〜!!

ありがとうございます！👍

ログインするとコメントできます