kickflow Tech Blog

株式会社kickflowのプロダクト開発本部によるブログ

Vue Fes Japan 2025 でフロントエンドの未来を感じてきた

Vue Fes Japan 2025 のクリエィティブボード。黒いボード一面に、カラフルな手書き文字やイラスト、企業ロゴ風の落書きがぎっしり描かれている。中央付近に大きく  Vue Fes Japan 2025  と書かれ、周囲には「I Love Vue」「NUXT」などのメッセージ、サイン、キャラクターの絵が散りばめられている。

プロダクト開発本部でエンジニアをしている秋山です。 入社して3か月ほどが経ち、今回が自分の初めてのテックブログの投稿になります。 これから投稿を増やしていきますので、今後ともよろしくお願いします!

さて、表題の Vue Fes Japan 2025 ですが、弊社は今回シルバースポンサーとして協賛しました。kickflow はフロントエンドが Nuxt 4 で構築されており、日々 Nuxt/Vue にはお世話になりっぱなしです。業務に新たな知見を得る機会としてはもちろん、コミュニティの貢献にもつながるという期待を込めて、この一大イベントに協賛できることを嬉しく感じています。

入社間もないタイミングで、EM の森本から「Vue Fes Japan 2025 に参加するか」と声をかけてもらいました。去年は都合が合わずに参加できなかったのですが、今年こそは参加したいと思っていたこともあり、まさに渡りに船ということで二つ返事で参加を決めました。

ちなみに kickflow にはカンファレンス参加補助制度があります。業務に活用ができる内容であれば、参加費用の補助に加えて業務時間としてイベントに参加できるという、エンジニアにはとても嬉しい制度です。さっそく活用させていただきました!

Vue Fes Japan について

vuefes.jp

もう説明不要かもしれませんが、Vue Fes Japan は 2018 年にスタートした日本最大級の Vue.js カンファレンスです。タイトル通り Vue.js を中心にしつつ、Nuxt の Nitro を始めたとした UnJS エコシステム、さらに Vue.js の作者 Evan You 氏が立ち上げた新会社 VoidZero による次世代 JavaScript ツールチェインまで、JavaScript コミュニティ全体にまで広がる最先端の情報を得られる一大イベントとなっています。

それでは、本題の参加レポートに入ります。

会場の雰囲気

会場ロビーに積み上げられたカラフルな立方体の装飾。側面に  Vue Fes Japan 2025  の文字や、渦を巻くマーブル模様の円グラフィックが描かれている。床は赤いカーペット、周囲は屋内の壁面と案内板。 会場入口に到着すると、Vue Fes Japan のオブジェがお出迎え。今年はリブランディングに力を入れているとのことで、ウェブサイトをはじめ全体的にデザインが統一されていて良いですね。

黒いボードの一部に、緑の Vue Fes Japan 2025  のロゴがあり、周囲に手書きのサインやロゴ風の落書きにがある。青色の kickflow のロゴも書き加えられている。 Vue Fes 名物クリエイティブボードがあったので、さっそく kickflow の名を刻んでおきました。スタッフの方が「みんな遠慮しがちなので大きく書いても大丈夫ですよ!」とおっしゃっていたのですが、早い時間でまだ書き込みが少なかったこともあり、恐る恐る書いていたらだいぶ謙虚な結果になってしまいました(笑)。

イベント名札のクローズアップ。大きく  Vue Fes Japan 2025  と記され、中央に  Attendee+Party  と緑の V ロゴ。下部に企業名  株式会社 kickflow  と青い  kickflow のロゴ、フッターに  Supported by Stockmark  の表記。指で上部のクリップをつまんでいる。 入口でネームカードを受け取り会場へ。今回はスポンサー参加のため固定デザインですが、個人参加の場合、事前に登録された名前とアバターが印刷されたものになります。ちょっと羨ましい…

緑系のテーブルクロスの上に、透明の仕切り付きケースが並び、Vue や Vite などのロゴステッカーが仕分けられている。 入場をすると最初にタトゥーステッカースペースがあり、みなさん思い思いのロゴを付けていました。せっかくのお祭りなので自分も付けさせていただきました。

