アーカイブ

Vue Fes Japan 2024参加レポート

出典元: qiita.com

皆様こんにちは。株式会社Schoo（以下、Schoo）でフロントエンドエンジニアをしております @okuto_oyama です。 今回は、10月19日に開催されたVue Fes Japan 2024の参加レポートをお届けします。

Vue Fes Japanとは

Vue Fes JapanはVue.js日本ユーザーグループが主催する日本最大級のVueエコシステムにまつわるカンファレンスです。Vue・ViteクリエイターでもあるEvan Youをはじめ、VueエコシステムのOSSメンテナやコントリビューターも参加し、各技術の最新動向を知ることができます。

2018年に初開催、その後台風やコロナ禍で中止されるも、2022年にオンラインカンファレンスとして復活、2023年は久しぶりのオフラインカンファレンスが開催し、今年もまたオフラインで開催されました。

当初はVue.jsやNuxt開発者のためのカンファレンスでしたが、ViteやVolarの登場から徐々にVue.js・Nuxtだけに閉じない様々な発表が増えおり、より間口の広がったフロントエンドのカンファレンスになってきております。

気になったセッションの紹介・感想

今回のVue Fes Japan 2024での発表は35件ほどあり、どれを聴くか非常に悩ましかったです。その中で私が興味を持って聴いた発表についてと感想を紹介していきます。

キーノート

毎年恒例となっているEvan Youによる基調講演からスタートしました。

前半はVue.jsのこれまでの歴史を振り返りつつ最近リリースされたVue 3.5の紹介やこれから改善予定についてを語ってくれました。3.5からは個人的待望だったuseId()が実装されたのでEvanに感謝の気持ちで聞いていました。

後半はViteにまつわる今後の技術戦略（OxC、Rolldown）や、設立した企業のVoidZeroについてを発表してくれました。Viteが様々なフレームワークなどで活用されているエコシステムの凄さを感じつつ、更なる技術的進化が語られておりワクワクさせられました。

ちなみにVue.jsは今年で登場して10周年になるのですが、私がVue.jsに初めて触れたのが2016年からなのでそこから8年近くも経っているのだなぁ〜と思い出に浸っていました。

IT未経験者をVue.jsで開発できるITコンサルタントに育てあげる秘訣 - フューチャーの新人研修の取り組み

こちらはフューチャーアーキテクト株式会社さんのスポンサーセッションです。

新人研修の中でVue.jsを用いた開発ができるように組み込んでいるとのことでしたが、eslint-plugin-vueのメンテナでもある太田さん（ota-meshi）が教材の監修に関わっているとのことでした。

Schooでもフロントエンドアーキテクチャの選択肢としてVue.jsやNuxtを用いているので、今後の新卒エンジニアの研修教材にどう組み込むか検討しています。新卒研修でVue.jsやNuxtを組み込んでいる企業の方と意見交換できたらいいなとか考えていました。

Nuxtベースの「WXT」で開発用のChrome拡張を作成する

Chrome拡張を作るにあたり何かしらのボイラープレートとなるものは色々と存在しています。今回はNuxtのディレクトリ構成に似た「WXT」でChrome拡張を作成したという内容を発表してくれました。

Manifestファイルを自動生成してくれたり、開発時には拡張機能を取り込んだブラウザが立ち上がりホットリロードして機能検証できるなど、開発者体験が良さそうに思いました。モジュールを入れる必要はありますが、Vue.jsやReact、Svelte、SolidJSを用いたUI開発もできるとのことです。

同期する都市のキャンバス：Vue.jsによる大規模メディアインスタレーションの舞台裏

セッションやLTのおおよそはVueエコシステムの話やシステム開発・Web開発の話だったのですが、それとは違う毛色のVue.js活用事例についての発表でした。

group_inouとAC部のミュージックビデオ作品『HAPPENING』のWebアプリでもVue.jsが使われていた話もあり、映像とVue.jsは親和性があるのかなと思い、興味をそそられました。

発表では渋谷サクラステージでのデジタルサイネージにはNuxtが使われているという衝撃の事実を知ることができました（技術解説記事）。自分にとっては、複雑なGUIを作るためにNuxtを活用するイメージがまったくできていなかったので、ここまで実現できるのかと驚きました。色の合成についてもCSSで行っているということでWeb技術をフル活用されていたことが嬉しかったです。

ちなみに渋谷サクラステージはSchoo本社からも近い場所にあるので、出社した際はデジタルサイネージがどうなっているかを覗きに行ってみようと思います（デジタルサイネージのイメージ動画URL）。

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

SvelteのコアチームメンバーでもあるbaseballyamaさんによるVue 3とSvelte 5、そしてVue Vapor Modeのそれぞれのランタイムを比較した発表です。個人ではSvelteを書いたことがあるのと、コンパイラとして魅力を感じているOSSだったので、Vue.jsとSvelteとでどのようにランタイムが違うのか気になっていました。

ReactやVue.jsでは仮想DOMを用いていますが、Svelteでは仮想DOMを持たないランタイムを持っています。Vue Vapor Modeでも同様に仮想DOMを用いない手法を取り入れているため、どの部分が似ていてどの部分が違うのかを簡略化されたコードで説明してくれました。

それぞれのランタイムについて詳細に見たことがなかったため、今回の発表でSvelteとVue Vapor Modeのそれが、非常に近しいものであることをざっくり理解できました。

ちなみに同日夜よりSvelteにまつわるカンファレンスのSvelte Summit Fall 2024が開催され、Svelte 5の正式リリースが発表されていました。新たに搭載されたRune APIもVue.jsの書き方と近しくなってきたと感じるので、いつかプロダクションで導入してみたいなぁという気持ちがあります。

