見出し画像

Vue Fes Japan 2024に現地参加したイベントレポート

スマートラウンド

はじめに

スマートラウンドでエンジニアをしている福本です！

2024/10/19(土)に開催された『Vue Fes Japan 2024』に現地参加したので、当日の様子をお届けしたいと思います。

スマートラウンドもフロントエンドにVue.js(TypeScript)を採用しており、最新の情報もキャッチアップせねば…と参加しました。 

当日学んだことや楽しい雰囲気を、こちらで皆さまにお裾分けできればと思います🤲 最後までぜひお付き合いください。

参加したセッションのメモ

オープニング

爆イケなムービーの後、ついにオープニング！
いきなりまさかの英語でプレゼンテーションがあり、今年は750人以上の参加者、53のスポンサーの方々が集まったみたいです。めでたい🎉

キーノート

最初はEvanのキーノート！生Evanをはじめてみました。
ありがたいことに同時翻訳が提供されていたりEvanの英語がすごく聞き取りやすかったりと、英語が得意でない自分も敷居を感じずに聞けました。

最初に、これまでのVueや、それに関するエコシステムの移り変わりを話していました。生き字引だ…。

その後は、Vueがどれくらい使われてるのかを話してくれたり…

その後はVueの進化の話をしてました。　3.5のパフォーマンスの向上やVapor Mode、3.6に関するトピックが多かった印象。天元突破グレンラガン！

あとはViteに関するトピック。Viteめちゃくちゃ使われてる & 依存関係の複雑さや、それに関する課題(パースやバンドルを何回もやってしまっているetc)の解説をしてました。「JavaScriptのエコシステムの複雑さが表面化した」なるほど…。

次のViteはとにかく依存関係を整理して、ビルドシステムをシンプルにしていくぞ…という意気込みと具体的なプランをたくさん話していました。楽しみ！期待！

ちなみに、Viteに関しては10/3に開催されたViteConf 2024で同様の内容を発表されていたみたいです。動画を見つけたので、興味のある方はぜひ👇️

VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~

デザインシステムの話！スマートラウンドはStorybookを導入していて色々改善を頑張っている背景もあり、かなり興味がありました。

内容はテーマ通り、プロダクトとデザインシステムの責務を分割する取り組みの話でした。

責務を分けたい背景として、弁護士ドットコムさんの中でデザインシステムの横展開や、複数リポジトリで同じコンポーネントを開発している等、メンテナンスコストの観点で多くの非効率があったことを上げられていました。

上記の課題に対して、zeroheightとStorybookを使い分けてプロダクトからデザインシステムを剥がしていかれたとのこと。構成図もあってイメージが尽きやすいですね。

zeroheightとstoryobookの使い分けはこんな感じ。

単にデザインシステムをプロダクトから剥がしただけでなく、実運用として全社横断でどのように良いデザインシステムを構築・維持していったかの話もありました。ありがてえありがてえ。

戦術の登壇資料より

AIとともに歩んだライブラリアップデートの道のり

今AIの話をしたな…??

というわけで、VueにおけるAI活用の話。背景として、有償サポートでVue2を使い続けていて、37万行のVue2コードに頭を抱えていたというものがあります。大変だ。

そこでAiderを導入して、Vueコードを改善していったみたいです。デモ動画では、Aiderがプロンプトごとにcommitログを残している様子があり近未来みを感じました。

実際に改善したときの進め方が面白かったです。Vue2.5で非推奨になったslotやslot-scopeを葬っていくのを、プロンプトを弄りながら精度を上げていって

他にはAIを使ってテストコードを書いていく話もしてくれました。みんな気になるよね。観点を絞ったり、最大3回実行して学習のループを作って良いテストを各工夫をしていて興味深かったです。

フロントエンドエンジニアのいない組織でVue.jsを導入するまで
（ランチセッション)

お弁当に集中していたので、メモできません…。

 Nuxtもいい感じに枯れてきていて、フロント-バックエンド全体で型安全を実現された話をされてました！Nuxtわかってないので参考になる。

Vaporモードを大規模サービスに最速導入して学びを共有する

Vueから仮想DOMを不要にすることで、実行速度の向上やメモリ使用量を抑えるVapor Modeの取り組みについて！Vapor Modeナニモワカラン。

Vapor ModeにはPlaygroundがあったので、それを実際に使ってみた結果として起きたエラー等を共有していただきました。

画面の初期描画や更新、それらを1000ステップ実行するとどうなるか…というさまざまなパターンで検証をされていて、めちゃくちゃ学びになりましたね。計測にChromeめちゃくちゃ使えるな…。

だいたいVapor Modeをonにしたときの方がパフォーマンスが上がっていて、Vapor Modeの良さみを感じました。一方、まだ開発中なのですんなり動かない箇所もありそうです。これは今後改善されそうな気もします。

Vue.js、Nuxtの機能を使い、大量のコピペコードをリファクタリングする

一休さんのコピペコードをリファクタリングする話です。私もよくコピペして…ごめんね…。

背景として、一休.comとYahoo!トラベルはサービスが統合されて1ソースで管理されているみたいです。コードを変更するときにやたら手数が多いので、Sonar Cloudで調査したところ他プロジェクトよりコピペ箇所が圧倒的に多かったらしいです。(´；ω；｀)ｳｯ…

