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
Remix SPAモードのファイルベースルーティングで進めるフロントエンド構築
Search
Ryosuke Tokunaga / 德永 諒介
November 29, 2024
Technology
0
730
Remix SPAモードのファイルベースルーティングで進めるフロントエンド構築
Ryosuke Tokunaga / 德永 諒介
November 29, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
自動テストのコストと向き合ってみた
qa
1
220
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
190
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
190
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
290
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
220
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
990
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
170
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
290
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.3k
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
160
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
440
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
990
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Producing Creativity
orderedlist
PRO
347
40k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Code Reviewing Like a Champion
maltzj
526
40k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Mobile First: as difficult as doing things right
swwweet
224
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
KATA
mclloyd
32
15k
For a Future-Friendly Web
brad_frost
180
9.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Rails Girls Zürich Keynote
gr2m
95
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Transcript
Remix SPAモードのファイルベースルーティング で進めるフロントエンド構築 2024-11-23 JSConf JP 2024 スポンサーLT 德永 諒介(@ryo_chike)
Hono.js / Next.js (App Router) 好きなWebフレームワーク 德永 諒介(@ryo_chike) ダーツ /
ワイン / スプラトゥーン スノーボード 最近ホットなもの 株式会社メドレーのエンジニア 直近は新規事業開発チームのリーダーを務める
今日話すこと (SPA mode) v7が本日リリースされましたね
背景 ・社内管理画面 / toB Web / toC Web / toC
Mobile と動作環境が多い ・完全新規のプロダクト開発 ・フロントエンドについては特に縛りなく技術選定出来る状況
技術選定 →そうだ、Remix 使おう ・新規事業開発の初動において、顧客向け管理画面は SSR 用サーバーのメ ンテナンスを省けたら嬉しい(SEO などそこまで求められない) ・Next.js をSPAで運用するのは辛そう
・React をなるべくフレームワーク無しで利用したくはない
・React Router との統合が発表されてざわついていたタイミングだった →ほぼ React + Vite として使っていて、ファイルベースルーティングが欲し かっただけなので最悪移行可能と考えた Remix
選定の懸念
実際 Remix SPA mode (React Router) どう? →普通にいい
Pros Remix SPA mode 導入の Pros / Cons ・ほぼほぼ React
+ Vite なので、困ったら剥がせる安心感 ・コンフィグの ssr: false を消すだけで SSR も可能 ・ファイルベースルーティングが出来る ・SSR サーバーを気にするコストを削れた
Cons Remix SPA mode 導入の Pros / Cons ・(とはいえ)ファイルベースルーティングに若干クセあり
Remix (React Router) のルーティング ・基本的にフラットにパスを記述し ていく ・ネストしたディレクトリ構造での パス表現は出来ない
コロケーション、したい
Remix Flat Routes
実際の構造はこんな感じに表現 ・_ や + を使った記法は多少キャッチアップ コストがかかる ・routes/ 配下のファイルが全部ルーティン グされるわけではないため、パスの制御が楽
https://reactrouter.com/
None
None