両手の甲を交差させて突き出すポーズ。左手にVue のロゴ、右手に Oxc のロゴのタトゥーシールが貼られている。背景は縦縞のシャツ生地。 スタッフの方はフェイスペイントをしている人も多かったのですが、さすがに気恥ずかしくて両手のこぶしに貼るだけにしました。左手に Vue、右手に Oxc を宿してイベントに臨みます。

カンファレンス会場のステージ。中央の大型スクリーンに 88 の数字が表示され、左右に  Vue Fes Japan 2025  の縦長バナーと丸いマーブル模様のグラフィック。天井には照明機材がある。 オープニングムービーがあるのも毎年恒例です。趣向を凝らした映像を毎回密かに楽しみにしています。オープニングムービーは以下からフルで視聴できます。

www.youtube.com

他にも写真は撮り損ねてしまったのですが、縁日で輪投げや型抜きで遊べたり、回りきれないくらいのスポンサーブースがあったり、初心者・中級者向けのハンズオン、景品付きのクイズ大会があったり、とにかくイベントを盛り上げるための企画がこれでもかというほど用意されていました。会場は多くの人で賑わい、まさにフェス(お祭り)といった様相です。

ちなみに私は景品がもらえるくじを引くためにブースを回ってスタンプを集めていたのですが、終盤には景品がなくなってしまい、くじを引くことなくスタンプラリーが終わってしまったのが心残りでした。この教訓は来年に活かそうと思います。

印象に残ったセッション

カンファレンスの発表風景。投影スクリーンがあり、  Bundled Packages  と題したスライドと日本語・英語の説明文、パッケージ一覧の画面が表示されている。

Vue Fes Japan 2025 では、全セッションでスクリーン上にリアルタイム日英同時翻訳が表示されていました。 国内のカンファレンスで英語→日本語通訳はよくありますが、日本語→英語の同時通訳まであるのはかなり意欲的だと感じました。実際会場を見渡すと、来場者に海外の方が結構な数いるなという印象でした。

ここからは、聴講したセッションの中で特に印象に残ったものをいくつかピックアップしていきます。

VueはAIに弱い?そんなの都市伝説です

speakerdeck.com

AI によるコンポーネント生成を全体の 6 割まで引き上げる秘訣が紹介されていました。Figma MCP とデザインシステムの MCP を組み合わせ、プロンプトのスコープを適切に絞って出力精度を高める──やるべきことを着実に積み上げたからこその成果だと感じました。講演でも言及されていましたが、AI が働きやすい環境を整えれば、フレームワークに関係なく良い結果が得られる好例だと思います。kickflow でもフロントエンドの AI コーディング精度には課題感があるため、大いに参考になりました。

最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発

naitokosuke.github.io

Vue/Nuxt を使って Web アプリケーションを開発する時に直面する課題として、堅牢なルーティング処理や効率的な API の非同期処理が挙がりますが、この課題に対して型安全なルーティングを提供する Nuxt Typed Router と、簡潔で宣言的なデータフェッチングを提供する Pinia Colada を活用するアプローチが提示されていました。個人的には最後に紹介された unplugin-vue-router に強く惹かれました。型安全なルーティングに加え、Pinia Colada と連携したデータローダーでページに必要な API リクエストを宣言的に書けるため開発体験が非常に良く、すでに Nuxt の依存関係にも含まれているため、将来性にも期待が持てそうと思いました。

【パネルディスカッション】 フロントエンドの未来を語る ─ React/Vue.js/Svelte が見据える次の 10 年

Vue.js の Evan You 氏、React の Dan Abramov 氏、Svelte の dominikg 氏という、他では見られない豪華なメンバーによるパネルディスカッション。立ち見が出るほどの満員でした。印象に残ったトピックを挙げます。

  • Vue 2 から 3 への破壊的変更の経緯から、AI がハルシネーションを起こしやすいという課題があった。今後のバージョンアップでは変化を小さく保つことが重要。
  • 「Vibe Coding」時代には、エンジニアに AI をマネジメントするスキルが求められる。
  • 人間にとって分かりにくいドキュメントは AI にとっても分かりにくい。ドキュメントの質が大事。
  • 良いアプリケーションにはシンプルさが必要で、何をやらないかを明確にすることが大事。そこは AI が判断してくれない。
  • これからは特定領域そのものより「学ぶためのスキル」が重要。

