初めまして、プロダクト開発本部の渡辺と申します。
kickflowに入社して数ヶ月が経ちました。
日々の業務で多くのことを学び、充実した毎日を送っています。

今回は「Vue Fes Japan 2024」というカンファレンスに参加したので、そのレポートをまとめようと思います。
kickflowもスポンサーとして協賛しており、当社ではフロントエンドにNuxt 3を使用しているため、今回のカンファレンスは多くの学びが得られると期待していました。

Vue Fes Japan 2024 とは

まず、「Vue Fes Japan 2024」とは何かについて簡単におさらいします。
「Vue Fes Japan 2024」はVue.jsに関連する技術や最新トレンドが集う場です。

Vue.jsは、2014年にEvan You氏によって開発されたJavaScriptのフロントエンドフレームワークです。
React.jsやAngular.jsと並んで、人気のあるJavaScriptフレームワークの1つです。

2018年に誕生したこのカンファレンスは、文字通りFes＝お祭りのようにVue.jsを共に盛り上げ、共に学び、そして何よりも共に楽しむために誕生しました。

Vue Fes Japan 2024: Messageから抜粋

公式サイトのメッセージにもあるように、このカンファレンスは堅苦しい雰囲気ではなく、セッションやグッズ、エンターテイメントなどを含んだ楽しいお祭りのようなイベントです。

会場の雰囲気

建物

会場は大手町。いかにも東京らしい街並みです。
東京駅から徒歩5分ほどで、アクセスも非常に便利でした。

kickflowトラック

kickflowはネーミングライツで協賛しました。
当日は4つのトラックが並行してプログラムを進行しており、そのうちの1つが「kickflowトラック」でした。
案内にもkickflowの名前がしっかりと表示されていました。

会場内

ネームカード

お弁当

お昼にはお弁当が提供されていました。
3種類の中で、1つはヴィーガン用のお弁当が用意されていました。
ヴィーガン弁当は事前申込が必要でしたが、私はしょうが焼き弁当にしました。
（なぜお弁当の写真がないのかというと…食欲に負けてしまい、写真を撮る前に食べてしまいました！）

気になったセッション

カンファレンスは渡辺とプロダクト開発本部の芳賀が参加していました。それぞれが気になったセッションをいくつか紹介します。

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

「プロダクトからデザインシステムの責務を分離」という課題背景から実現までたどり着いた道筋についてご紹介いただきました。
コンポーネントライブラリの実装はもとより、デザインシステムの運用や組織体制まで深く考えられてあり、
全社でデザインシステムを取り込んでいることが伝わるいいセッションでした。
会社・組織規模では全く違いますが、少しでも取り入れていけたらなと思います。（芳賀）

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

「修正が多すぎて手が足りない」というあるあるに対する一定の解として Aider を導入した内容でした。
簡単な改修なら比較的頼ることができ、更にその修正を自動化することで圧倒的なコストパフォーマンスを実現しておりました。
コードの軽いリファクタリング・テストコード作成ならお任せすることができるので、
ぜひ触ってみたい技術の一つとなりました。（芳賀）

3. 「普通のエンジニアが頑張って30万行のNuxt 3バージョンアップした話」

kickflowでも同じ課題に取り組んでいたため、非常に興味深く感じました。（私が入社する前の話ですので、私は直接関与していません。）
その時の詳細は下記のブログにまとまっていますので、興味がある方はぜひご覧ください。

tech.kickflow.co.jp

私自身も前職で同様の課題に直面していました。
他の優先度の高いタスクが多く、このプロジェクトは後回しにされていました。
（より優先度の高い課題が山積していたためです。）

今回のセッションで特に印象に残ったのは、「小さく始めること」の重要性です。
スピーカーはまずやらないことを決めたと話していました。

Composition APIへの変更
Piniaの導入
ユニットテストの拡充

過去の自分に教えたいのは、少しずつでも良いので始めることの大切さです。
結論として「気合い」が必要という話もありましたが、スピーカーの戦略的な課題解決のプロセスが非常に参考になりました。（渡辺）

4. 「Vue 3とSvelte 5のランタイムを比較する〜技術を一段深く理解する〜」

