Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング
Search
Naoki Haba
October 17, 2024
Programming
1
140
unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング
Vue Fes Japan 2024 Pre LT Party
https://optim.connpass.com/event/330716/
Naoki Haba
October 17, 2024
Tweet
Share
More Decks by Naoki Haba
See All by Naoki Haba
Laravel+PHPStanで始める実践的静的解析入門
naokihaba
2
310
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
900
技術で挑む保育現場の課題解決 〜コドモンエンジニアの 開発スタイルと取り組み
naokihaba
1
120
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
1.3k
VueUse: 5分で分かる Vue.js 開発の効率化術
naokihaba
5
3.6k
前職でNestJSを採用して得た体験からの学び
naokihaba
0
400
GitHub_Packagesで型情報を共通化したら素晴らしかった件
naokihaba
0
260
チームで始める_テスト文化のススメ
naokihaba
0
800
不具合に立ち向かう テスト戦略 ~ NestJSで作るCI環境 ~
naokihaba
0
540
Other Decks in Programming
See All in Programming
コーディングエージェント概観(2025/07)
itsuki_t88
0
440
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.4k
Understanding Kotlin Multiplatform
l2hyunwoo
0
230
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
510
What's new in Adaptive Android development
fornewid
0
120
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
470
新しいモバイルアプリ勉強会(仮)について
uetyo
1
190
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
850
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Become a Pro
speakerdeck
PRO
29
5.4k
Music & Morning Musume
bryan
46
6.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Bash Introduction
62gerente
613
210k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Gamification - CAS2011
davidbonilla
81
5.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Transcript
unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング 2024/10/17 Vue Fes Japan 2024 Pre LT
Party
2 About me
3 Copyright © 2015 every, Inc. All rights reserved. •
羽馬 直樹(@naoki_haba) • 株式会社 エブリー • Vue.js 3.5公式ドキュメント日本語翻訳 に携わる • 10/30 VueFesアフターイベントも登壇し ます
4 本日のタイトル
5 unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング
6 unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング
7 unplugin-vue-router とは?
8
9 こんな経験ありませんか?
10 Copyright © 2015 every, Inc. All rights reserved. •
😓 route.js(ts)の肥大化:管理が複雑に、可読性の低下 • 🔁 反復作業の増加:ページ追加ごとの煩わしいルート定義 • 🤔 Nuxtを使わずにファイルベースルーティングを実現したい
11 そんな悩みを解決するのが unplugin-vue-router です!
12 unplugin-vue-routerの主要機能
13 Copyright © 2015 every, Inc. All rights reserved. •
🛡 型安全性 • 📁 ファイルベースのルーティング • 🔄 データローダのサポート(実験的なAPI)
14 Copyright © 2015 every, Inc. All rights reserved. •
🛡 型安全性 • 📁 ファイルベースのルーティング • 🔄 データローダのサポート(実験的なAPI)
15 Copyright © 2015 every, Inc. All rights reserved. •
🛡 型安全性:ルーティングエラーを未然に防ぐ • ✅ ルート名とパスの自動補完 • 🔍 パラメータの型チェック • ⚠ 存在しないルートの即時検出 • 🤝 vue-router も unplugin-vue-router を推奨 • 💡 手動設定も可能だが、プラグインによる自動生成がおすすめ 🚀 コーディング時のミスを最小限に、開発効率を最大限に
16 Copyright © 2015 every, Inc. All rights reserved. 🚀
ルート名とパスの自動補完
17 Copyright © 2015 every, Inc. All rights reserved. unplugin-vue-routerの主な特長
🚀 誤ったルート指定の即時検出
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 Copyright © 2015 every, Inc. All rights reserved. 🚀
データ取得ロジックがコンポーネントのロジックから分離
24 クイックスタート
25 Copyright © 2015 every, Inc. All rights reserved. 1.
インストール ※ お好みのパッケージマネージャーで 3. TypeScript設定 2. バンドラーへのプラグイン追加 4. 型定義の追加
26 unplugin-vue-router によって得られるもの
27 Copyright © 2015 every, Inc. All rights reserved. •
📈 開発効率の向上 • ルーティング設定の自動化 • 手動設定の手間を大幅に削減 • 🧠 認知負荷の軽減 • ファイル構造に集中するだけでOK • 複雑なルーティングロジックから解放 • 🔧 柔軟性の向上 • ファイルベースルーティングをVue.jsプロジェクトに • Nuxtライクな機能を単体の Vue.jsアプリケーションで実現
28 注意点
29 Copyright © 2015 every, Inc. All rights reserved. •
⚠ 安定性と実験的機能 • 型付きルーティングとファイルベースルーティングは基本的に安定 • 他の実験的API(例:データローダー)は変更の可能性あり • ⚠ SSR(サーバーサイドレンダリング)は現時点でサポートされていない
30 Copyright © 2015 every, Inc. All rights reserved. unplugin-vue-router
であなたのVue.jsプロジェクトを次のレベルへ!
31 Copyright © 2015 every, Inc. All rights reserved. 🚀
登壇者・参加者 絶賛募集中です!
None