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

unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング 2024/10/17 Vue Fes Japan 2024 Pre LT Party

About me 2

• 羽馬 直樹（@naoki_haba） • 株式会社 エブリー • Vue.js 3.5公式ドキュメント日本語翻訳 に携わる • 10/30 VueFesアフターイベントも登壇し ます Copyright © 2015 every, Inc. All rights reserved. 3

本日のタイトル 4

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

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

unplugin-vue-router とは？ 7

8

こんな経験ありませんか？ 9

• 😓 route.js(ts)の肥大化：管理が複雑に、可読性の低下 • 🔁 反復作業の増加：ページ追加ごとの煩わしいルート定義 • 🤔 Nuxtを使わずにファイルベースルーティングを実現したい Copyright © 2015 every, Inc. All rights reserved. 10

そんな悩みを解決するのが unplugin-vue-router です！ 11

unplugin-vue-routerの主要機能 12

• 🛡 型安全性 • 📁 ファイルベースのルーティング • 🔄 データローダのサポート（実験的なAPI） Copyright © 2015 every, Inc. All rights reserved. 13

• 🛡 型安全性 • 📁 ファイルベースのルーティング • 🔄 データローダのサポート（実験的なAPI） Copyright © 2015 every, Inc. All rights reserved. 14

• 🛡 型安全性：ルーティングエラーを未然に防ぐ • ✅ ルート名とパスの自動補完 • 🔍 パラメータの型チェック • ⚠ 存在しないルートの即時検出 • 🤝 vue-router も unplugin-vue-router を推奨 • 💡 手動設定も可能だが、プラグインによる自動生成がおすすめ 🚀 コーディング時のミスを最小限に、開発効率を最大限に Copyright © 2015 every, Inc. All rights reserved. 15

🚀 ルート名とパスの自動補完 Copyright © 2015 every, Inc. All rights reserved. 16

unplugin-vue-routerの主な特長 🚀 誤ったルート指定の即時検出 Copyright © 2015 every, Inc. All rights reserved. 17

• 🛡 型安全性 • 📁 ファイルベースのルーティング • 🔄 データローダのサポート Copyright © 2015 every, Inc. All rights reserved. 18

• 📁 ファイルベースのルーティング：構造がそのままルートに • 🌳 ファイル構造に基づく自動ルート生成 • 🪆 ネストされたレイアウトの自然なサポート • 🔄 動的ルートの簡単な定義 • 🔍 ディレクトリ構造を見るだけでルート把握が可能に • 💡 複雑なルート設定が不要に！ 🚀 直感的な開発体験で、ルーティング構築の効率が大幅アップ Copyright © 2015 every, Inc. All rights reserved. 19

🚀 ファイル構造とルーティングの完璧な一致 Copyright © 2015 every, Inc. All rights reserved. 20

• 🛡 型安全性 • 📁 ファイルベースのルーティング • 🏗 🔄 データローダのサポート Copyright © 2015 every, Inc. All rights reserved. 21

• 🔄 データローダー：非同期データ取得を簡単に！ • 📦 ルート単位での効率的なデータプリフェッチ • 🧩 コンポーネントとデータ取得ロジックの分離 • 🛡 型安全なデータアクセス 🚀 クリーンなコード設計と優れたユーザー体験を両立 Copyright © 2015 every, Inc. All rights reserved. 22

🚀 データ取得ロジックがコンポーネントのロジックから分離 Copyright © 2015 every, Inc. All rights reserved. 23

クイックスタート 24

1. インストール ※ お好みのパッケージマネージャーで 2. バンドラーへのプラグイン追加 3. TypeScript設定 4. 型定義の追加 Copyright © 2015 every, Inc. All rights reserved. 25

unplugin-vue-router によって得られるもの 26

• 📈 開発効率の向上 • ルーティング設定の自動化 • 手動設定の手間を大幅に削減 • 🧠 認知負荷の軽減 • ファイル構造に集中するだけでOK • 複雑なルーティングロジックから解放 • 🔧 柔軟性の向上 • ファイルベースルーティングをVue.jsプロジェクトに • Nuxtライクな機能を単体の Vue.jsアプリケーションで実現 Copyright © 2015 every, Inc. All rights reserved. 27

注意点 28

• ⚠ 安定性と実験的機能 • 型付きルーティングとファイルベースルーティングは基本的に安定 • 他の実験的API（例：データローダー）は変更の可能性あり • ⚠ SSR（サーバーサイドレンダリング）は現時点でサポートされていない Copyright © 2015 every, Inc. All rights reserved. 29

unplugin-vue-router であなたのVue.jsプロジェクトを次のレベルへ！ Copyright © 2015 every, Inc. All rights reserved. 30

🚀 登壇者・参加者 絶賛募集中です！ Copyright © 2015 every, Inc. All rights reserved. 31