スライド
SvelteやVaporを使用したことはありませんでしたが、ざっくりとした違いを理解することができました。
正直なところ、内容は完全には理解できませんでしたが、フロントエンドフレームワークを比較する際のポイントがわかったのは大きな収穫でした。
Vueは仮想DOMを使用していますが、SvelteやVaporは仮想DOMを使用せず、実DOMを直接操作しています。
ランタイムを比較することで、どの関数がどのタイミングで呼ばれているかがトレースしやすくなり、分からない部分があったけれど興味を持てました。

このセッションでは「興味をそそられた」というのが一番の印象です。
知らない用語がたくさん出てきたのでメモを取りました。次はもう少し理解できるようになりたいと思います。（渡辺）

5. 「次世代フロントエンドクロストーク」

このセッションは、少し自分には難易度が高いと感じました。
テーマは「これからのJavaScriptエコシステム」についてです。

個人的な感想としては、「Rustを書きたい！」という気持ちが強くなりました。
以下の3つの質問が議論されました。

「JavaScriptエコシステムの未来について」
「なぜ今、JavaScriptエコシステムのRust化が進んでいるのか」
「これまでとこれからのJavaScriptエコシステム」

Evan You氏が率いるvoid(0)というチームでは、JavaScript開発環境のために次世代の統合ツールチェインを開発しているとのことです。
RolldownというバンドラーがRustで開発されており、JavaScriptエコシステムは着実に進化しています。
現場の雰囲気としては、「WebpackやBabelの設定に時間を取られず、より価値提供に集中できるようになった」という感想が中心でした。

また、
Boshen Chen氏「ツールチェイン自体をJavaScriptで書くことが間違いだった」
Evan You氏「いやいや、（過去の時点では）ツールチェイン自体をJavaScriptで書くことは間違いじゃなかった」
という掛け合いも面白かったですね（笑）

改めてフロントエンド開発の転換点を迎えていることを感じることができ、
その転換点に対してどう開発者として向き合うかを気付かされたセッションでした。（芳賀・渡辺）

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

最大1000件のデータを画面で表示、リアクティブな編集が求められるというヘビーな要件に対し、
LCP・INPの観点からパフォーマンスチューニングを行うという内容でした。
様々なTipsをご紹介いただき、その中でも一番楽で効果的なのは「Vueをアップデートする」ことかなと感じております。
直近のバージョンアップもパフォーマンスチューニングに寄ったものですし、
何より便利な関数が増えて開発者目線で使いやすくなっています（最近ですと defineModel の登場などですね）。
明日から使えるネタが豊富にあったので私も時間を見つけては取り入れていこうかなと思います。（芳賀）

感想

全体を通して感じたのは、フロントエンド技術の進化が一層加速していることです。
フロントエンドの進化に伴い、新たな課題も生まれており、その課題解決に向けた技術開発が非常に活発になっている印象を受けました。

JavaScriptがここまで発展してきた要因の1つは、すぐに動かせる・小さく始められるといったJavaScript自体の「手軽さ」にありますが、エコシステム統一の開発がRust化するにつれて、エコシステム自体の開発が複雑化し、手軽に開発できなくなっている点をEvan氏が懸念している話が印象的でした。開発者ゆえの悩みという感じですね。利用する側の視点とは違った苦悩があって、自分にとっては新鮮な話でした。今回のカンファレンス参加は技術的なこと以外にも大きな学びがあって大変有意義なものになりました。

一緒に参加した芳賀にも今回のカンファレンスについて感想を聞いてみました。下記が芳賀の感想です。

ツールチェイン群の統合、アツいですね。
昔片手間でwebpack職人をやってた頃からローコンフィグで開発に集中できる今は天国かなと感じるほどです。
またツールチェイン群のRust化による高速化、期待しかありません。
自身もRustを書いてContributeしたいところです。

今回、久しぶりの参加側として参加でき、Vue Fesの盛り上がり・お祭り具合を肌で感じることができました。
こういったカンファレンスで得られるものとして、知識・ノウハウもさることながら、
「モチベーションが上がる」が一番かなと思います。
純粋にVueが好き、技術が好き、といった人と触れ合うことで「Vue書きたい！」という思い一層深まりました。
これからもVueをやっていくぞ！！