確かに、Vue 3.6 の Alien Signals や Vapor Mode も、外部から見える変化や必要な手続きを最小化する配慮があると感じます。また、kickflow では「余計なものを作らない」ことを大切にしており、「何をやらないかの判断は AI はやらない」という言葉には強く納得しました。

「余計なものを作らない」ことは弊社 CTO 小林の記事でも言及されています。よろしければご覧ください。

note.com

Introducing Vite DevTools

talks.antfu.me

VoidZero から Vite+ が発表されましたが、その一角を担う、Vite の内部状態を GUI で可視化できる Vite DevTools の必要性と機能の詳細が解説されました。内部構造の可視化は、開発者が Web アプリケーションの最適化を行う上で必須の機能ですが、Anthony 氏の数々のインスペクタ実装で培われたノウハウが注ぎ込まれており、Vite DevTools が提供する怒涛の機能群に圧倒されました。

さらに、Vite DevTools をフレームワーク非依存の設計にする「DevTools Kit」構想の発表もありました。これが実現すれば、未来のフロントエンドエコシステムの基盤になり得る、非常に大きな取り組みだと感銘を受けました。

アフターパーティ

これまた Vue Fes 恒例の豪華なアフターパーティ。これが参加の楽しみの一つと言っても過言ではありません(笑)。

ビュッフェ台に並ぶ大皿サラダの群れ。葉野菜に色とりどりの野菜や果物、ロースト具材が盛られ、黒いプレートが段差のある台に配置されている。取り分け用トングと料理名カード付き。 スイーツビュッフェのテーブル。黄色や黄緑の四角ケーキ、チョコドームのタルト、細長い焼き菓子などが整然と並び、札にメニュー名が記されている。周囲にはサラダのプレートも見える。 ドリンクカウンターのアップ。ライム入りのソーダ、チェリーの入ったオレンジ色のカクテルなど色とりどりのグラスが列を作り、ストローのピックが挿さっている。テーブルクロスは鮮やかな青。

Vite、Rollup、Nuxt、Pinia など、それぞれのカラーをテーマにしたカクテルもあり、私は Pinia カクテルを美味しくいただきました。

他の参加者方達とセッションの感想や Vue/Nuxt 談義に花が咲き、あっという間に懇親会の時間が過ぎてしまいました。

全体を通して

コミュニティの熱気をダイレクトに感じられる内容で、個人的には、これまで参加してきたテックカンファレンスの中で一番好きなイベントです。日英同時翻訳といったチャレンジも素晴らしく、母語と異なるセッションへの心理的ハードルを下げることで、グローバルにコミュニティを活性化させるぞという運営側の本気が伝わってきました。

もし、React メインの技術スタックだから興味がないとか、過去の Vue.js のイメージから参加を敬遠している方がいたら、それは大変にもったいないと思います。Vue/Nuxt を使っていなくても、Vite や Vitest にお世話になっている方は多いのではないでしょうか。特定のフレームワークに限定せず、JavaScript エコシステムの未来という広い視点のトピックが満載なので、フロントエンドエンジニアにとって参加する価値が高いイベントだと感じました。

大きな黒いメッセージボードいっぱいに、カラフルな手書き文字やイラスト、ロゴ風の落書きがびっしり描かれている。中央に緑の  VO  ロゴと  Vue Fes Japan 2025  の文字、周囲に「I Love Vue」「NUXT」などのメッセージや企業名風のサインが散りばめられている。

帰宅の途に着く時にクリエイティブボードを見たらものすごい賑やかになってました。スタッフの方の言うとおり、もっと大きく書いても良かったですね。来年はもっとロゴをかっこよく書けるよう練習しておきます!

We are hiring!

kickflow(キックフロー)は、運用・メンテナンスの課題を解決する「圧倒的に使いやすい」クラウドワークフローです。

kickflow.com

サービスを開発・運用する仲間を募集しています。株式会社kickflowはソフトウェアエンジニアリングの力で社会の課題をどんどん解決していく会社です。こうした仕事に楽しさとやりがいを感じるという方は、カジュアル面談・ご応募お待ちしています!

careers.kickflow.co.jp