1.9K Views
October 17, 24
スライド概要
Software engineer
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