【Report】 v-tokyo Meetup #19 に参加してきました

はじめに

こんにちは、ムラです。
Vue.js v-tokyo Meetup #19に参加しましたのでそのレポートを簡単にまとめていきます。

今回参加した v-tokyo

Vue.js 3.4 をキャッチアップ特集ということで、内部的なリアクティブやビルド周りのパフォーマンスを改善する大きなアップデートとなったVue.js 3.4の特徴ついて知ることができる会となっておりました。

私も初めて登壇させていただきました。とても貴重な経験をありがとうございました。

会場スポンサーセッション: Vue.jsを用いて数万の農地のデータを数秒で表示させるまでのカイゼンの軌跡 (登壇しました)

登壇：株式会社オプティム 西村さん
資料: https://speakerdeck.com/optim/v-tokyo-19

ピンポイント農薬散布サービス(PTS)のマップへ表示するポリゴンデータ、画面描画時間、操作性の改善に関する登壇でした。

• 操作性の改善
  • 改善前: そのたびにポリゴンデータを取得していた
  • 改善方法: Piniaに一旦詰めキャッシュすることで改善、副次作用としてグローバルStateのためどこからでも引用しやすくなった
• 表示速度の改善
  • 改善前: ポリゴンデータは容量、生成に時間がかかるためその影響でクロームが落ちる、nginxが落ちるなどポリゴンの過剰表示の影響が出ていた
  • 改善方法: 4点の座標込みポリゴンデータを取得していたのを中心座標のみのポリゴンデータを取得し必要な分だけ表示

登壇では話しきれないことが多くありましたので、以下に記載します

• 今回のパフォーマンス改善により、場合によっては20倍のパフォーマンスが向上しました。また、発表当時に質問されていた「工数」の改善についてですが、最大35%の削減に成功しました。
• 今回の改善ですが、Vue3移行と同時期に実施しておりました。
• v-tokyoということでフロントエンドの改善にフォーカスしましたが、バックエンド(Spring boot)の改善も実施しております。また別の機会に紹介できたらなと思います。

LT セッション1: defineModelを使って気軽にコンポーネントのv-modelをやろう

登壇者：株式会社ICSのフロントエンドエンジニア にしはらさん
資料: https://speakerdeck.com/nishiharatsubasa/definemodelwoshi-tuteqi-qing-nikonponentonov-modelwoyarou

defineModelに関する紹介でした。Vue3.4から安定版となる機能で、今後コンポーネントの作成がより容易になるのではないかと期待しております。

LT セッション2: 軽率にVue 3でリアルタイム3Dアプリを作れるライブラリを作ってみた

登壇者：株式会社ホロラボ ソフトウェアエンジニア ニーニイサンさん
資料: https://speakerdeck.com/drumath2237/vue-with-3d-app

Vue3でWeb3Dを動かすBabylon.jsに関する登壇でした。私自身、Three.jsしか知らなかったので、新たな発見でした。

LT セッション3: BuefyのMaintainerを引き継いだ件

登壇者：フリーランス キクオさん
資料: https://speakerdeck.com/kikuomax/buefynomaintainerwoyin-kiji-idajian

CSSフレームワークBulmaのVue.js用軽量コンポーネントBuefyのVue3対応に関する登壇でした。私自身、業務を通してVue3移行の大変さを知りましたが、それ以上に大変な作業をされていると感じました。

LT セッション4: vue3-openlayersを使ったGISシステム開発

登壇者：フリーランス オカメさん
資料: なし

気象情報の可視化システムを制作し雨の降水量マッピングを実装するために利用したおすすめのライブラリ、vue3-openlayersに関する登壇でした。コンポーネントの導入で地図に様々な情報を表示できる点は自身の業務に活かせそうだなと感じました。

スポットイベントスポンサーセッション: Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト

登壇者：STORES 株式会社ソフトウェアエンジニア wattanxさん
資料: https://speakerdeck.com/wattanx/getting-started-with-nuxt-test-utils-for-efficient-testing-nuxt-applications

Nuxt Test Utilsを使った自動テストに関する登壇でした。コンポーネント単位やE2Eレベルではテストを書いていないため、このようなライブラリの紹介は個人的にはとてもありがたい内容でした。

メインセッション: Vue 3.4

登壇者：Vue.js日本ユーザーグループ代表 PLAID株式会社 kazuponさん
資料: https://speakerdeck.com/kazupon/vue-3-dot-4

Vue 3.4のアップグレードに伴う変更点に関する関する登壇でした。とても内容が濃い登壇でした。個人的には以下の3点が特に気になっています。

• defineModelの安定化
  • これにより、子コンポーネントの実装がより用意になると考えています
• リアクティブシステムの改善
  • computedの処理において、コールバックが複数回トリガーされるという問題が改修されています。これによりcomputedを使用した部分のパフォーマンス改善が期待されます。
• コンパイラパフォーマンス改善
  • 全体的に44%高速化されているようです。vue-cliからViteに移行した際も感動しましたが、さらに感動できると思うとワクワクします。

おわりに

このタイミングでの投稿になってしまった要因として、私の登壇部分の資料のアップロードが遅くなってしまったことがあげられます。情報は鮮度が命なので、今後はもう少し早く公開できるように努めてまいります。
Vue.js v-tokyo Meetup #20も開催されるようなので、興味ある方はぜひ参加してみてください！