Vue Fes Japan 2024は、日本で最大級のVue.js関連イベントです。開発者やデザイナー、技術リーダーたちが一堂に会し、最新の技術動向や実践的なノウハウを共有する場となっています。今年のイベントでは、Vue.jsの創始者であるEvan You氏をはじめ、世界中から多くの著名なスピーカーが登壇予定です。
イベントは、基調講演、技術セッション、ハンズオン、ライトニングトークなど、多彩なプログラムで構成されています。特に、Vue.jsやNuxt.jsを使ったフロントエンド開発の最新技術や、コミュニティのベストプラクティスが紹介される予定です。また、ネットワーキングの場として、アフターパーティも開催されます。
Vue Fes Japan 2024 イベント概要
| イベント名 | Vue Fes Japan 2024 |
|---|---|
| 開催日時 | 2024年10月19日（土） |
| イベントURL | |
| 参加チケット |
*1：早割は9月8日（日）24:00までとなります。 チケット詳細を見る |
| ハイライト |
|
| お問い合わせ | 詳細やチケット購入については、公式ウェブサイトをご覧ください。 |
Vue Fes Japan 2024 イベントタイムテーブル
※2024年9月1日時点の情報です。詳しくは公式ウェブサイトをご覧ください。
メドピアトラック
09:30~18:00
メインセッション
-
09:30~10:30
開場・受付
-
10:30~10:40
オープニング
川口 和也
-
- DAY1
- 10:40~11:20
メドピアトラック
キーノート
Vue.jsの創始者Evan Youによるキーノートスピーチ
登壇
Creator of Vue / Vite
Evan YouEvan is an independent open source developer and is the creator / project lead of Vue and Vite. -
11:20~11:35
プラチナスポンサーセッション
-
11:35~11:50
プラチナスポンサーセッション
-
11:50~12:05
プラチナスポンサーセッション
-
12:05~13:10
ランチタイム
-
- メドピアトラック
- 13:10~13:40
スピーカー
Oxc - The JavaScript Oxidation Compiler
Oxc is adopted as the compiler for Rolldown and will eventually be used in Vite. This talk will present a walkthrough of the Oxc project, how a focus on performance engineering resulted in the fast JavaScript compiler written in Rust, and also how you can participate in this project.
登壇
Creator of Oxc
Boshen ChenI am the creator of Oxc, a collection of JavaScript tools written in Rust. I enjoy working on Rust, performance engineering and infrastructure related things. -
13:40~13:55
休憩
-
- メドピアトラック
- 13:55~14:25
スピーカー
TBD
Pooya Parsaによるセッション（詳細未定）
登壇
Creator of Nitro and UnJS, Nuxt core team
Pooya ParsaI have been doing open source since 2014 with dream of making other developers life better and give them more freedom of choices. -
14:25~14:40
休憩
-
- メドピアトラック
- 14:40~15:10
スピーカー
Gems of Nuxt: 8 Features Every Nuxt Developer Should Know!
Nuxt開発者が知っておくべき8つの重要な機能について
Nuxt 4 is out and it's packed with changes! While we won't have a close look at what happened in the major release, we will discover 8 less-obvious features and patterns which can help you to write better Nuxt applications. No matter if:
- Less boilerplate
- More expressive code
- Unlocked potentials
- Or simply less bugs
Any of the gems will tick one of the boxes. Let's take a look at them during the talk!
登壇
Creator of Nitro and UnJS, Nuxt core team
Web Engineering Consultant
Alexander Lichter -
15:10~15:25
休憩
-
- メドピアトラック
- 15:25~15:55
スピーカー
Async State Management with Vue Router
Vue Routerを使用した非同期状態管理について
TBD
登壇
Independent
Vue.js Core team
Eduardo San Martin Morote -
15:55~16:10
休憩
-
- メドピアトラック
- 16:10~16:40
スピーカー
TBD
Kevin Dengによるセッション（詳細未定）
登壇
Vue Core Team Member / Creator of Vue Vapor
Kevin DengKevin is an open-source contributor. He is currently dedicated to developing Vue Vapor and strives to make the Vue, Vite, and their related communities more vibrant. -
16:40~16:55
休憩
-
- メドピアトラック
- 16:55~17:25
スピーカー
Anthony's Road to Open Source - Yak Shaving
Anthony Fuのオープンソース開発への道のりについて
The ways of getting great ideas and to build better and successful open source projects.
登壇
Vue/Vite/Nuxt Core Team Member
Anthony FuAnthony is a fanatical open sourceror. DX and ecosystem for Vue, Vite and Nuxt. -
17:25~17:40
転換
-
17:40~18:00
クロージング
-
18:00~19:30
アフターパーティー
supported by GMOインターネットグループ
MNTSQトラック
10:30~17:25
MNTSQが全ての合意をフェアにするぞトラック
-
10:30~11:50
サテライト
-
12:05~
ランチタイム
-
12:20~12:50
スペシャルランチセッション
-
13:00~
ランチタイム
-
- MNTSQトラック
- 13:10~13:40
スピーカー
同期する都市のキャンバス：Vue.jsによる大規模メディアインスタレーションの舞台裏
Vue.js/Nuxt.js を中心としたWebフロントエンド技術を活用して、大規模メディアサイネージやインスタレーションアートの世界でのインタラクティブでダイナミックな表現の可能性を、実際のプロジェクト事例を交えて紹介します。さらに、複数デバイスの同期やクラウド技術の活用、自作ハードウェアやIoTとの連携など、次世代のメディアインスタレーションの展望についてもご紹介します。
登壇
Rhizomatiks
Visual Artist / Programmer
田中 陽TBD -
13:40~13:55
休憩
-
- MNTSQトラック
- 13:55~14:25
スピーカー
Vue 3 と Svelte 5 のランタイムを比較する 〜技術を一段深く理解する〜
私はSvelteのコアチームメンバーであり、仕事ではVueおよびSvelteを利用したプロジェクトをリードしています。
この発表では、私の経験と知識を活かし、Vue 3とSvelte 5のランタイムを比較します。 単にVue 3のランタイムを解説するだけでなく、他のフレームワークと比較することで、より深い理解を促進することを目指します。
具体的には、以下の観点で比較します。（※変更の可能性あり）
- Hello World（全体像）
- コンポーネントの呼び出し
- リアクティビティ
登壇
株式会社フライル / Flyle.inc
ソフトウェアエンジニア / Software Engineer
山下 裕一朗TBD -
14:25~14:40
休憩
-
- DAY1
- 14:40~15:40
MNTSQトラック
次世代フロントエンドクロストーク
現在、Rust で実装された JavaScript エコシステムが増えているのは知っていますか？例えば、Oxc、Biome、Turbo、Rspack、SWC などで Rust が採用されています。そして、Vue.js 関連のエコシステムにおいても Vite で使用されている Rollup を Rust で再実装するプロジェクトが進行中です。
これからのフロントエンドにおいて、Rust は主流となるのでしょうか？そして、現存する JavaScript 製のエコシステムはいずれ Rust で再実装されるのでしょうか？
今回、 JavaScript 関連の OSS で活動されている方々をお招きし、海外ゲストスピーカーの Evan You 氏、Boshen Chen 氏とともに、今後の JavaScript エコシステムがどうなっていくのかについて、クロストークをします！
登壇
Creator of Vue / Vite
Evan YouCreator of Oxc
Boshen Chen
フューチャー株式会社、ESLint
Community コアチーム
Core Technology Group シニアアーキテクト
太田 洋介
ユビー株式会社、Prettier
プロダクト開発エンジニア
Sosuke Suzuki
Biome Core Contributor
unvalley
Global Brain
Vue.js Core Team Member
Kia King Ishii -
15:40~15:50
休憩
-
- MNTSQトラック
- 15:50~16:20
スピーカー
Demystifying Vite Internals
Viteがリリースされてから4年が経過し、Vueアプリケーションの開発にとどまらずモダンな開発環境で多く利用されています。しかし、Viteがどのように実現されているかを体系的に解説した資料はほとんどなく、esbuildtとRollupが内部で使用されているといった情報だけを知っている方も多いと思います。
このセッションでは、実際の現場で役立つViteのチップスや使い方ではなく、Viteがどのように動作しているかを可能な限りゼロベースで詳細に解説します。
このセッションを通して、より多くの方がViteの内部実装に関するより深い理解をもったうえでViteを利用できるようになることを目指します。
以下、話す内容を列挙します（実際には、30分におさまるようにピックアップします）。
- なぜVite ConfigはTypeScriptで記述できるのか（Vite Config の処理の説明）
- なぜRollupを使用していない開発環境でもRollupプラグインを利用できるのか（プラグインコンテナの説明）
- 開発サーバーで何が起こっているのか（リクエストがどのように処理いるのかの説明）
- HMRがどのように実現されているのか
- その他、モジュールグラフなどの内部実装の解説
登壇
Software Engineer / UnJS core team
Nozomu Ikuta -
16:20~16:40
休憩
-
- MNTSQトラック
- 16:30~17:00
スピーカー
Deep dive into Nuxt Server Components
Nuxt では個々のコンポーネントをサーバーサイドでレンダリングすることができる Nuxt Server Components を提供しています。
このセッションでは Nuxt Server Components 自体を最小限の機能で実装して、どのような仕組みで作られているかをお話しします。
このセッションを通じて Nuxt Server Components の機能と利点を理解し、自身のプロジェクトにどのように適用できるかを知ることができます。
登壇
STORES株式会社
ソフトウェアエンジニア
wattanx -
16:55~17:40
転換
-
18:00~19:30
アフターパーティー
supported by GMOインターネットグループ
kickflowトラック
13:10~17:25
kickflowセッション
-
12:05~12:20
ランチタイム
-
12:20~12:50
ランチセッション
-
13:00~13:10
ランチタイム
-
- kickflowトラック
- 13:10~13:40
スピーカー
普通のエンジニアが頑張って30万行のNuxt3バージョンアップした話
有名なエンジニアでもOSSコントリビューターでもなんでもない、ごく普通のエンジニアが頑張って30万行のNuxt2アプリケーションをNuxt3にバージョンアップした話です。
バージョンアップやマイグレーションは大変で、悲観的な気持ちになりがちですが、自分たちのサービスや運用フローを見直す良い機会となり、利用しているOSSの理解も深められます。
破壊的変更が多かったVue3/Nuxt3のバージョンアップでしたが、だからこそ非常に多くの学びがあり、サービス自体の改善もできました。
この経験を通じて考えたこと、工夫したこと、そしてどのように成長できたかをお話しします。
登壇
株式会社ヤプリ
エンジニアリングマネージャー
こん -
13:40~13:55
休憩
-
- kickflowトラック
- 13:55~14:25
スピーカー
Vaporモードを大規模サービスに最速導入して学びを共有する
VVaporモードは仮想DOMを使わないVueの新しいコンパイル戦略です。
従来の方法では変更前後の仮想DOMツリーの差分によって実DOMを更新しますが、Vaporモードでは実DOMを直接更新するため、描画速度の向上、メモリ節約、バンドルサイズの削減が期待されます。現在開発中の機能ですが、すでにPlaygroundが公開されており、実装済み箇所については実験可能な段階です。
弊社のTeachme Bizは、573個のコンポーネントを持つ大規模Vueアプリケーションです。
特に、主要画面のマニュアル編集画面ではDOM要素数が4000件以上に達することがあり、仮想DOM比較によるオーバーヘッドは比較的大きいと考えられます。
また、現在も機能追加が活発に行われていることから、Vaporモードによるパフォーマンスへの恩恵はぜひとも受けたいと考えています。
本セッションでは、大規模Vueアプリケーションを題材としたVaporモードについて話します。
公開されているPlaygroundや開発中のリポジトリから、大規模VueアプリケーションでのVaporモードのメリット・デメリットを考察し、気づきを共有します。
また、今後のVaporモードの進捗次第で、実際にサービスに導入できるのか等の検証も想定しています。
登壇
株式会社スタディスト
Webアプリケーションエンジニア
Kazuki Shimamoto -
14:25~14:40
休憩
-
- kickflowトラック
- 14:40~15:10
スピーカー
Vue.js、Nuxtの機能を使い、大量のコピペコードをリファクタリングする
私が開発をしている一休.com/Yahoo!トラベルはここ数年間、開発のスピードと質の向上のために、もともとVB.NETとjQuery、素のJavaScriptで書かれたコードをGoとVue.js、Nuxtで書き直しています。多くの既存コードが新しいコードになり、開発のスピードと質は大幅に向上しました。
しかし、フロントエンドではVue.js、Nuxtのコードを実装する中で、様々な要因により大量のコピペコードが生まれてしまいました。今はこのコピペコードを解消するためにVue.js、Nuxtの機能を使い、適切に抽象化することで設計の改善を行っています。
なぜコピペコードが生まれてしまったのか、どのようにコンポーネント、コンポーザブルなどを設計してコードを改善してきたのか、具体的な事例をお話しするとともに、皆さんの開発に役立つ設計の知恵、プラクティスをお話しします。
登壇
株式会社一休
WEBエンジニア
いがにん -
15:10~15:25
休憩
-
- kickflowトラック
- 15:25~15:55
スピーカー
2万ページのSSG運用における工夫と注意点
SSG（静的サイト生成）はページの表示速度やセキュリティ向上、サーバー選定の柔軟さ、キャッシュ制御がシンプルなどのメリットがあります。しかし、大量のページを生成する際にはビルド時間が長くなるという課題があります。
NuxtとmicroCMSで3千ページのコンテンツを管理するサイトの初期構築でビルド時間が1時間以上かかる問題が発生し、コード・設計の見直しで20分程度まで短縮した経験を共有します。現在2万ページのビルドを25分程度で運用しており、SSGでの運用における工夫や注意点、最低限やっておくべき対策について解説します。
登壇
株式会社TAM
フロントエンドエンジニア
まぁし -
15:55~16:10
休憩
-
- kickflowトラック
- 16:10~16:40
スピーカー
Vue3の一歩踏み込んだパフォーマンスチューニング 2024
弊社ではユーザー向け機能、及び業務支援システムをVue/Nuxtで構築しており、昨年12月にはVue/Nuxt3へのマイグレーションを行いました。
日々の開発でVue2時代とは大量データの扱いやパフォーマンスチューニングの勘所が変化してきていると感じており、Vue3.4のリリースでもパフォーマンスの大幅な改善について触れられています。
そこで現在のVue、及びVue周辺ライブラリでのパフォーマンス改善がどれだけ行えるのか（3.4バージョンアップによる改善も含む）についてお話いたします。
単なるチューニング方法だけでなく、これまで行われていたが今は不要となったチューニング方法など、これまでの弊社での取り組みを踏まえてお話できればと思います。
登壇
SBI日本少額短期保険株式会社
システムエンジニア
Hal -
16:40~17:25
休憩
-
- MNTSQトラック
- 16:55~17:25
スピーカー
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト
NuxtおよびUnJS、Nuxtエコシステムは日々進化を続けておりその進化は留まるところを知りません。
最新Nuxt v3.12ではNuxt4のリリース準備やNuxt Scriptsのパブリックプレビューが発表されています。また、Nitro v3のリリースも待ち遠しいです。
そんなNuxtにはNuxt UI、Nuxt Image、NuxtHub、Nuxt Scriptsなどの公式モジュールをはじめ、Nuxt I18n、Nuxt TailwindCSS、Nuxt Storybookなど多くのモジュールが存在しています。
モジュールはそれぞれの領域にフォーカスして作成されており、ユーザーの用途に合わせて組み合わせて使うことが可能です。
弊社コーポレートサイトではNuxtをメイン技術として据え、UI libraryはNuxt UI Pro、DeployはCloudflare + NuxtHub、SEOはNuxt SEO、Google Analytics・Google Map対応はNuxt Scriptsをそれぞれ採用しています。
本セッションでは「Nuxtの導入を悩んでいる」「これからNuxtをメインでサイトを構築したいがどんなエコシステムを選んで良いか分からない」というNuxtユーザーに向けて弊社事例をご紹介致します。
また、本セッション内では「スター数が多く、よく利用されているモジュールたち」にもフォースカスいたします。「Nuxtのモジュール群を網羅的に知っておきたい」というNuxtユーザーにとっても有用な登壇となることでしょう。
登壇
株式会社FeaSion
エンジニア
GANGAN -
17:25~18:00
クローズ
Vueトラック
12:50~17:40
Vueワークショップ
-
14:50~15:10
休憩
-
- Vueトラック
- 16:00~16:30
スピーカー
Trusted Types APIとVue.js
このLTでは、Webセキュリティの新しい標準であるTrusted Types APIと、Vue.jsのサポート状況についての紹介をします。もっとも一般的なセキュリティ脆弱性であるXSSを防ぐためにはセキュアなコーディングを意識する必要があり、特にTrusted Types APIはDOMベースXSSに対する強力なツールです。AngularやLitでは既にサポートされているTrusted Types APIですが、現在のVue.jsの対応状況などについて紹介していきます。
登壇
LINEヤフー株式会社
フロントエンドエンジニア
大橋一真
v-modelの歩みを振り返る
Vue.jsのv-modelは、データバインディングを簡素化するために開発され、バージョンアップごとに進化を遂げてきました。本LTでは、以下の観点でv-modelの歴史を振り返ります。
- ①Vue 1.0時代: 初期のv-modelのコンセプトと使い方。
- ➁Vue 2.x: 機能の拡充と使用方法の詳細。
- ③Vue 3.x: 最新バージョンでの改良点と変更点。
- ④実用例: プロジェクトでの実践的な活用方法。
対象者: 初心者から中級者まで幅広く対応でき、実用的かつ役立つ情報を提供します。 特に、Vue.jsの基本から最新のトレンドまで学びたい開発者に最適です。
登壇
弁護士ドットコム株式会社
クラウドサイン フロントエンドエンジニア
ツノ
Vue SFCのtemplateでTypeScriptの型を活用しよう
Vue SFCのtemplateは一見scriptとは分離されているように見えますが、Vue Language Toolsの力を借りることによってtemplate上で型のnarrowingをしたり、型推論したりすることができます。さらに、Volar Labs https://volarjs.dev/core-concepts/volar-labs/ というVSCode Extensionを使うことでどのように型が解釈されているかを確認することもできます。
そこで、上記の特徴を使って、template上で条件分岐の網羅性をチェックする方法や、defineSlotsマクロを通じてgenericなslotを定義する方法などを共有しつつ、Vue SFCのtemplate上でどのように型が解釈されているかを探ります。
登壇
ストックマーク株式会社
チームリード
tsukkee
Nuxtで段階的レンダリングを活用してUXを最大化するためのTips
Nuxtで段階的レンダリングを活用して、ユーザー体験（UX）を向上させる具体的な手法と事例を紹介します。UI Stackの概念を背景として、どのようにして効果的にユーザーインタフェースを設計し、段階的にコンテンツをレンダリングすることでページのパフォーマンスとインタラクティビティを向上できるか。についての事例を３つほど実装も交えて紹介します。
登壇
株式会社GROWTH VERSE
ソフトウェアエンジニア
Rachel -
15:50~16:00
休憩
-
- Vueトラック
- 16:40~17:40
スピーカー
Vitest Browser Mode への期待
現代のフロントエンド開発において、コンポーネントのテストは非常に重要です。しかし、テストを実行するためにブラウザ機能をエミュレートする jsdom や happy-dom などのライブラリには限界があります。そんな中、Vitest の Browser Mode はこれらの課題を解決する可能性を持っています。
私は Vitest + happy-dom の構成でコンポーネントのテストを書く機会がありました。その中で happy-dom の足りていない機能やバグ (ブラウザとの挙動の差分) を見つけ、issue を立てたりプルリクを作成したりしました。
jsdom や happy-dom は大変素晴らしい OSS で、フロントエンドのテストには必要不可欠なものです。しかしこの経験を通じてブラウザの機能のエミュレートを通じてテストを実装するのに限界があるのでは？と考えるようになりました。
具体的には、現代のブラウザは大量の機能や仕様を持ち大変複雑なことが知られています。さらに年々新しい Web API は追加され続けます。エミュレータの実装であってもこれらをカバーし毎年の Web のアップデートに対応するのはコストが大きい作業です。
この問題を解決する方法として Vitest Browser Mode に私は期待をしています。現在は Experimental な機能ですが、本物のブラウザを使用するので既存の機能と挙動が異なることや、新しい API がまだ実装されていない、ということがなくなります。これによりテストを書いている開発者はよりコンポーネントの実装やテストにフォーカスすることができます。
このライトニングトークでは、ブラウザのエミュレートの限界の実例を紹介し、Vitest Browser Mode の仕組みやその期待を参加者に共有します。
登壇
LINEヤフー株式会社
フロントエンドエンジニア
odan
Protocol BuffersとNuxt3で開発生産性を上げるためのスキーマファースト開発の紹介
スキーマファーストの開発スタイルでは、バックエンドとフロントエンドでやりとりするデータのインターフェースを定義したうえで、それぞれのAPI部分の実装をテンプレートから生成し、開発を始めます。このアプローチによって開発することで、バックエンドのAPIの開発完了を待ってから、フロントエンドの開発を始めていたのを、より早い段階から始めることができるため、開発生産性が向上します。具体的にはインターフェースを先に定義していてデータの型が分かっているため、モックサーバーを用意することができたり、API周辺の共通するロジックをテンプレートに定義することで、API実装の異なるロジックだけを実装すればよくなったりします。このLTではProtocol BuffersとNuxt3でスキーマファースト開発をするためのやりかたを紹介します。
登壇
株式会社メルカリ
フロントエンドエンジニア
tokuda109
Nuxt × Vue Router の力を最大限を引き出す機能を紹介 ～Typed Pages, Nested Routes, Routes' Matching Syntax～
Nuxt 3 のルーティングライブラリとして採用されている Vue Router には、普通に使っているだけでは気づきにくい強力な機能が多く備わっています。
Nuxt とは別で開発されていること、ドキュメントが英語しかないことなどから、Nuxt の公式ドキュメントを隈なく見ている人でも意外と知らない機能があるかもしれません。
ルーティングに型推論を持ち込む Typed Pages、レイアウトファイルを階層管理できる Nested Routes、ファイルベースに縛られない柔軟なルート管理を可能にする Routes' Matching Syntax など、Vue Router を最大限活用するための強力な機能を紹介します。
※Typed Pages については以下の記事の内容をベースに話す予定です。
https://zenn.dev/ytr0903/articles/8444a0a2d1bf22登壇
株式会社アンドパッド
開発部 テックリード
Yutaro Koizumi
Vue.jsプロジェクトに出てくるeslintと仲良くなる
"eslint"
"eslint-plugin-vue"
"@vue/cli-plugin-eslint"
"@vue/eslint-config-typescript"
"@typescript-eslint/eslint-plugin"「全部同じじゃないですか！？」
Vue.jsのプロジェクトを見ると、様々なeslintが出てきて混乱しませんか？ 普段は意識しなくても、package versionを更新する際の依存関係に戸惑った人はいると思います。 このLTではeslintへの苦手意識が薄れるように、eslintと各pluginについてお話します。
登壇
エムスリー株式会社
ソフトウェアエンジニア
satoki -
16:30~16:40
休憩
-
- Vueトラック
- 16:40~17:40
Vue.jsコミュニティにようこそ！
Vue.js の進化には、開発者だけでなく Vue.js コミュニティが重要な役割を果たしています。コミュニティに興味を持っても、どんな活動があるのか、どんなことから始めればいいのか分からない、といった声をしばしば聞きます。
このパネルディスカッションでは、Vue.js および関連するエコシステムのコミュニティで活動しているメンバーをお招きし、その参加方法や活動内容について経験談を交えながらご紹介します。
登壇
株式会社プレイド
Vue.jsコアチームメンバー
kazu_ponSoftware Engineer / UnJS core team
Nozomu Ikuta
株式会社メイツ
Vue.jsメンバー
ubugeeei
Vue.js, Vite 日本語
ドキュメントメンテナー
jay-es
株式会社LIXIL
アプリケーションエキスパート
からころ / karacoro