次世代フロントエンドクロストーク

Vue Fes Japan 2024のステージスクリーンに『次世代フロントエンドクロストーク』の情報が表示されている。登壇者にはEvan You、Sosuke Suzuki、Boshen Chen、Kia King Ishii、太田 洋介、Unvalleyが含まれている。

Evan You、OxCクリエイターのBoshen Chen、ESLint Communityコアチームの太田 洋介さん、PrettierメンテナのSosuke Suzukiさん、Biomeコアコントリビューターのunvalleyさんらが集まりフロントエンドツールのこれからについてを語るパネルディスカッションがありました。このメンバーが一度に揃うことはまず無いのでかなり豪華な対談となりました。

もともとJavaScriptはWebブラウザで使われる言語でしたが、サーバーサイドJSが生まれ、UIライブラリ・フレームワークが登場し、そこから複数のフロントエンドツールが生まれてきています。徐々に複雑なアプリケーションや要件が生まれるようになって、JavaScriptだけで解決するには限界が生まれてきています。そんな中、フロントエンドツールを動かすための言語にRustが選択されてきています（ちなみにesbuildはGo言語です）。

フロントエンドツールのRust化が進む中で、参入障壁の難易度やエコシステムそのものがどうなっていくかは個人的にも懸念していましたが、Rollupプラグインの後方互換や有名なプラグインはコアとして取り込んでいくなど、不安に思っていた部分に対する回答が聞けました。またVoidZeroの今後の取組みとしてASTの標準化や共通化についても話しており、今後どのような動きが出てくるのかも気になりました。

登壇されたSosuke Suzukiさんのブログ記事でも語られていましたが、このパネルディスカッションは幅広い聴衆に伝わるような話で展開されていたため、自分も若干の物足りなさがありました。欲を言えば次世代Webカンファレンスのような聴者おいてけぼりにしてしまう議論も聴いてみたいなと感じてしまいました。

Deep dive into Nuxt Server Components

フロントエンドの文脈で「Server Components」というと、Reactの印象が強いかもしれません。実はNuxtにも「Nuxt Server Components」というものが存在します。今回はその内容についてと実際に最小単位で実装する場合にどのような形となるのかを解説してくれました。

仕組みの解説で必要な構成要素を説明してくれたのですが、その中で個人的な驚きだったのが、Teleportを扱っていたことです。モーダルダイアログなどの表示などでDOM階層の外側に移動させる使い方だと思っていたのですが、SSRでのハイドレーションミスマッチを防ぐ（＝クライアントとサーバーとでDOM構造を一致させる）ために用いられることは知りませんでした。

まだExperimentalな機能ではありますが、クライアントのバンドルサイズを減らしたりクライアントサイドに情報を残したくないときに活用していけるといいなと思いました。

Vue.jsコミュニティにようこそ！

Vueエコシステムのコミュニティで活動しているメンバーたちによる、どのようにコミュニティに参加し貢献できるかについてのパネルディスカッションがありました。私は途中から参加しましたが、立ち見が発生するほどの満員で大盛況でした。

多くの参加者が座ってスクリーンを見つめており、前方には登壇者がパネルディスカッションを行っている。スクリーンには『Vueコミュニティの課題と未来のビジョン』といった内容の発表スライドが表示されている。

セッション内ではchibivueという学習コンテンツ向けのDiscordサーバー（現在はchibivueに閉じず様々なコンテンツを扱っています）の紹介がありました。そこから一気に参加者が増えてサーバー内でアラートがでるほどの人気ぶりでした。

コミュニティに参加・貢献するということ何をもってして証明されるか明確な基準はありません。Vue Fes Japanに参加することだけでもそうかもしれませんし、Vueエコシステムを活用して開発してみることだったり、この参加レポートのような感想記事を書くこともその1つかもしれません。

Vue.jsのコミュニティーガイドには「あなたができること」という項目があり詳細にどのようなことができるかの紹介が載っています。貢献してみたい人は自分ができそうなことから始めてみると良いかもしれません。

ちなみに私が始めてVue.js関連で貢献をしたものはドキュメントの日本語翻訳にまつわるものでした。

参加したSchooエンジニアの感想

Schooからは私を含めたエンジニア3名が参加してきました（うち2名は個人スポンサーもさせていただいております）。それぞれが気になるセッションへ参加してきて刺激をもらってくることができました。参加したエンジニアによるVue Fes Japanの感想についても掲載させていただきます。

Vue Fes Japan 2024を終えて

午前からはじまったカンファレンスでしたが夜のアフターパーティが終わるまであっという間に過ぎたと感じるくらい濃密な時間となりました。直接聴けなかった発表がいくつもあったのでアーカイブ動画が公開されるのを心待ちにしております。

全セッション終了後に行われたアフターパーティでは、私と同じくVue 1系から関わっていた人たちと会えたり、過去在籍していた企業の同僚、chibivue関連で新しく繋がった方たちともご挨拶ができました。海外からの参加者も含め、幅広い多様な層が参加していることで、Vue.jsが誕生してから続くコミュニティというものの歴史の長さを感じることができました。

SchooでもVue.jsやNuxtをプロダクト開発に活用させてもらっています。引き続きVueエコシステムを活用しつつ、そこから得られた知見を通じて、コミュニティやOSSへ貢献をしていければと思っています。

黒のクリエイティブウォールにカラフルなペンで会社ロゴや個人の思いなどが所狭しと描かれている

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップへ戻る