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

1.9K Views

October 17, 24

スライド概要

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

About me 2

3.

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

4.

本日のタイトル 4

5.

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

6.

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

7.

unplugin-vue-router とは? 7

9.

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

10.

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

11.

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

12.

unplugin-vue-routerの主要機能 12

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

クイックスタート 24

25.

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

26.

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

27.

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

28.

注意点 28

29.

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

30.

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

31.

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