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
660
Remix SPAモードのファイルベースルーティングで進めるフロントエンド構築
Ryosuke Tokunaga / 德永 諒介
November 29, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
With Devin -AIの自律とメンバーの自立
kotanin0
2
790
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
270
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
270
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
390
Kiroから考える AIコーディングツールの潮流
s4yuba
1
350
Kiro Hookを Terraformで検証
ao_inoue
0
140
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
160
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
3
150
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
4
1.8k
M365アカウント侵害時の初動対応
lhazy
7
5.1k
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
290
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
330
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.8k
Raft: Consensus for Rubyists
vanstee
140
7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Navigating Team Friction
lara
187
15k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Optimizing for Happiness
mojombo
379
70k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
GraphQLの誤解/rethinking-graphql
sonatard
71
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