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
340
Remix SPAモードのファイルベースルーティングで進めるフロントエンド構築
Ryosuke Tokunaga / 德永 諒介
November 29, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
Creative Pair
kawaguti
PRO
1
140
NOSTR, réseau social et espace de liberté décentralisé
rlifchitz
0
130
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
エンジニアとしてプロダクトマネジメントに向き合った1年半
sansantech
PRO
0
100
MCP server を作って Claude Desktop アプリから kintone へアクセスすると楽しい
r3_yamauchi
PRO
1
120
[TechNight #86] Oracle GoldenGate - 23ai 最新情報&プロジェクトからの学び
oracle4engineer
PRO
1
170
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
0
110
CNAPPから考えるAWSガバナンスの実践と最適化
nrinetcom
PRO
1
330
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
12
3.8k
トレードオフスライダーにおける品質について考えてみた
suzuki_tada
3
180
顧客の声を集めて活かすリクルートPdMのVoC活用事例を徹底解剖!〜プロデザ!〜
recruitengineers
PRO
0
200
地方企業がクラウドを活用するヒント
miu_crescent
PRO
1
110
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Statistics for Hackers
jakevdp
797
220k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Automating Front-end Workflow
addyosmani
1367
200k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Rails Girls Zürich Keynote
gr2m
94
13k
The Language of Interfaces
destraynor
156
24k
The Cult of Friendly URLs
andyhume
78
6.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Adopting Sorbet at Scale
ufuk
74
9.2k
Scaling GitHub
holman
459
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