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
17
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
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
VueUse: 5分で分かる Vue.js 開発の効率化術
naokihaba
5
2.8k
前職でNestJSを採用して得た体験からの学び
naokihaba
0
350
GitHub_Packagesで型情報を共通化したら素晴らしかった件
naokihaba
0
240
チームで始める_テスト文化のススメ
naokihaba
0
760
不具合に立ち向かう テスト戦略 ~ NestJSで作るCI環境 ~
naokihaba
0
500
Other Decks in Programming
See All in Programming
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
710
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
480
Vapor Revolution
kazupon
1
180
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
CSC509 Lecture 13
javiergs
PRO
0
110
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
cmp.Or に感動した
otakakot
3
230
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Featured
See All Featured
Building an army of robots
kneath
302
43k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
A Philosophy of Restraint
colly
203
16k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
Agile that works and the tools we love
rasmusluckow
327
21k
Documentation Writing (for coders)
carmenintech
65
4.4k
Why Our Code Smells
bkeepers
PRO
334
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Adopting Sorbet at Scale
ufuk
73
9.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
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