これらを解決するために、エンジニアとデザイナーで全体を洗い出して、共通部分をコンポーネント化していったとのこと。一見すると難しく浅そうですが、サービスが大きくなるとこれも大変ですよね…。

色々整ってきたところで、開発フローを整備して、UIからそのまま実装を進めずに、コンポーネントについて議論をしてから実装をするようにしたとのこと。いきなりこのフェーズにいかずに、先に整理をしてからやるの、考えられていてとても良い進め方だなと思いました！

その後、デザイナーとエンジニアで議論する場を設け、一休とYahoo!トラベルでデザインの統一やコンポーネントの分割をひたすらしていったみたいです。お疲れさまでした！

2万ページのSSG運用における工夫と注意点

え、2万ページ…??ということで、Nuxt寄りのSSG運用のノウハウ共有。

まず当時の状況や技術構成を共有していただいた上で、課題としてあったのが、大量ページをビルドするときに80分も掛かってしまっていたみたいです。

原因を調査したところ、各コンポーネントからAPIリクエストをしてデータフェッチしてたり、ビルドにあたり遠隔リージョンと通信していた(microCMSのAPIとGitHub Actionsのリージョン違い)ことが問題だったとのこと。地道に問題の原因を特定していって、しっかり解決してるのエラすぎる…。

ここまででSSGのビルドパフォーマンスを改善した話をしていただいた上で、そもそもSSG自体の運用上の注意を共有いただきました。コンテンツ変更がすぐに反映されないなどは、SSGでよくある注意点ですね。

それ以外には、Build中にコンテンツを更新するとエラーになったり、ファイルの生成中にエラーが一度でも落ちるとBuildが失敗するなど、運用上の色んな注意点がありました。勉強になる…。

全体的になかなか大変そうな印象を受けましたが、こうやって工夫してはじめて生成済のコンテンツを利用できるので、しっかり課題と向き合って技術でよい価値を提供できるの、一エンジニアとしてリスペクトが止まりませんでした！

Vue3の一歩踏み込んだパフォーマンスチューニング 2024

みんな気になるVueのパフォーマンスチューニングの話！

実際に処理してるものとしては、最大1000件のデータを取得してテーブルで編集できるようにして、データを加工する処理があって、それが忙しいときは1日で最大1万件ほどリクエストされるらしいです。しんどい…。

前提が共有できたところで、Vueで行うチューニング手法を具体的に教えていただきました、Vue2, 3で行われてきたチューニングをバージョンを分けて整理して伝えて頂けたのが印象的で、すぐに実務に取り入れられそうな感じを受けました。

Vue3からのチューニングは、新しいリアクティブAPIやVueUseをうまく使うことを推奨していました。ちゃんと理解しておきたい。v-memoとかは完全に知らなかったです。

新しいVueで使えるようになった機能や、そもそもVue 3.5へのアップデートでもパフォーマンス改善が見込めるなど、ちゃんと新しい機能やAPIへの理解を深めておく重要性を改めて感じました。

当日の雰囲気

スポンサーブース

スポンサーブースにもお邪魔しました。ノベルティオタクなので…。
ちなみに、ブース会場は常に人がたくさんいて、盛況みを感じました。すごい。

たくさんエンジニアが居た（お顔が判別できそうな方はモザイクを入れさせていただきました）

時間がない中ですが、ブースで相手をしていただいた方、ありがとうございます！私の前職のブースで握力を測ったところ、41.7kgと微妙な数値を叩き出して変な空気になりました。引退します。

アフターパーティ(懇親会)

終わってからはアフターパーティ！！！！！！！！！！！！
！！人が多い！！！１！！飯が！！！！！！！！！！！うまい！！！！！！！！！！！１

これ日本中のVueエンジニア居るだろ…

会場ではVue.js、Vite、Pinia、Rolldownをイメージしたオリジナルカクテルが配られていました。私は唯一のノンアルコールだったRolldownを頂きました🍸ｳﾏｲｳﾏｲ

写真力低すぎマン

席でご飯とカクテルを頂きつつ、他社のエンジニアの方と交流させていただきました。ありがとうございました！

その他のセッションの資料

自分は参加しませんでしたが、TLに流れてきた資料をこちらに置いておきます👇️後から見つけたら随時追加していきます。

Vue3 と Svelte5のランタイム比較

普通のエンジニアが頑張って30万行のNuxt3移行した話

Vue でサクッと作る: Studio でのプロトタイピング開発

v-modelの歩みを振り返る

Vitest Browser Mode への期待

Vaporモードを大規模サービスに最速導入して学びを共有する

Vue SFCのtemplateでTypeScriptの型を活用しよう

Vue Vapor: Reinvention

Demystifying Vite Internals

Deep dive into Nuxt Server Components

Anthony's Road to Open Source - Yak Shaving

おわりに

さいごまで読んでいただき、ありがとうございました！

私自身、1年前にスマートラウンドに入社してからVue.jsを書き始めた背景もあって、話についていけるか不安もあったのですが、登壇者のみなさんの発表の素晴らしさや運営の方々の工夫もあって、とても楽しむことができました👏

改めてですが、運営の方々や登壇者の方々、本当にありがとうございました & お疲れ様でした！

また、スマートラウンドではVue.jsを用いてSaaSプロダクトの開発を頑張っています。そちらにも興味のある方は、ぜひカジュアルにお話しましょう🙆‍♂️

この記事が参加している募集

#イベントレポ

28,206件