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
750
Remix SPAモードのファイルベースルーティングで進めるフロントエンド構築
Ryosuke Tokunaga / 德永 諒介
November 29, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
激動の時代を爆速リチーミングで乗り越えろ
sansantech
PRO
1
170
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
940
Zero Trust DNS でより安全なインターネット アクセス
murachiakira
0
110
20251027_マルチエージェントとは
almondo_event
1
470
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
emiki
0
260
AIを使ってテストを楽にする
kworkdev
PRO
0
260
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
340
Retrospectiveを振り返ろう
nakasho
0
130
戦えるAIエージェントの作り方
iwiwi
2
790
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
540
データとAIで明らかになる、私たちの課題 ~Snowflake MCP,Salesforce MCPに触れて~ / Data and AI Insights
kaonavi
0
120
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
2
430
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
526
40k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Become a Pro
speakerdeck
PRO
29
5.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
What's in a price? How to price your products and services
michaelherold
246
12k
Writing Fast Ruby
sferik
630
62k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Practical Orchestrator
shlominoach
190
11k
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