Vue Fes Japan 2022に参加しました！
はじめまして
入社7年目でブログ初執筆の宮崎です。こんにちは。
非エンジニアで新卒入社し、4年くらいユニケージ開発を経て、今は主にサーバレス案件のフロントエンド開発を担当しております。
2022/10/16に開催されたVue Fes Japanに参加してきました！
Vue Fes Japanは2018年に初開催され、2019年は台風、2020年以降は新型コロナウイルスの影響で中止が続いており、実に4年ぶりの開催となりました。
私は2019年からVue.jsを利用しているので、今回が初参加でした。
とても素敵なイベントでしたので、簡単なレポと感想を綴らせていただけたらと思います。
このイベントに求めていたもの
参加するにあたり、私はVue2からVue3へ移行することに興味があったので、その辺りを中心に聞こうと思いました。
また、現在進行中のプロジェクトでVue3を扱っているのですが、スタイルフレームワークがVue3に対応しきれていないことを悩みとして抱えており、解決のヒントを掴めればいいなと思っていました。
イベントレポ&感想
まずイベント開催形態ですが、参加者はYoutubeライブを観覧する形での完全オンライン開催でした。
運営スタッフの方々はリアル会場から配信、一部トークセッションはリアルで行われていました。
セッションは3つのYoutubeライブで同時進行されていたので、一つを選んで視聴する必要がありましたが、アーカイブが公開されているため見逃してしまったものは後から視聴することができます。
key note
Vue.js開発者であるEvan Youによるkeynote。
「Vueの変化」ということで、今までのVue.jsの変遷を語ってくださいました。
2013/12にライブラリとしてのVueJS（0.6.0）をリリース、
SFCになったVue.js1.0がリリースされたのは2015/10/26でした。コードネームはエヴァンゲリオン。
2016/10にはVue.js2.0がリリースされました。仮想DOM、SSRに対応。
2018年は時間をかけてvue-cli3.0を完成させ、ユニバーサルフレームワークとしてのVueを確立します。
2020/9はVue.js3.0をリリース、と並行してViteも完成させます。
ブラウザサポートのベースラインを上げることで、大幅なパフォーマンス向上を実現しました。
VueRouter、Pinia、Volar、vue-devtool、TS対応など、Vue3に合わせてやらなくてはならないことがたくさんあり大変だったと語ります。
メドピアのサービスにおけるテスト戦略の過去と未来
メドピア株式会社さんによるセッションです。
Storybookを導入するも、新規コンポーネント追加時にStorybookがメンテされず破棄をしたという失敗から、
新規開発ではCIツールでStorybookのメンテを強制して改善し、幸せな運用ができているという事例紹介でした。
個人的にはフロントチームの勉強会で
- Vue 3 migration guide、JS Primerの輪読会をやっている
- Vue3ドキュメント翻訳やesbuild-loaderのモブプロをやっている
ということが聞けたのが嬉しいです。
他社さんがどういう勉強会をしてるのかとても気になります。
Vue2 Vue3 マイグレーション 令和最新 最強
株式会社STUDIOのmiyaokaさんによるセッション。
タイトルがっょぃ…。発表スライド
私が聞きたかったVue2をVue3に移行するお話です。
Vue3化する前にまずVite化をしたそうです。
こちらが難なくクリアでき、この成功体験の勢いでVue3化に着手したとか。
ただやはりぶち当たるのがVue3に対応していないライブラリ問題。
小さなライブラリは自分で同等の機能を実装したけど、大型ライブラリは難しいので移行ビルド（Vue2とVue3を共存させたリリース）しながらライブラリの対応を待つべきかもと仰っていました。
そしてmiyaokaさん、これらの作業をすべて1人でやったのだとか…。
ここでtwitterに有益な情報が！
ちなみにこの後紹介する移行の話でも、基本的に1人でやってらっしゃいました。
やはりこれがベスプラなのか…。
Vue.js でアクセシブルなコンポーネントをつくるために
やまのくさんのセッション。
accessibilityをa11yと表記することも知らなかった私。
今までの開発でもあまり気にしていませんでしたが、お話を聞いて今後は考慮しようと思いました。
発表では、誤ったアクセシビリティ対応、汎用的なアクセシブルコンポーネントの作り方、アクセシビリティのテストの仕方を学ぶことができました。
何度も読み返したくなるアクセシブルな発表資料はこちら。
施策を止めるな！Vue2からVue3への移行
Retty株式会社の志賀さんによるセッション。
こちらも移行のお話です。
破壊的変更、ライブラリ依存などの対応をするのに作業時間がかかることが当初の懸念でしたが、スクラムで進めているチームに話をして理解を得て、メインの施策と同時進行で移行作業をすることができたそうです。
最初は既存プロジェクトをVue3化しようとしましたが、規模が大きすぎたのと、使用ライブラリが古すぎて断念します。
次に社内管理画面という規模の小さいプロジェクト（Vueファイルが150個）のVue3化を試みます。
手順としては、
- 公式ドキュメントを見ながらライブラリのバージョンアップ
- CompositionAPIを動かせるところまでやる
- 動かないページを1つずつ修正する
1と2は志賀さん1人で、3は不確実性が低いことからチームで並行作業ができると判断し、チームと協力して進めたそうです。
共通コンポーネントのテスト実装方法にあえてVRTを選択した話
BASE株式会社のプログラミングをするパンダさんによるセッション。
発表スライド
ユニットテスト、インテグレーションテスト、E2Eテスト、VRTのそれぞれのテスト手法を説明いただき、
どのテストが課題を解決するのか考えて選定する、というテスト戦略の考え方を知ることができました。
自分の場合、コンポーネントテストはユニットテスト、結合テストはE2Eをやって満足してしまっているので、いかに楽できるかなどの視点でいろんな手法を試してみたいと思いました。
テストでどういう課題を解決したいか？チームメンバーへの共通認識としても必要ですね。
最後に
たくさんのお話を聞けて、とても刺激的なイベントでした。
まだ聞けていないセッションもアーカイブで視聴したいと思います。
来年こそはリアル開催したい！とkazuponさん。Vueエンジニアが集まって盛り上がるのすごく素敵だと思います。
これは私事ですが、地方に移住してしまったのでリアル開催と同時に配信してくれると嬉しいなあ…。
