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
91
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
830
VueUse: 5分で分かる Vue.js 開発の効率化術
naokihaba
5
3.1k
前職でNestJSを採用して得た体験からの学び
naokihaba
0
370
GitHub_Packagesで型情報を共通化したら素晴らしかった件
naokihaba
0
240
チームで始める_テスト文化のススメ
naokihaba
0
780
不具合に立ち向かう テスト戦略 ~ NestJSで作るCI環境 ~
naokihaba
0
510
Other Decks in Programming
See All in Programming
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
170
CI改善もDatadogとともに
taumu
0
120
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
0
210
sappoRo.R #12 初心者セッション
kosugitti
0
260
ソフトウェアエンジニアの成長
masuda220
PRO
12
1.7k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
270
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
技術を根付かせる / How to make technology take root
kubode
1
250
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
DROBEの生成AI活用事例 with AWS
ippey
0
130
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
850
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Being A Developer After 40
akosma
89
590k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Cult of Friendly URLs
andyhume
78
6.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Writing Fast Ruby
sferik
628
61k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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