こんにちは。
コワーキングスペース茅場町 Co-Edo の田中弘治です。

ここ数年、土日にCo-Edo以外で行われるイベントの参加はできていなかったのですが、ことしは参加できることになり、念願の Vue Fes Japan に参加してきました。

https://vuefes.jp/2024/

ちなみに昨年は個人スポンサーとしての費用は払いつつ、当日の参加チケットを購入しないという（おそらく僕だけであろう）形で応援していました。

そんなこんなで、はじめて参加できることになった Vue Fes Japan 2024
たっぷり楽しんできましたので、その一部をレポートいたします。

そもそも Vue Fes Japan とは

Vue Fes Japan は、日本最大級の Vue.js カンファレンスです。
昨年、コロナ禍を経て5年ぶりにオフライン開催され、今年は会場を大手町プレイスホール＆カンファレンスに移し、より大きな規模での開催となっています。

参加人数は昨年の600名弱から、750名以上に増えているとのこと。海外からの参加者も1割以上に達しているとの話もあり、Vue.js および Vite などを中心としたエコシステム全体の盛り上がりをひしひし感じます。

ことしも個人スポンサーとして参加しました

昨年に引き続き、個人スポンサーとしての支援を行いました。
普段から Vue.js を活用して開発をしていることもあり、何かしらの支援をしたいと常々思っています。
このような大規模なカンファレンスとなると、その準備から当日・それ以降も含め、多大な労力およびコストがかかっていることは間違いありません。
すこしでも力になれたらと思い、ことしも個人スポンサーチケットを購入しました。

個人スポンサー特典のひとつに、会場での特別な席の用意があります。
昨年は会場に行っていないのでどのような席か分かってませんでしたが、ふたをあけると、大きな会場内のステージの真ん前でした。
その距離1ｍ程度。砂かぶり席ですね！

個人スポンサー特典の席
至近距離！

どんなに混雑するセッションでも、必ず座れますので、ぜひ次回は個人スポンサーチケットの購入を検討してみてください。

オープニング

Vue Fes 恒例のむちゃくちゃかっこいいオープニングムービーで始まりました。

主催の@kazu_pon氏による英語の挨拶でスタート。
この人数を前に英語でスピーチするなんて（100人程度でもど緊張した僕には）尊敬と期待の入り混じった気持ちで聞いていました。

@kazu_ponによるオープニングトーク

そして、そこでイベントのスポンサー企業のみならず、個人スポンサーの紹介も！
とても嬉しい気持ちになる一方で、時間のあるかぎりスポンサーブースもまわり、支援している企業のことも知っておきたいと思いました。

Evan You による Keynote

最初のセッションは、Vue.js の作者である Evan You による Keynote。
ことしは10月1日に発表した次世代ツールチェーン VoidZero の発表も含まれることが予想され、いつにもまして期待が高まります。

登壇準備中の Evan You

予想通り、後半で VoidZero の発表がありました。
次世代ツールチェーンのステータスも含め、今後の展望についても語られました。
この（Linter や Testing tool など、統一された）ツールチェーンの完成は、フロントエンド開発の歴史における重要な節目となることは間違いありません。
VoidZero 発表記事のFAQにもあるとおり（Biomeなどほかのツールチェーンと違い）すでに多くのひとが日常的に使用している Vite がベースにあるからです。

V8の登場で JavaScript の実行環境が整ったように、VoidZero の登場でフロントエンド開発の環境が大きく変わっていくことを楽しみにしています。

（ViteConf 2024 のスライドですが、内容的には同じでしたので、いったんこちらを貼っておきます）

プラチナスポンサーセッション

プラチナスポンサーは下記の3社です。

弁護士ドットコム株式会社

フューチャーアーキテクト株式会社

Let me know
スライドのURLが分かったら追記します。

株式会社リンクアンドモチベーション

ランチタイムセッション

フロントエンドエンジニアのいない組織でVue.jsを導入するまで

Let me know
スライドのURLが分かったら追記します。

開発組織にフロントエンドエンジニアがいない状況というのはよく聞く話です。
それでも今日の開発というのは、フロントエンドの役割が大きくなっていることは間違いありません。
とくにデザイナーにとっては Vue.js のように HTML, CSS がひとつのコンポーネントにまとまっていることは扱いやすいことでしょう。

Oxc: Boshen Chen

