unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング

Vue Fes Japan 2024 Pre LT Party
https://optim.connpass.com/event/330716/

Transcript

1. unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング 2024/10/17 Vue Fes Japan 2024 Pre LT Party
2. 2 About me
3. 3 Copyright © 2015 every, Inc. All rights reserved. • 羽馬 直樹（@naoki_haba） • 株式会社 エブリー • Vue.js 3.5公式ドキュメント日本語翻訳 に携わる • 10/30 VueFesアフターイベントも登壇し ます
4. 4 本日のタイトル
5. 5 unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング
6. 6 unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング
7. 7 unplugin-vue-router とは？
9. 9 こんな経験ありませんか？
10. 10 Copyright © 2015 every, Inc. All rights reserved. • 😓 route.js(ts)の肥大化：管理が複雑に、可読性の低下 • 🔁 反復作業の増加：ページ追加ごとの煩わしいルート定義 • 🤔 Nuxtを使わずにファイルベースルーティングを実現したい
11. 11 そんな悩みを解決するのが unplugin-vue-router です！
12. 12 unplugin-vue-routerの主要機能
13. 13 Copyright © 2015 every, Inc. All rights reserved. • 🛡 型安全性 • 📁 ファイルベースのルーティング • 🔄 データローダのサポート（実験的なAPI）
14. 14 Copyright © 2015 every, Inc. All rights reserved. • 🛡 型安全性 • 📁 ファイルベースのルーティング • 🔄 データローダのサポート（実験的なAPI）
15. 15 Copyright © 2015 every, Inc. All rights reserved. • 🛡 型安全性：ルーティングエラーを未然に防ぐ • ✅ ルート名とパスの自動補完 • 🔍 パラメータの型チェック • ⚠ 存在しないルートの即時検出 • 🤝 vue-router も unplugin-vue-router を推奨 • 💡 手動設定も可能だが、プラグインによる自動生成がおすすめ 🚀 コーディング時のミスを最小限に、開発効率を最大限に
16. 16 Copyright © 2015 every, Inc. All rights reserved. 🚀 ルート名とパスの自動補完
17. 17 Copyright © 2015 every, Inc. All rights reserved. unplugin-vue-routerの主な特長 🚀 誤ったルート指定の即時検出
18. 18 Copyright © 2015 every, Inc. All rights reserved. • 🛡 型安全性 • 📁 ファイルベースのルーティング • 🔄 データローダのサポート
19. 19 Copyright © 2015 every, Inc. All rights reserved. • 📁 ファイルベースのルーティング：構造がそのままルートに • 🌳 ファイル構造に基づく自動ルート生成 • 🪆 ネストされたレイアウトの自然なサポート • 🔄 動的ルートの簡単な定義 • 🔍 ディレクトリ構造を見るだけでルート把握が可能に • 💡 複雑なルート設定が不要に！ 🚀 直感的な開発体験で、ルーティング構築の効率が大幅アップ
20. 20 Copyright © 2015 every, Inc. All rights reserved. 🚀 ファイル構造とルーティングの完璧な一致
21. 21 Copyright © 2015 every, Inc. All rights reserved. • 🛡 型安全性 • 📁 ファイルベースのルーティング • 🏗 🔄 データローダのサポート
22. 22 Copyright © 2015 every, Inc. All rights reserved. • 🔄 データローダー：非同期データ取得を簡単に！ • 📦 ルート単位での効率的なデータプリフェッチ • 🧩 コンポーネントとデータ取得ロジックの分離 • 🛡 型安全なデータアクセス 🚀 クリーンなコード設計と優れたユーザー体験を両立
23. 23 Copyright © 2015 every, Inc. All rights reserved. 🚀 データ取得ロジックがコンポーネントのロジックから分離
24. 24 クイックスタート
25. 25 Copyright © 2015 every, Inc. All rights reserved. 1. インストール ※ お好みのパッケージマネージャーで 3. TypeScript設定 2. バンドラーへのプラグイン追加 4. 型定義の追加
26. 26 unplugin-vue-router によって得られるもの
27. 27 Copyright © 2015 every, Inc. All rights reserved. • 📈 開発効率の向上 • ルーティング設定の自動化 • 手動設定の手間を大幅に削減 • 🧠 認知負荷の軽減 • ファイル構造に集中するだけでOK • 複雑なルーティングロジックから解放 • 🔧 柔軟性の向上 • ファイルベースルーティングをVue.jsプロジェクトに • Nuxtライクな機能を単体の Vue.jsアプリケーションで実現
28. 28 注意点
29. 29 Copyright © 2015 every, Inc. All rights reserved. • ⚠ 安定性と実験的機能 • 型付きルーティングとファイルベースルーティングは基本的に安定 • 他の実験的API（例：データローダー）は変更の可能性あり • ⚠ SSR（サーバーサイドレンダリング）は現時点でサポートされていない
30. 30 Copyright © 2015 every, Inc. All rights reserved. unplugin-vue-router であなたのVue.jsプロジェクトを次のレベルへ！
31. 31 Copyright © 2015 every, Inc. All rights reserved. 🚀 登壇者・参加者 絶賛募集中です！