Vue Fes Japan 2025 登壇資料ブレインストーミング
https://scrapbox.io/files/68e3e5c20cf960978096307c.png
NPM の stats
https://tanstack.com/stats/npm?packageGroups=[{"packages":[{"name":"@pinia/colada"}],"color":"%23fff700"},{"packages":[{"name":"swrv"}],"color":"%23ff0df2"},{"packages":[{"name":"@tanstack/vue-query"}],"color":"%23a1732b"},{"packages":[{"name":"@rstore/vue"}],"color":"%232fd627"}]&range=365-days&transform=none&binType=weekly&showDataMode=all&height=400
レビューコストを下げる
AI との協業のためにはコンテキスト(ドキュメンテーションとしての型)はもちろん、lint や typecheck などを活用する
人間にとっても大事なこと(ガードレールを用意する)を当たり前のようにやる
初学者のレビュー依頼の心理的ハードルを下げる
レビュワーの心理的負担を減らす
これらが DX の向上
見た人によって抱く感想を変えたい
見る人全員なんかよかったなって思ってもらいたいという大目標はある
AI と新人の提出物のレビューにうんざりしている方たちへの解決方法のヒントをあげたい
新人へはレビューしてもらうのが辛いときは機械(not AI)に頼るという方法を思い出してほしい
React guys には Tanstack Query, React Router, Remix, SWR, Next.js の Typed Route を頭に浮かべながら共感してほしい
ノリと勢いだけで懇親会まで参加したけど、「知り合いもいないし話すこともない」って人には「ナイトウの発表見ました、データフェッチってどうしてますか?」って会話のタネをあげたい
https://x.com/nyamoshi334/status/1017832009022914560 このツイートを引用して、「採用しても技術的負債になるだけだから触れない」って人は設計とか実装とか上手くならないって言いたい
https://youtu.be/OUsXjtkLYu0?si=oj_kx_MgzM2Gni6F
の発表を引用したい
「ライブラリの話かなって思っちゃうけど、抽象化すれば、抽象的に見ればその言語がどのような課題を有しているかわかる、ライブラリを見ることで言語の未来を想像することができる」
人間は、いま自分が話している言葉の範囲でしか、世界を考えることができない。
The limits of my language mean the limits of my world.
—Ludwig Wittgenstein, 1922
これを悪意を持って引用して「たまには外の世界に出て知らない人の話を聞きましょう」って言いたい
「キャッシュは麻薬」
何人が携わっているのか(スタッフ、ボランティア、個人スポンサー、登壇者)
スポンサー何社か
これまで繋いでくれた方たちがいることなら感謝したい
2018 年頃の Nuxt.js のような自動ルーティングを可能にする Vue CLI プラグインを作った - Katashin .info Katashin さんの記事と
GitHub - ktsn/vue-auto-routing: Generate Vue Router routing automatically
GitHub - ktsn/vue-cli-plugin-auto-routing: Automatically resolve pages and layouts routing
について、posva も言及している
file base routing は
vue-auto-routing -> unplugin-vue-router
型付きルーティングは
nuxt-typed-router -> Nuxt typed page, unplugin-vue-router
pathpida とかにも言及するか
データフェッチ
Vue に stale-while-revalidate がやってくる - STORES Product Blog by ushironoko さん
Nuxt 3 でも useSWR したい!→標準機能のuseFetchでできました by Yutaro Koizumi さん
Nuxt の標準機能の swr オプションって何? #疑問
-> HTTP/サーバー配信用の cache 戦略
v-tokyo #20 が DX 回だったことを思い出した
AIが読み書きするコードも読みやすいほうがいい - きしだのHatena
DX には読みやすさも含めたい
エモ
この資料を作成するにあたって、
注意点
Nuxt Typed Pages と nuxt-typed-router の違い
unplugin-vue-router は nuxt-typed-router に着想を得ている
そして、Nuxt Typed Pages は unplugin-vue-router によって実現
Experimental Features · Nuxt Advanced v4
code:ts
// nuxt.config.ts
export default defineNuxtConfig({
// ...
experimental: {
typedPages: true,
},
// ...
});
実践的
nuxt-typed-router
入れて $nr dev するだけ
out-of-box i18n support
<NuxtLink /> を wrap したコンポーネントを作成するときの generic を使用するやつ
そもそも file の階層構造自体を間違っているかどうかは検出できない(階層構造を SSoT とする)
Pinia Colada
Pinia に依存している
Pinia Colada の state と asyncStatus の違いについて詳しく説明できるようにしたい
Understanding SWR – SWR の図を参考にして、以下のデータフェッチ戦略について図示したい
Stale-While-Revalidate, swr
invalidation, revalidation
Optimistic Update
revalidate の時は key state は更新されない、asyncStatus だけ更新
key value change の時は state, asyncStatus ともに
placeholder を使えば state を残したまま key 更新できる