Vue.js v-tokyo オンライン Meetup#14参加した

Vue.js v-tokyo オンライン Meetup#14のメモです。

vuejs-meetup.connpass.com

KARTE MessageにおけるVue3移行　@Kippei Wadaさん

開発環境

学習コストの低さなどからVueを選択している。

  • サービスの巨大化に伴いマイクロサービス化
  • 共通コンポーネントあり

移行について

既存はあるけど +α段階。高速にプロトタイピングしたいけど、人の入れ替わりが激しい。学習コストが低い方が良い。

Vue3のいいところ

  • TS対応
  • シンプルに記述できる
  • Composition APIのおかげでロジック再利用性が高い

新規でVue3で作る方法で移行

Vue2 → Vue3

基本新しく作り直し、Vue2の引っ越しコンポーネントやVuexなどを移行してきた。

気になった点など

使ってないよと回答いただいた。デコレーターは便利かもしれないけど、アップグレードを考えるとない方が楽なのかもねと思った。

Vuex 5 – Vue 3におけるステートマネジメントの今後 @Kia kingさん

Vuex3 = Vue2、Vue2がある限りはサポートされる。 Vuex4はVuex3の完全互換。API変更はない。

Vuex5 Vueのグローバルステートマネジメントを目的にしている。 ステートマネジメントは流行っている。

グローバルステートマネジメント = Vueの世界では、親子関係にないコンポーネント間で共有されるステートのこと。 親子関係のdataのやりとりはPropsを使う。そうじゃない場合（ページ跨ぎetc...）とかにグローバルステートを使おうという思想。

モチベーション

  • Code splittingしたい 今までは一部ページしか使わないのに全ページで読み込まれていた。使うところだけでステートを持ちたい。
  • SSRのサポート SSRでVuexを使うのはオレオレ実装になりがち。
  • グローバルステートをVue Devtoolsでサポートしたい
  • 拡張性

目指すところ

  • Options/Composition APIで書けるようにする
  • 完全なTypeScriptサポート
  • Mutation廃止 Fluxから脱却してシンプルにしたい
  • ネストされたモジュールの廃止 複数Storeを組み合わせて使う

storeオブジェクトを一度作り、それを渡してあげる。commit・dispatchなどを使う必要はない。 template内で使うことができる。

このstoreオブジェクトは呼ばれない限り使われない。自動でcode splittingできる。

インスタンスをどこに差し込むのかがポイントになりそう。

気になった点など

自分が関わってるアプリもページ跨ぎはVuexでデータ受け渡しているけど、これ結構よくあるパターンなんだなと思った。

みんなでオレオレ実装するのやめようよ、とか1週間も勉強がいるなんて重いよねという話を聞いて↑みたいな印象を受けた。

Everything Beyond State Management in Stores with Pinia @posvaさん

デモをずっとみていてメモが取れなかった。

pinia.esm.dev

気になった点など

コードがシンプルでいいなと思った。記載量が減る表現がわかりやすかった。

Timelineという機能はこう使うのか、というのが印象に残った。

全体を通して

「できる限りPropsでデータはやりとりしつつ、どうしても必要ならState使っていこう。でもまずはコンポーネント設計だよね」という印象を受けた。

Container Component Presentational Componentパターンがあるよと教えてもらったので調べてみる。

久しぶりに勉強会参加したけど、やっぱり業務だけだと「知らない」ものには出会えないなあと思った。