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
260
Remix SPAモードのファイルベースルーティングで進めるフロントエンド構築
Ryosuke Tokunaga / 德永 諒介
November 29, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
サーバーなしでWordPress運用、できますよ。
sogaoh
PRO
0
170
デジタルアイデンティティ技術 認可・ID連携・認証 応用 / 20250114-OIDF-J-EduWG-TechSWG
oidfj
2
180
AWS re:Invent 2024 Recap in ZOZO - Serverless で好きなものをしゃべってみた
chongmyungpark
0
1k
シフトライトなテスト活動を適切に行うことで、無理な開発をせず、過剰にテストせず、顧客をビックリさせないプロダクトを作り上げているお話 #RSGT2025 / Shift Right
nihonbuson
3
1.4k
pg_bigmをRustで実装する(第50回PostgreSQLアンカンファレンス@オンライン 発表資料)
shinyakato_
0
150
能動的ドメイン名ライフサイクル管理のすゝめ / Practice on Active Domain Name Lifecycle Management
nttcom
0
310
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
3
490
3年でバックエンドエンジニアが5倍に増えても破綻しなかったアーキテクチャ そして、これから / Software architecture that scales even with a 5x increase in backend engineers in 3 years
euglena1215
11
4.3k
非機能品質を作り込むための実践アーキテクチャ
knih
6
1.8k
ヤプリQA課題の見える化
gu3
0
150
SpiderPlus & Co. エンジニア向け会社紹介資料
spiderplus_cb
0
410
20240522 - 躍遷創作理念 @ PicCollage Workshop
dpys
0
310
Featured
See All Featured
Fireside Chat
paigeccino
34
3.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The Language of Interfaces
destraynor
155
24k
A better future with KSS
kneath
238
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
Faster Mobile Websites
deanohume
305
30k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Being A Developer After 40
akosma
89
590k
Code Review Best Practice
trishagee
65
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
How GitHub (no longer) Works
holman
312
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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