Vue Fes Japan 2025 で『最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発』という題で発表した。
Vue Fes Japan 2025 『最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発』の登壇資料
いい加減な発表にはしたくないと思い、自分なりに色々考えて発表に臨んだ。 そのことについて書く。
CfP
30 分トークで採択されたが、LT でも応募した。 『Vue.js フロントエンドエンジニアになって半年、こんなコードが書けるようになりました。』 こっちは勝ちに行くための CfP ではなく、本当に自分が喋りたいことをそのまま提出した。 実は Funabashi.dev でも発表した。15 分枠だったことと Vue.js に特化したイベントではなかったので見せ方や主題を変えて発表した。 どこかでまた発表したり記事にしたい。
『最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発』については、勝つために、採択されるために用意した。締切の 20 分前くらいに提出した。
業務で使用してとても使い心地が良かった 2 つを紹介したいという思いがまずあった。 タイトルについては AI を活用した。CfP の内容と「絶対 Vue Fes Japan 2025 に採択される、引きのあるいい感じのタイトル〜」みたいなプロンプトを使用した記憶がある。 AI が提出したタイトルは以下。
typed-router と Pinia Colada で実現する次世代 DX - 開発者が本当に集中できる環境
これを直して今回のタイトルになった。 余談だが、このタイトルを前日の夜までぼくは覚えていなかった。スポンサー懇親会で「何て発表ですか？」と聞かれて自分の発表のタイトルを覚えていないことに気づいた。
採択と準備
CfP 提出から 3 週間後くらいに採択の旨のメールが来た。7 月の中旬だった。 自分の運の良さに改めて驚いた。同じ日にスマホが壊れたが合格の嬉しさのおかげで耐えることができた。
そのタイミングくらいで他の採択者の方の CfP を目にすることができたのだが、Yuichi Yogo さんの洗練された CfP を目にして、改めて自分はツイていると思った。来年は改善したい。
採択されてからまずは改めて公式ドキュメントを読んだ。 なんとなくのスケジュールを立てて、9 月中にはスライドを完成させて、10 月に入ったら登壇練習だ！という気持ちでいた。 そのスケジュールだとまだ余裕があるので、7 月中は発表とスライドに深みを出すために周辺知識について勉強することにした。 あとは Vue Fes Japan 2024 の録画映像が YouTube にて公開されていたのでモチベのためにほぼ全て見た。
Pinia Colada の公式ドキュメントに、他のライブラリとの比較が載っていた。
The smart Data Fetching layer for Pinia
ここに rstore, swrv, TanStack Query との比較もあったので、7 月〜 8 月にはこれらのライブラリについても勉強した。
TanStack Query と SWR ということで、React, Next.js での情報が非常にたくさんあったのでそちらも参考にした。 特に以下の記事が参考になった。
8 月の後半には Next.js で typed routes が stable feature になったので、人生初 Next.js もした。
rstore については発表前に Zenn の記事にするつもりだったが、ちょうど？破壊的変更をたくさん含んでいるらしいリリースが入り断念した。 アドカレの時期になるので書きたい。
A huge release of rstore just dropped! There are so many improvements and new features I can't list all of them here 😸The entire codebase got a big makeover! Unfortunately this also means a lot of breaking changes but I did my best to document everything https://t.co/7RvpJpXvY3
スライド作成
もちろんスライドは Slidev で作成する予定だったのでリポジトリも作成して、プロジェクトを用意した。
Presentation slides for developers
これまでにも Slidev を使用してスライドを作っていたが、今回は Slidev でスライドを作るにあたって 2 つやりたいこと(目標)を決めた。
- monaco editor で Nuxt Typed Router の型を体験できるようにする
- piña colada をイメージとしたビーチの夕暮れを再現
2 つの目標を実現できたのは間違いなく Claude Code のおかげだ。 今回のスライド作成では以下で Claude Code を活用した。
- style(CSS)の用意
- コンポーネントの用意
- 夕暮れを表現するための背景の用意
また、「monaco editor で Nuxt Typed Router の型を体験できるようにする」ためにスライドとデモアプリの monorepo 構造を取ったのだが、それも Claude Code にやらせた。
8 月中は vibe sliding(vibe coding の slide バージョン)を繰り返していた。 全然うまくいかなかった。 スマホで Claude Code を遊んでいた時期だったので、毎日の行き帰りに vibe sliding を繰り返していた。
スマホから Claude Code できるようになった！
全然うまくいかないので、スライドのリポジトリに ___research___/ というディレクトリを作成して、そこに markdown 形式で調べた内容やスライドの構成についてをまとめた。
このディレクトリを参照させることによって Claude Code にコンテキストを与えたのだが、全然うまくいかなかった。
vibe sliding が全然うまくいかなかった
vibe sliding によって良スライド生成ガチャを繰り返したのだがどれも全然ダメだった。 ぼくの中で発表のコンセプトや発表を通して伝えたいことが見えていなかった、決まっていなかったからだ。 完成したスライドも技術の説明に重きを置いた内容にはなったが、8 月中はそれだけに終始したつまらないものだった記憶がある。 誰にも何も伝わらないという不安でいっぱいになった。 この時期には東葛.dev で合同同人誌を取りまとめるということもやっていて軽くパンク状態だった。 技術学習はもちろん大事だが、何を誰にどう伝えたいかということを決めきれないまま時間が過ぎてしまってよくなかった。 8 月はあんまり良くなかった。
コンセプト決め
ぼくに良いきっかけを与えてくれるのはいつもコミュニティだ。 大吉祥寺.pm に参加して、そこでようやくコンセプトというかスタンスを決められるようになった。
データベースはいつの時代もビジネス、ソフトウェア共に中心に存在し、大きな貢献を続けています。 その裏にはコミュニティがあり、様々な支援活動を行っています。 PostgreSQLユーザ会（以下 : JPUG）もその一つ。 そんなPostgreSQLコミュニティですが、運営メンバーが入れ替わらずに平均年齢は毎年カウントアップされています。 このセッションでは直接的な解決策まで提示できません。なぜなら **今、PostgreSQLコミュニティが無くなるかもしれない危機** だからです。 そんなPostgreSQLコミュニティの理事の一人である私がどうやってコミュニティに向き合って、そしてどんな未来を目指していくのか。 10年後に「あのときは結構苦労したんだよな」とみんなと酒を飲みながらふりかえられるようなことをお話します。
大吉祥寺.pm 2025の登壇資料です。 『地方でエンジニアコミュニティを成功させる秘訣』 https://fortee.j...
の 2 つの発表を見てとても感動した。 技術的な内容だけでなく、「エモ」も伝えたいという気持ちになった。
コミュニティに対する感謝の気持ちをコアのコンセプトとすることにした。 また、unplugin-vue-router の公式ドキュメント や作者の posva さんの登壇アーカイブなどを見ると、参考にした？影響を受けた？別の技術について言及していたので、それを真似してぼくも Vue Fes Japan 2024 の発表を紹介するようにした。
Vue Fes Japan 自体が 2 度の中止を乗り越えて、今も続いているというすごさや関わっている人数や企業数も再確認してもらいたいという思いも生まれた。
「感謝」と「つながり」みたいなエモのコンセプトを決めることができ、それで弾みがついたのかスライドの作成も順調に進めることができた。
あとは今年の Vue Fes Japan のゲストやセッション内容などから Vue.js 以外のフレームワークを使用されている方も来られることが予想できたので、その方たちに対しても感想を抱いてほしいなと思ってスライドを作っていた。
スライドのこだわり
Nuxt Typed Router の型の体験
Nuxt Typed Router を使用すると、.nuxt/typed-router/ ディレクトリ下に型ファイルなどが生成される。
これを Slidev プロジェクトにコピーして monaco editor で使用した。
極力字をデカく
なるべく後ろの方まで見えるように極力字を大きくした。
コードブロックの文字についても気持ち大きくした。
夕暮れ
これはテーマのようなものだが、夕暮れを表現するようにした。 Claude Code がいい感じに実装してくれてよかった。
QR コード
Vue Fes Japan が広報や SNS にも力を入れていることを知っていたし、後でエゴサというかをしたかったのでツイート用の QR コードをデッカく表示した。
vibe slide
もちろん vibe slide なんて言葉はない。 全然うまくいかなかったのだが、一部箇所は Claude Code にスライドの内容を作成させた。
敢えて AI に全て任せたスライドと明示することによって、それ以外のスライドをこだわった感じを出せるんじゃないかと思い、ジョークとして挿入した。
スライド完成(？) & 登壇準備
こだわったスライドだが、動作が重くなってしまうという致命的な欠陥を孕んだまま発表を迎えた。 原因特定修正に時間を割くより練習した方が良いと思い、思い当たる実装を剥がしたバージョンのスライドも用意してこちらも公開した。
Vue Fes Japan 2025 『最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発』の登壇資料
カラオケ行ったりした。 ハンドマイクの練習をしたのだが、当日は台の上にスタンドマイクが固定されていたので意味はなくなった。 発表前日の夕方にちょっとしたリハの機会をもらえたのだが、そこで音響スタッフの方に教えてもらえてとてもありがたかった。
本番 & 反省
緊張していた。とにかく。最前に見たことのあるアイコンのネームカードがあり思わず話しかけてしまった。 色々雑談してくれたり安心させてくれるようなこと言ってくれてありがとう！ぷーじさん！
緊張していてあんまり記憶がないんだが、たくさんの方に来てもらえたことはわかった。ありがとう。 練習していたつもりだが、QR コードを読み込んでいるのを待つ時間であったり、聞いている方たちのリアクションを受け取ったりする時間を全く考慮できていなかった。 来年はもっといろんなことを想像したい。
動揺するとペラペラ喋ってしまうタイプなのと、みなさんの温かいリアクションが嬉しくなって本題に入るまでに時間を使い過ぎてしまった。 結果的に後半のスライドを飛ばしてしまうことになった。 スライドの動作が重いこともあり、時間をオーバーしてしまい申し訳なかった。
現在はスライドの重さを解決できた！改めて見てほしい！
Vue Fes Japan 2025 『最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発』の登壇資料
伝えきれなかったんじゃないかということ
最後の posva さんの最近取り組んでいることについてもっと強調したかった。
I finally got this one working! ✨ Fully automatically typed params ✨ in vue router Using =type will adapt the TS declaration and runtime. The type can be ANYTHING, just write the parser: string -> your_type + your_type -> string Dates, custom classes, you name it
現在はファイル内で route の型をアサーション、型ガードをする必要がある。 posva さんはこれをページファイル名から型を当てることができるような機能を実装しているようだ。 この機能が使用できるようになったらさらに DX が向上するだろう。 というかどうやっているの？ もっと時間をかけたかった。
やり残しやりたかったこと
やりたかったけど諦めることになったことが 2 つある。
- インタラクティブなスライド(リアルタイムアンケート機能)
- 国際化対応(i18n, internationalization)
リアルタイムで参加している方に反応をもらえるようなスライドを考えていた。 昨年の Daniel Roe さんの発表で Nuxt 3 を使用しているかどうかのアンケート結果をリアルタイムでスライドに反映していたのがとても面白く、真似したかった。 Slidev では実現できることのはずだが、ぼくの実力が足りず間に合わなかった。
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
toddeTV さんの発表ではリアルタイムにリアクションを送信できるようになっていたとのことだった、見たかった。
# Playing with Vue in 3D\n\nThis project contains the slides for my talk titled `Playing with Vue in 3D` on 2025-10-25\nat the [Vue Fes Japan](https://vuefes.jp/2025/en/) 2025 conference in Tokyo.\n\nThe presented, repository and documentation language is `English`.\n
また、Vue Fes Japan はたくさんの海外参加者の方が来られるイベントだ。 裏の発表が 2 つ英語であるということもあって、海外参加者の多くはそちらに行くだろうということで今回は諦めてしまった。
Yuichi Yogo さんの発表では 3 ヶ国語対応していて素晴らしかった。
感想と学び
たくさんの方に聞いてもらえてとても嬉しかった。本当にありがとう。 Nuxt Typed Router と Pinia Colada について魅力とその実践的な使い方について知ってもらえていたらもっと嬉しい。
来年は CfP の文面にも時間をかけたい。 今年は少し大味過ぎていた気がした。もっと丁寧に書きたい。 もしまた発表の機会をもらえるのであれば、スライドも問題のない状態にして今回の反省を生かして練習に取り入れて発表に臨みたい。
最後に
Vue Fes Japan 2025 全体を通して最高の経験をさせてもらった。
スタッフや参加者の方に改めて感謝。
最後まで読んでくれてありがとう！