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
150
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
360
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
950
技術で挑む保育現場の課題解決 〜コドモンエンジニアの 開発スタイルと取り組み
naokihaba
1
130
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
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
590
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
CSC305 Summer Lecture 04
javiergs
PRO
1
100
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
470
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
Langfuseと歩む生成AI活用推進
licux
3
300
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
バイブコーディング × 設計思考
nogu66
0
130
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
720
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Invisible Side of Design
smashingmag
301
51k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Thoughts on Productivity
jonyablonski
69
4.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Navigating Team Friction
lara
189
15k
Balancing Empowerment & Direction
lara
2
590
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