VoidZero Inc. のメンバーでもある Boshen Chen 氏によるセッション。
Oxc は Rust で書かれた JavaScript tools です。
Vite(Rolldown) の下で Oxc が統一された挙動を提供することで、オーバーヘッドのない効率的なツールチェーンとなることでしょう。

興味深いのは、もともと Oxc は Boshen 氏が個人的に Rust の学習のためにはじめたプロジェクトであり、その後幅広く Linter や Resolver, Minifier などを含め開発することになっていくことです。
そのベースにある Parser は（同じ Rust で書かれた）swcやBiomeと比較しても3倍以上高速というベンチマーク結果があります。

VoidZero のツールチェーンは、まさに Oxc が中核にあることが大きな強みといえそうです。

UnJS: Pooya Parsa

Nitro を含め UnJS の開発を全体的にリードする Pooya Parsa 氏によるセッション。

UnJS は Serverless の時代と、Edge によるレンダリング、Workers の登場などを受けて、より幅広い環境で動作することを目指して生まれたライブラリ。
もはや数え切れないくらいのライブラリが存在します。

なんと、セッション中に開発を続けていた WebSocket を使用した共同編集アプリケーションのリポジトリを Public にしたうえで、デモアプリを公開してくれました。

unjs/crosswsというどのプラットフォームでも（高速に）動作する WebSocket サーバーを用い、Nuxt と tiptap で構築したもののようです。
実際にスライドに写された QRコードを読み取ったひとから、Googleドキュメントのような共同編集を行いました。
50名程度は同時に書き込んでいましたが、遅延することなく動作していました（Cloudflare の Durable Objects により動いているらしい）

y-crossws の Playground で確認できます。

Gems of Nuxt, Nuxt 開発者が知っておきたい8つの機能: Alexander Lichter

YouTube や Michael Thiessen 氏との PodCast DejaVue でもおなじみの Alexander Lichter 氏によるセッション。
Nuxt や Nuxt Scripts の開発も行っています。

もとより僕は彼の YouTube チャンネルで Nuxt 関連の知識をアップデートしています。
語り口も軽妙ですし、デモもわかりやすく、とても参考になっているのです。

そんな彼が日本にくる！ということでとても楽しみにしていたセッションのひとつ。

画面そのままの Alex さんが目の前にいました。

「〜〜使ったことありますか？」と会場に問いかけながら、Nuxt の機能や Tips を紹介していきます。
以前書いた記事『Nuxt 3・Nuxt 4 の useFetch() を完全に理解する（したい）』でも紹介した getCachedData の話も。
手を挙げたひとは少なかったようですが、僕はもちろん挙手。といってもこれを知ったのは Alex さんの動画を見たからですが（笑）
（記事では少しアレンジして実装しています）

ほかにも Nuxt Scripts や Nitro の cache など、普段 Nuxt を使っていてもなかなか活用しきれていない機能を紹介してくれました。

shared フォルダ
Nuxt Scripts
getCachedData
Caching + BFF with Nitro
OpenAPI (/_nitro/openapi)
Route Rules
OG Image Generation
nuxt dev のオプション

楽しみなのは shared フォルダ。
shared/utils, shared/types といった app も server も共通のファイルを配置するためのもの。そろそろ利用可能になるようです。

Async State Management with Vue Router: Eduardo San Martin Morote

Pinia や VueFire の開発者としてもおなじみの @posva 氏によるセッション。

データを取得してどうコンポーネントで扱うかというのを、ステップバイステップで解説してくれました。
Nuxt の useFetch の実装を見ているかのようで、なるほどベストプラクティスがどういうものかがわかります。

たとえば（Nuxt にもありますが） lazy: true のようなオプションで、データ取得を遅延させるような処理。
メインのコンテンツに付随した、関連情報の取得にはこのようなオプションが有効という話など。

いろいろ勉強になるなあ。
なんて思っていたら Pinia Colada という Pinia とともにデータ取得を扱うライブラリを紹介。
ほお。まったく知らなかったです。
ローディング状態やエラーハンドリングなど、データ取得時によくある処理を含んでいるので、簡潔に記述することができそうです。
Nuxt を使わず Vue.js を使っているプロジェクトでは、とくに重宝するのではないでしょうか。

ちなみに名前は「パイナップルジュース」からきている模様。
会場でステッカーもGETしました。

Vue Vapor: Kevin Deng

Vue Macros でもおなじみの Kevin Deng 氏によるセッション。
テーマはもちろん Vue Vapor です。

