とあるサイトがkingnizeされるまで～Nuxtからvuerend & Vizeへ
https://gyazo.com/58cb5c25cd0bd10530d4b03645905893
この資料は v-tokyo Meetup #25 のLT資料です
yamanoku.icon yamanoku / 一児の父・会社員
https://gyazo.com/f7a0daf599a60364e96a9f125b97e862
覇者としての権力。力をもってする支配力。「ーーを握る」
話のはじまり（2024）
RubyKaigiの2006年から2024年までの登壇者一覧を見れるWebページを作った - Eggshell
yamanoku.icon Vue Fes Japanの登壇者をまとめてみよう
https://gyazo.com/10fdb2d57c2ff189e7c46a87b0d4f603
https://vuefes-japan-speakers.nuxt.dev/
Nuxt 3 + Nuxt UI + Nuxt Hubの構成（当時）
ページ構成はRubyKaigiのものと揃えてみた
詳細：Vue Fes Japanの歴代スピーカー一覧を見られるページを作った
なんか寂しいな…
最低限の機能はあるがサイトがつまらない
正直自分では良いイメージが湧かない
https://gyazo.com/674b245aea8ee2359bc5a189ba7ec0c1
Claude Designでサイトリデザイン（作業期間：3日）
https://gyazo.com/0e309c1b256795508302d849f03da5ba
https://gyazo.com/10fdb2d57c2ff189e7c46a87b0d4f603https://gyazo.com/0e309c1b256795508302d849f03da5ba
地味で退屈👹なサイトから楽しくワクワクできる😊サイトへ
タイムラインと一覧ページ別に
キーワード検索機能・年ごとの発表者数表示
ライト・ダークモード対応・言語切り替え
Nuxt UIを廃止
https://gyazo.com/9be6fcc4ea6749830925fe3da60e2d9f
Evan Youも紹介ポストにいいねしてくれました
そんなある日…
https://gyazo.com/30d87f7776d892a5f7414bf53137f2fe
https://gyazo.com/6a9e6e0c0cd82f42d97fb035a367c7d2
ロゴ、favicon、OG画像の追加対応
https://gyazo.com/8407fb1adc7107cba23022b008a720ad
Vite+の全面サポート（前はpnpmを通してのVite+実行だった）
https://gyazo.com/51dbaefb251967624195abd8b2942a47
Vitestのブラウザモードの活用
https://gyazo.com/1e73a4e4f31586c60eb71a8874318708
その他色々コントリビュート
https://gyazo.com/8fb00e2284d46ad8f3225c63d6305eda
？？？？？？？？？？
kingnize by ubugeeei · Pull Request #685 · yamanoku/vuefes-japan-speakers · GitHub
vuerend+Vizeをフル活用したリアーキテクチャ
vuerend ... Zero JavaScript-firstのVueランタイム
Vize ... Vue.js関連のRustツールチェイン
いずれもubugeeei氏ubugeeei.iconのOSS
https://gyazo.com/ab7b9120548019f21310d459917d9b09https://gyazo.com/c469f37db38553658b01f02d6b94d70d
@ubugeeei: @mimifuwacc サンプルです (vize も試してみて欲しい)
https://github.com/yamanoku/vuefes-japan-speakers/pull/685
サンプル扱いすな
https://gyazo.com/a114511c41045fb34d08b0c3bafa926e
コントリビューションありがとうございました（2～3日の出来事）
kingnize以降のアーキテクチャ変更
Nuxt 4 → vuerend
SPA → MPA・Island architecture
Nuxt Hub（Cloudflare Pages） → Cloudflare Workers
pnpm → Vite+.icon
Vue SFC compiler: Vize.icon
各種CI
Lint: Oxlint.icon + Vize.icon
Format: Vite+.icon
Typecheck: Vize.icon
Test: Vitest.icon (Browser Mode/Playwright)
Real World Testing - Vize
実際のプロダクション規模のコードベースでの検証段階へ
Real World Testing → α → β → RC → 1.0.0
https://github.com/ubugeeei-prod/vize/tree/main/crates/vize_patina/src/rules/a11y
アクセシブルなLintルールへの貢献(フィードバック)もやっていき
HTMLが厳格にチェックされるようになったのでフィードバックしました
まとめ：kingnizeとは何だったのか
ubugeeei氏のOSSによる版図拡大リアーキテクチャ
全面的なRustツールチェインの恩恵を得られる
Nuxtを捨て軽量なVue.jsのMPA構成へ
Vite Plus + vuerend + Vizeのサンプルプロジェクトへ
変わってどうだったか
Nuxt時代も凝って作ってないのでページの速さについては体感変わらない
コンパイラ含めここまでRustツールに囲まれたものはないので他との比較にはなる
CIに関しては確実に速くなってる
破壊的変更がありまくりなので追従や変更は大変
なんかあったらubugeeeiに連絡取れるのが幸いな点
v1.0.0楽しみにしております
https://gyazo.com/1a24fe8a4521e5813f09b5cd4074e58e