先週 Vue Fes Japan 2024 Pre LT Party (非公式前夜祭)に参加してきました。この記事ではそのイベントレポートのようなものを紹介します。

※ 間違い/解釈違いが含まれる可能性もあるのでご注意ください。もしお気づきの点あればそっとコメントで教えて頂けると嬉しいです。
※ VueFesJapan2024にも、もちろん参加してきました。そちらも別途記事にします。

Vue Fes Japan 2024 Pre LT Party

様々な産業DXを実現する自社サービスを展開する株式会社オプティムさんと、食、子育て、地方創生の課題に向き合うプラットフォームを展開する株式会社エブリーさんの2社で共同開催された、1~20人規模のVue系のLTイベントでした。このイベントでは、友人に誘われ気が向いたため、初のLT発表もしてきました。

Connpass

LT・セッション

Nuxt3マイグレーションについて (OPTiM 高橋さん)

概要

涙なしでは語れない、Nuxt2からNuxt3への大規模移行プロジェクト事例紹介。

移行は2から3人体制で実施。まずローカルでのリファクタ作業にNuxtBridge導入、Vue2でも動くVue3推奨ライブラリを先んじて更新、ContextやNuxt2へ依存するコードの削除の順に対応した。また、移行と同時に実装戦略をAtomicDesignをPackageByFeatureに変更、ScriptSetupへの書き換え、更に社内デザインシステムの取り込みを行った。移行にはBedrock Claude ChatやPerplexityという2つのAIが役立った。

感想

自身が去年NuxtではないVue2プロダクトをVue3に移行した際は、同時多発リファクタを起こしてかなり破壊的なPRを多量に作成しました。このケースではむしろリファクタしたほうが進めやすかったとのことで、既存のテスト体制がよっぽどしっかりしていたか、上手い分量でPRを分割しつつ進められたのかなと思いました。他には、"移行前にVue2の時点でできることをした"という言及があり、自分も強く頷ける意見でした。これからVue3に移行する方の参考になる発表だったと思います。

unplugin-vue-routerで実現する (every 羽馬さん)

概要

Nuxt3標準搭載のフォルダ・ファイル構造を元に自動的にURLルーティング定義を作成する機能と同等のことができるライブラリ、unplugin-vue-routerの紹介。unplugin-vue-routerを使うと手動でのルーティング定義が不要になり、ファイル構造で簡単にルートが定義できるだけでなく、useRouteコンポーザブルでのルート名やパスの自動補完が効く。また、DataLoader機能を使うとページルートに依存したデータ取得Composableを簡単に書くことができる。このライブラリはSSRに対応していない点、DataLoaderが実験的APIであることには注意が必要。

感想

このライブラリの存在は以前から知っており、導入してみたいと思っていました。一方で型定義周りが正しく動くのだろうかという懸念があり、そこが上手く機能するというのは魅力に感じました。DataLoaderについては、調べたところあまり採用されていないイメージを受けましたが、機会があればためしてみようと思います。

genericで強力な型がついたコンポーネントを作ろう (お窓)

概要

Vuetify3のVSelectコンポーネントをラップし、Vue3.3からの機能であるgenericで、itemsとmodel-valueに対する型定義を強化した事例の紹介。まずVSelectをラップしたコンポーネントを作成。VSelectをラップしたコンポーネントにオブジェクト配列とオブジェクトを渡し、期待通りに型が上手く動いてくれることを確認できた。

反省点兼感想

今回は初めてLT発表をしてきました。まずは下記が反省点です。

会場には早めに着いてちゃんと映せるか確認しよう
- 機材トラブルがあった (使っているPCが古すぎてType-Cポートで映せなかった)
本当に必要な部分だけ抜粋しよう
- LT資料のコードが小さすぎた (発表者本人も見えなかった)
まとめは短くまとめよう
- 書いた内容が多すぎて上手く締められなかった

次に下記が感想です。

LT発表すると普段以上に会話してくれる人が多く、より学びを得ることが出来た
- 会話をするうち、VueコンポーネントはPropに定義していない属性をフォールスルーするため、ラップコンポーネントを作る場合使ってほしくない不要な属性を潰す処理が必要なことに気づかされました。上手く機能させるには確かに必要となる対応で、新たな学びとなりました
シンプルな内容でも発表する価値があることを感じられた
- このLTでVSelectの型が期待通りに動かないケースを初めて知ったという話を聞くことができました。学びを得られた人が居たなら、LTをする甲斐があったなと思いました

全体をまとめた感想

今回のイベントは、個人的に既に知っている情報が多かったですが、LT初登壇ができたのは経験として大きかったです。また機会があればLT発表してみたいです。

なお、今回の会場スポンサーOPTIMさんには、炊き込みご飯(スマート米)を振る舞ってもらいました。(おそらく)ここで使ったおいしいお米がAmazonで販売されているので良ければどうぞ。