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
620
Remix SPAモードのファイルベースルーティングで進めるフロントエンド構築
Ryosuke Tokunaga / 德永 諒介
November 29, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4.5k
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
150
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
0
120
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
4
1.4k
ビギナーであり続ける/beginning
ikuodanaka
1
200
rubygem開発で鍛える設計力
joker1007
2
270
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
300
OPENLOGI Company Profile for engineer
hr01
1
33k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
250
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
170
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Balancing Empowerment & Direction
lara
1
390
Docker and Python
trallard
44
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Become a Pro
speakerdeck
PRO
28
5.4k
Rails Girls Zürich Keynote
gr2m
94
14k
Automating Front-end Workflow
addyosmani
1370
200k
Being A Developer After 40
akosma
90
590k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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