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
94
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
830
技術で挑む保育現場の課題解決 〜コドモンエンジニアの 開発スタイルと取り組み
naokihaba
1
110
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
1.2k
VueUse: 5分で分かる Vue.js 開発の効率化術
naokihaba
5
3.5k
前職でNestJSを採用して得た体験からの学び
naokihaba
0
400
GitHub_Packagesで型情報を共通化したら素晴らしかった件
naokihaba
0
260
チームで始める_テスト文化のススメ
naokihaba
0
800
不具合に立ち向かう テスト戦略 ~ NestJSで作るCI環境 ~
naokihaba
0
530
Other Decks in Programming
See All in Programming
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
18k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
効率的な開発手段として VRTを活用する
ishkawa
0
140
ニーリーにおけるプロダクトエンジニア
nealle
0
840
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Tale of Four Properties
chriscoyier
160
23k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
4 Signs Your Business is Dying
shpigford
184
22k
How STYLIGHT went responsive
nonsquared
100
5.6k
Docker and Python
trallard
44
3.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
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