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
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle...
Search
Yukiya Nakagawa
January 26, 2024
Technology
48
18k
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
Niigata 5分 Tech #4と、モニクル社の社内LT大会で喋ったやつです
https://niigata-5min-tech.connpass.com/event/307076/
Yukiya Nakagawa
January 26, 2024
Tweet
Share
More Decks by Yukiya Nakagawa
See All by Yukiya Nakagawa
Cloudflare Workers で作る専門性特化型 MCP サーバー / workers-specialist-mcp
nkzn
1
95
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
930
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.8k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3.9k
5分で流し読むCloudflare Developer Platform
nkzn
3
390
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
32
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.9k
青い空の歩き方 / Flying in the bluesky
nkzn
1
330
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
8.8k
Other Decks in Technology
See All in Technology
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
450
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
280
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
120
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
S3アクセス制御の設計ポイント
tommy0124
3
200
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
230
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
270
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
450
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Six Lessons from altMBA
skipperchong
28
4k
A designer walks into a library…
pauljervisheath
207
24k
Gamification - CAS2011
davidbonilla
81
5.4k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Scaling GitHub
holman
463
140k
Writing Fast Ruby
sferik
628
62k
Music & Morning Musume
bryan
46
6.8k
BBQ
matthewcrist
89
9.8k
Transcript
SPAの歴史と Remix SPAモードという到達点 Niigata 5分 Tech #4 Yukiya Nakagawa a.k.a
Nkzn
自己紹介 • 中川幸哉 a.k.a Nkzn(な ざん) • ‘86世代🐰の36歳(来月37になります) • 新潟生まれ新潟育ち
• 8歳と4歳の父で妻の夫 • 2011〜2021年は農業IT🌾の人 • 2021年 ら株式会社モニクル ◦ 資産運用 手伝いサービス「マネイロ」のIT裏方
SPAとは • Single Page ApplicationというWebアプリケーションの一形態 • [狭義] Webサイトに訪問したと にHTML +
CSS + JavaScriptを一 度だけダウンロードして、その後そのWebサイト内にいる間は、 バックグラウンドで簡単な通信(Ajax)は行うものの、画面をリ ロードせずに動 続けるやつ • システム上の特性としては、Webサイトの訪問によってメモリ上に インストールを行い、Webサイト ら出てい とアンインストール されるアプリ、みたいな抽象度で捉えてもいい
SPAで大抵必要になるもの • インフラ ◦ 静的ファイルの配信サーバー • ビルド ◦ 記述したJavaScript文法を動作 するJavaScript文法に変換する
トランスパイラー ◦ JavaScriptファイルをモジュー ルとしてモジュール間やライブ ラリ間の依存性解決を行い、適 切な粒度のファイルにまとめる バンドラー • 特殊な役割のライブラリ ◦ バックグラウンド通信 ▪ だいたいfetchでいい ◦ 画面の動的書 換え ▪ 今回の文脈ではReact ◦ 画面の動的書 換えとHistory (アドレスバー&履歴)を同期 させる画面遷移ライブラリ • サーバーサイドレンダリング(SSR) ◦ [狭義]外部 らのアクセスに対 し適切なHTMLを返せる仕組み
React向けSPAツールチェインの歴史
• 一通り自分で組んでいました • .babelrcと webpack.config.jsと を頑張って書いてた • Babel筋やwebpack筋という言葉 生まれた ◦
英語圏ではbebel-fuと webpack-fu(クンフーに由来) • SSRは気合いで小さなサーバーサイドアプリケーションを書 ビルド職人の朝は早い時代 トランスパイラー バンドラー 画面遷移 SSR Babel webpack React Router等 Express + JSDOM ※ browserifyやbower等は紀元前の歴史として割愛しました
• Create React Appという小さなフレームワーク 登場 • React 動いてビルドして れる •
画面遷移は自分で追加する必要あり • 設定ファイルを隠蔽しす てて使いづら った • SSRは気合いで小さなサーバーサイドアプリケーションを書 Create React App時代 トランスパイラー バンドラー 画面遷移 SSR (Babel) 隠蔽 (webpack) 隠蔽 React Router等 Express + JSDOM
• フォルダとファイルで画面遷移 組めるようになった • babelやwebpackの設定に介入するのもそれなりに容易で拡張性⭕ • SSRを前提としたフレームワークで厳密にはSPAではない • React Router
ビッグバンリリースでヘイトを貯めていたり、CRA の開発 遅 ったりしたこと ら、SSRの要否とは別の要因で導入 進んだ Next.js Pages Router時代前期 トランスパイラー バンドラー 画面遷移 SSR Babel webpack next/router 標準サポート
Vite登場 • 粒度としてはCreate React Appに近い • Vue向けのツールとして誕生した 、他プラットフォームにも対応 を進めて れたので足を向けて眠れない
• 後発だけあってSSR向けのプラグインも出て て手厚い • 相変わらず画面遷移は自前で入れる • Go製のesbuildでの開発時ビルド っそ早い トランスパイラー バンドラー 画面遷移 SSR esbuild + Rollup Rollup React Router等 Vike (vite-plugin-ssr)
• ビルドの速度面の不満をBabelやwebpackでは解決で な ったので 引越し • TurbopackはRust製webpack後継なので考え方は割と近いっぽい • Rust製のSWCでのビルド っそ早い
• もちろんSPAではないけど歴史的経緯で代わりに使う人 多い • next exportでSPAとしての出力もで んこともない Next.js Pages Router時代後期 トランスパイラー バンドラー 画面遷移 SSR SWC Turbopack next/router 標準サポート
• React Routerチーム 作ったNext.jsみたいなやつ • 学習コストを減らすためのアイデア た さん入って り、 これにインスパイアされる形でApp
Router 生まれている • 通信と画面遷移を高度に連携していて使い勝手 いい • Viteを使っている 、remix.config.jsで隠蔽されてて弄りづらい • これもサーバー 手厚いのでSPAではない Remix トランスパイラー バンドラー 画面遷移 SSR (Vite) 隠蔽 (Vite) 隠蔽 (React Router) 隠蔽 標準サポート
• Next.jsチーム 作ったRemixみたいなやつ • Meta社Reactチームと組んで、React Server Componentsという サーバーだけで実行するPHPみたいなReact(語弊)の実験場 初めての導入事例となる •
画面遷移や通信周りの考え方 そこそこ変わった • もうSPAでもなんでもないんだけど惰性で初手で選ぶ人も多い Next.js App Router トランスパイラー バンドラー 画面遷移 SSR SWC Turbopack next/navigation 標準サポート
いまここ Ima koko App Router Remix SPA
もう小さくSPAやる方法が Viteしかおらん
SPAやるならVite一択? • SSR いらない社内システムやBtoB向けのSaaSを作ってると に、 SSRを軸に設計されたフレームワークを使うのはtoo muchなので SPAで済ませたい • とはいえFile-system
based routing 意外と気持ちいいので、その ためだけに必要以上に重いNext.jsやRemixでプロジェクトを立ち上 げ ち • 画面遷移ライブラリ 上手いこと統合されたVite あればなあ
Remix SPA mode
• 別件でvite.config.jsを露出するモード で た(experimental) ◦ このモードではremix.config.jsは使用禁止 • サーバーに頼らずにブラウザだけの範囲で通信と画面遷移を統合さ せる方法も実装された(v2.5.0 clientLoader/clientAction)
• Vite製SPAの手厚いプラグインとして動作するRemix 生まれた • SSRした なったらSPAモードを外して普通のRemixになればいい Remix SPAモード (experimental) トランスパイラー バンドラー 画面遷移 SSR Vite Vite (React Router) 隠蔽 不要
通信と画面遷移が統合された Vite管理のSPA
長らく空席だった 業務用SaaSと相性のいい SPAフレームワーク
Remixは流行らなくてもいいけど Remix SPAモードは流行ってほしい
完