Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Naoki Haba

October 17, 2024
Tweet

More Decks by Naoki Haba

Other Decks in Programming

Transcript

  1. 3 Copyright © 2015 every, Inc. All rights reserved. •

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

  3. 10 Copyright © 2015 every, Inc. All rights reserved. •

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    であなたのVue.jsプロジェクトを次のレベルへ!
  18. 31 Copyright © 2015 every, Inc. All rights reserved. 🚀

    登壇者・参加者 絶賛募集中です!