なぜ Vapor というのか名前の由来から Vue Vapor のアーキテクチャーまで、幅広く解説されていました。
React ではおなじみの UI = fn(state) を用いて、Vue の Virtual DOM と Vue Vapor の違いについても語られました。

Anthony's Road to Open Source - Yak Shaving: Anthony Fu

◯◯でおなじみの、の◯◯が多すぎてどれをピックアップしてよいかも迷ってしまう Anthony Fu 氏によるセッション。

エンジニア界隈でいう "Yak Shaving" という言葉の原典は、おそらくこの文章だと認識しています。
何かをしようとすると、そもそもその前に解決しなければならない問題が次々と現れることを指します。
そして原語では、手段と目的が入れ替わるという意味の、ネガティブな意味合いで用いられることが多いとのこと。ふむふむ、それは知りませんでした。

しかし Anthony は、この Yak Shaving のポジティブな面を紹介してくれました。
そしてその説明が、聴講者の（少なくとも僕の）心に大きく響くものでした。

個人的な開発が、オープンソースとなることの大切さ・オープンソースとすることの利点を、技術が動機を生みそしてコミュニティとともに広がっていく過程を、とてもわかりやすく語ってくれました。
多くの人が、これを聞いて、オープンソースに携わりたいと思ったことと思います。

また、ビジネスの観点からも語られました。
Shopify, Epic Games, Amazon, Slack など、大企業がもともと手掛けたビジネスとは異なる（大抵はその手前にある課題を解決するための）サービスを中心的なビジネスに移っていることも、Yak Shaving の観点で説明されます。

Vue.js や Vite を中心としたエコシステムは、そのほとんどがオープンソースなプロジェクトです。
普段それを感謝とともに活用させてもらっているわけですが、なるほど「オープンソースであることの価値」があり、僕達はそれゆえ惹かれているのだなと、改めて感じました。

非常に感銘を受けたセッションでした。感謝。

その他のセッション・LT等

セッションの合間に10分程度しか聞けなかったものを含め、上述のもの以外は残念ながら参加できませんでした。
今回の Vue Fes で登壇された方が共有していた資料をまとめました。順不同で紹介していきます。
（見つけ次第、随時追加していこうと思います。よろしければコメント欄などでぜひ教えてくださいませ）

Deep dive into Nuxt Server Components

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

Vitest Browser Mode への期待 / Vitest Browser Mode

v-modelの歩みを振り返る

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

普通のエンジニアが頑張って30万行のNuxt3移行した話 / Vue Fes Japan 2024 Nuxt3 version up

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

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

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

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

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

Demystifying Vite Internals

Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト

Nuxt × Vue Router の力を最大限に引き出す機能を紹介

Piniaの現状と今後

Trusted Types API と Vue.js

アフターパーティー

Vue Fes のもうひとつの楽しみは、ご存知アフターパーティーです。

ことしも GMO 社によるお寿司がありました。

お寿司スポンサーのお寿司

ほかにも Vue Cocktail Bash ということでオリジナルカクテルも提供されていました。
Vite, Rolldown, Vue.js, Pinia などにちなんだカクテルが用意されていました。
僕も Pinia をいただきましたが、見た目も楽しめるうえ、とても美味しいカクテルでした。

写真、撮り忘れた……

最後に

感想としては「最高」で終わってしまうのですが、かんたんに箇条書きで伝えたいことをまとめます。

なによりスタッフの皆様、素敵なカンファレンスを開催していただきありがとうございます
スポンサー企業のみなさまにも感謝。そしてぜひこれからも Vue.js を活用して事業を拡大していってください！（Vue.jsの開発案件がもっともっと増えてほしい）
登壇者の皆様、すばらしいセッションをありがとうございます。今年は直接聞けてよかった。（聞けなかったものもぜひ動画等公開されたら拝見します）
お会いできた方、ご挨拶できた方、ほんとうにありがとうございます。またお会いしましょう！
お会いできなかった方も何人もいて、個人的には心残りが……ほかのイベント等でお会いできることを楽しみにしています
ぜひ Vue.js のコミュニティ、ひろげていきたいですね
来年はちゃんとコントリビュートしていきたいと決意しました
日本のカンファレンスは参加費が（諸外国のそれと比較して）格安です。（本業に活用できることを考えれば）投資効率高い！
個人スポンサーもオトクなので来年もぜひスポンサーチケット購入するー

See you next year!

Vue Fes Japan 2024
Co-Edoの文字も書いてきた

Discussion