こんにちは。
hacomono Engineering Office の りゅーほ @rh1011_ です。
hacomonoは、先月開催されたVue Fes Japan 2024にGoldスポンサーとして協賛をさせていただきました。
参加したエンジニアのセッションレポートを公開いたします。
[Keynote: Vue, Vite and the Future of JS Tooling]
▼yasu
Vue.js 生みの親である Evan You 氏が立ち上げた void(0) によって、これからフロントエンドのツールチェーンを統一していくという話。
同社の Oxc プロジェクトによって開発されている Rust 製のリンターやフォーマッターがどれくらい DX, UX の改善にそれぞれ寄与するのか、今後が楽しみになった。
▼suchino
Vite がいろんなライブラリの共通インフラになったが、bundler や minify, transformer が別々のツールで行われているためまだ完璧ではないため、Oxc を toolchain, Rolldown を bundler としていくことで無駄を省いて高速化していくとのこと。（Rome(現Biome)と同じ考え…？）
進捗として結構出来てる印象なので、これからの動向が楽しみ！
▼gaaamii
Vue 3.5の機能紹介や、Viteの今後の話。
Evan氏がvoid(0)を立ち上げてやろうとしているJSのツールチェインの開発の構想が説明されていた。正直この辺はあまり追えておらず細かいところは理解できなかったのだが、複数のツールで同じ処理を行う非効率をなくしていこうという方針が理解できた。
[VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~]
▼mon
プロダクトからデザインシステムの分離、デザインシステムのコンポーネントライブラリ化はhacomonoでも意識すべき課題。
ちゃんと見据えて開発していれば、切り出しは思いのほか低コストという印象も受け参考になった。FocusDayという取り組みで、自発的な提案に時間を使えるという社風も面白いと思った。
▼yasu
デザインシステムとプロダクトの分離の背景にあった課題感の一つ「同一コンポーネントが複数リポジトリで管理され、機能差分やメンテナンスコストが増加しデザインシステムとの整合性を保つことが困難に」は、hacomono でも顕在する亜種コンポーネントの問題と似ているように感じた。
▼suchino
今まさに hacomono でも検討しているコンポーネントライブラリ作成の話で勉強になった。
（最低限の）実装自体は簡単にできるとのことなので hacomono でもじゃんじゃか作っていきたい気持ち！
[IT未経験者をVue.jsで開発できるITコンサルタントに育てあげる秘訣 - フューチャーの新人研修の取り組み]
▼mon
Vue.jsの開発者が事業拡大に伴い足りなくなったという話があり、そこは採用周りでも感じる課題。新人研修ではIT経験未経験それぞれのカリキュラムがあるのは手厚いなと思い、少し羨ましい気持ち。Vue触り始めの人はデータの受け渡しまわりで質問が多いとのこと、確かに初学者はそこが気になる所かも。
プロジェクトを模しての、要件定義、設計、テストまでを育成の中に組み込んでるのは強い。
▼yasu
同社の研修プログラムの一環として、擬似プロジェクトに対する要件定義からテスト、先輩社員を巻き込んだレビューまで実施している点について、とても手厚いと思った一方、自分自身も前職で新人研修を担当した経験から、コストも多くかかっているのだろうという印象を受けた。（まず、プロジェクトの題材選びがとても大変だった記憶が…）
ただ、それが新卒社員の即戦力化や、会社への定着率向上などに繋がっているのだろうと感じた。
[AIとともに歩んだライブラリアップデートの道のり]
▼mon
大量広範囲の修正をAIを(aider)用いて実施。
aiderは対話しながらコーディングし、Git連携でcommitまでしてくれるらしい。
シェルも作ってもらい、それを利用してPRまで全て自動で作ってもらい、PRチェックするのはエンジニア側。実質、エンジニアの工数の圧縮はそんなになかったらしいが体験として楽というのは参考になるし全体的に手法は色々応用してhacomonoでも使える領域がありそうで試してみたい。
▼yasu
aiderというツールの存在を初めて知ったが、社外秘情報の学習（漏洩）などには注意しつつ、hacomono の Git リポジトリを読み込ませて学習させていき、テストコードとかをいっぺんに書いてもらうような使い方もできるのではないかと思った。
[普通のエンジニアが頑張って30万行のNuxt3バージョンアップした話]
▼mon
Vue2/nuxt2/webpack => vue3/nuxt3/viteへの移行はとても参考になる話題。
技術的な話より姿勢のお話で、バージョンアップの中でやらないことをちゃんと決めて進めて行くのは常に持ちたい。優先度を決めての取捨選択はどんな時にも毎度よくある。
また、バージョンアップに伴い発生したエラーの調査によりパッケージへの理解がたかまりスキルアップできたという体験談も面白かった。
全体的に、バージョンアップに必要なのはパッション（移行するという情熱）が一番大事。
▼yasu
バージョンアップの際、自動テストとして Playwright を使っていたという話だったが、どういうテストコードを書いていたのかが気になった。
[次世代フロントエンドクロストーク]
▼gaaamii
JavaScriptツールチェインの今後についてのお話。JavaScriptツール開発の専門家によるトークでありつつ、webpack職人いらなくなると良いよね、CIの待ち時間なくしたいよねというすごい素朴な話も出ていた。ツールによってアプローチは違っても、目指すところはそんなに違わないのかなと思った。
各ツールが効率性だったりスピードの競争をしてくれるのはとてもありがたいことだが、いちアプリケーション開発者としても、どれを選べば良いのかという判断をするために、定期的なキャッチアップや見直しは欠かせないなと感じた。
▼suchino
どんどん Web アプリが肥大化していき、build や lint, format がコード量に比例して遅くなっていくことに対する解決策として、rust への移行が選択され解消されていっているのは、アプリ開発者にとってとてもありがたい！
ちょっとしたビルド待ち時間などでふと集中力が切れてしまうこともあるので、その辺りが改善されると生産性もあがるなと感じた。
[Oxc - The JavaScript Oxidation Compiler]
https://jjdlwtezpdclgxxagxpj.supabase.co/storage/v1/object/public/common_asset/archives/boshen.pdf
▼suchino
cpu での計算は速いが memory を使うようにすると遅くなってしまうので、どれだけ CPU を多く使い、 memory の使用を少なくするかがパフォーマンスで大事とのこと
rust かけるようになりたい！
[同期する都市のキャンバス：Vue.jsによる大規模メディアインスタレーションの舞台裏]
▼gaaamii
渋谷サクラステージのデジタルサイネージのシステムを手がけた際のVueとNuxtを利用した動機や、実際のシステムの構成などのお話。それまではこういったものにはC++を使われていたとのことだが、OSアップデートで動かなくなることがあるという課題があったり、また、Vueのコンポーネント管理のしやすさ、SSR機能などに利点を見出して採用されたそう。
セッションの始終、はあ。。すごい。。とため息が出てしまう（実際会場からもそんな声が聞こえてきました）感じだったが、そういったものを普段自分も触っているVueだったりCSSだったりで実現できる部分もあるというところが、ウェブ技術の可能性を感じることができてとてもワクワクした。
[Vaporモードを大規模サービスに最速導入して学びを共有する]
▼gaaamii
まだ実験的な機能であるVueのVaporモードを実際のアプリケーションに適用してみて、どれくらいのパフォーマンス改善が見られるか、という発表だった。
私はVaporモードについてよく知らなかったので、興味を持つきっかけとしてとても良いセッションだった。地道にChromeのdevtoolsでvapor on/offの比較をされていて納得感があったのと、実際のアプリケーションを題材にしていたこともあり、パフォーマンス改善の度合いを理解しやすかった。
私の場合、普段の業務ではVirtual DOMでは我慢できない（もっと高速化しないと体験が悪い）という場面になかなか遭遇しないこともあって、Vaporをすぐ使いたい！とはならなかった。しかし、1つ前のインスタレーションのセッションのように、自分の知らない使い方やパフォーマンス要件というのも存在するし、Virtual DOMのさらにその先のパフォーマンス改善を見込める技術を知ることができたのはとても良かったと感じた。
株式会社hacomonoでは一緒に働く仲間を募集しています。
エンジニア採用サイトや採用ウィッシュリストもぜひご覧ください！
