
Vue Fes Japan 2024に参加してきました!
10月19日に開催されたVue Fes Japan 2024に参加してきました。その日の模様をレポートします!
<プロフィール>
角田賢太朗/プロダクト開発統括1部フロントエンドエンジニア。2022年11月にディレクターとして入社し、2023年10月にフロントエンドエンジニアにジョブチェンジ。
Vue Fes Japanとは

Vue.js 日本ユーザーグループのスタッフによって企画・運営されている、文字通り「Fes=お祭り」のようなイベントです。Vue.jsを共に盛り上げ、学び、楽しむために誕生した日本最大級のVue.jsカンファレンスです。
RIZAPでは「chocoZAP」のサービスサイトや、RIZAPグループ株式会社・RIZAPテクノロジーズ株式会社の両コーポレートサイトに、Nuxt.jsというVue.jsのフレームワークを使用しています。
また、当社では社員の成長を支援するために外部のカンファレンス参加を奨励しており、今回もその一環として参加しました!
Vueユーザー大集合!
かっこいいオープニング映像と共に、Vue Fes Japan 2024が開幕しました!RIZAPで初めてフロントエンドエンジニアとして社員になった私にとって、外部のエンジニアたちと直接交流できるこの機会は非常に貴重です。
キーノート(基調講演)では、VueとViteの創設者であるEvan You(エヴァン・ユー)氏が登場し、Vueの現状と未来について熱く語ってくれました。過去1年でVueのダウンロード数が約2倍に増加しているとのことです!
早速セッションが始まる!
イベントは主に4つのブースでセッションが行われ、当日は7つのセッションを聴くことができました!どれも興味深く、あっという間に1日が過ぎてしまったことに驚きました。
多くのセッションでは、業務上発生する課題をVueの機能を使ってどのように解決したかの事例や、他のツールと組み合わせて効果を発揮した方法の紹介が行われました。ここでは、特に印象に残ったいくつかのセッションをいくつかご紹介します!
普通のエンジニアが頑張って30万行のNuxt3バージョンアップした話
タイトルに惹かれて思わず参加してしまいました(笑)。
このセッションでは、30万行のNuxt2アプリケーションをNuxt3にバージョンアップする過程で、サービスや運用フローの見直しができ、OSSの理解を深める良い機会になったという内容が語られました。
理解を深めるためには、目的を持ってVueやNuxtのコードを読むことが有効だと話されていて、現場で悩むことが成長につながるのだなと感じて身が引き締まる思いでした。
2万ページのSSG運用における工夫と注意点
NuxtとmicroCMSを使ったサイトが、以前はビルドに1時間以上かかっていたものの、現在では2万ページを25分程度でビルドできるようになった過程が解説されていました。
現在chocoZAPは驚異的なペースで店舗を増やしており(2年半で1700店舗)、今後さらに拡大することを考えると、このセッションで取り上げられる課題にいずれ直面するだろうと思いました。どんな困難があり、どのように解決したのかを先取りできそうだと感じて参加しました。
当社のサイトも同じような構成になっており、インフラエンジニアやSREエンジニアの協力を得てビルド時間短縮の工夫をしています。しかし、このセッションの登壇者はフロントエンドエンジニアでありながら、自身でさまざまな工夫を凝らしている点が印象的でした!自分も周辺の領域についてもっと知識を深めていきたいです。
VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~
プロダクトの拡大に伴い、デザインシステムとプロダクトの責務を分離するために、VueとViteを活用したUIコンポーネントライブラリを開発したそうです。このセッションでは、その背景や開発方法、導入プロセスについて解説されていました。また、Focus Day制度という、内発的な開発に充てる時間を作る取り組みがこのチャレンジに繋がり、有効な成果を上げたことも紹介されていました。
事業拡大に伴い、デザインシステムの横展開が必要になり、機能を別のアーキテクチャとして切り出したことで、同一コンポーネントが複数のリポジトリで管理され、メンテナンスコストが増加したことが背景にあったそうです。当社もチームやサービスがどんどん拡大しているため、いつか同じような課題に直面するかもな〜と感じながら聞いていました。
そして、説明を聞く限り開発手順も思ったより複雑でなくて、VueとViteの柔軟さにも驚きました!セッションで得た学びをこれからのプロジェクトに活かしていきたいと思います。
企業ブースやアフターパーティも盛り上がっていました!








Vue Fes Japan に参加してみて
最後は食べ物の写真ばかりになってしまいました…。エンジニア同士の交流を通じて新しい視点や学びを得ることができ、非常に刺激的でした。これからもVueの機能を積極的に活用し、事業に貢献できるよう業務に取り組んでいきたいと思います。そして、次のVue Fes Japanでは、自分自身も発表者として参加できるよう、さらなる成長を目指していきたいです。
\あなたもRIZAPのエンジニアとして働きませんか?/
▽新卒採用
▽中途採用