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
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の...
Search
Yuka O’oka
June 23, 2025
Programming
2
940
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Remix Tokyo Meetup 第5回 『Bring Your Own Talk』で LT した資料。
Yuka O’oka
June 23, 2025
Tweet
Share
More Decks by Yuka O’oka
See All by Yuka O’oka
Reactのトレンドよくわからん
oukayuka
15
9.2k
とある個人開発 PWA の SEO 奮戦記
oukayuka
8
2.9k
Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 / Recompose Funeral March
oukayuka
3
5.8k
(Ruby使いのための)Scalaで学ぶ関数型プログラミング
oukayuka
0
290
Other Decks in Programming
See All in Programming
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
Goで作る、開発・CI環境
sin392
0
260
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
1k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
140
NEWT Backend Evolution
xpromx
1
130
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
590
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
790
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
210
TypeScriptでDXを上げろ! Hono編
yusukebe
3
730
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Optimizing for Happiness
mojombo
379
70k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
4 Signs Your Business is Dying
shpigford
184
22k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How to Ace a Technical Interview
jacobian
278
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Transcript
େԬ༝Ղʢ͘ΔΈׂΓॻʣ དྷͨΔ͖ʹඋ͑ͯ 3FBDU ৽ػೳͱ 3FBDU3PVUFSݻ༗ػೳͷ औࣺબͱ͢Γ߹ΘͤΛߟ͑Δ
ࣗݾհ େԬ༝Ղ !PVLBZVLB ৽ਓͱઌഐͷରܗࣜͰΘ͔Γֶ͘͢Δ 3FBDUڭຊʰΓ͋ΫτʂʱγϦʔζͷ࡞ऀɻ ݱͷΤϯδχΞͷޱίϛͰධΛݺͼɺ γϦʔζྦྷܭച্ ෦Λಥഁʂ ࠷৽3FBDU ʹରԠɺ3FBDU3PVUFS
/FYUKTʹΑΔ࡞ྫΛ๛ʹܝࡌͨ͠ վగ ൛ΛʹϦϦʔεɻ IUUQTPVLBZVLBCPPUIQN Ͱൢചதʂ ˞3FNJY5PLZP ϝϯόʔʹߍਖ਼ʹ͝ڠྗ͍͖ͨͩ·ͨ͠ 🙇
3FBDU3PVUFS34$1SFWJFX w ͷ 34$ ରԠ͕ϓϨϏϡʔஈ֊ʹ w 34$'SPN-PBEFST w 4FSWFS$PNQPOFOU3PVUFTʢ4$3ʣ w
4FSWFS'VODUJPOT ʹಉ࣌ରԠ w 7JUF ͷ 34$ αϙʔτͪ ʢ҆ఆ൛ϦϦʔεW ͱͯ͠ޙʙॳ಄͝Ζʁʣ IUUQTSFNJYSVOCMPHSTDQSFWJFX
34$'SPN-PBEFST w loader() action() ͔ΒϨϯμ ϦϯάࡁΈͷ4FSWFS$PNQPOFOUT Λ3PVUF$PNQPOFOUʹͤΔ w ैདྷͷ
loader() action() ͔ΒฦͤΔ ͷσʔλͷΈͩͬͨͷ͕ɺ+49 ཁૉ ฦͤΔΑ͏ʹͳͬͨ w $MJFOU$PNQPOFOUTͷதʹ4FSWFS $PNQPOFOUT͕ຒΊࠐ·ΕΔ
4FSWFS$PNQPOFOU3PVUFTʢ4$3ʣ w 3PVUF$PNQPOFOUΛσϑΥϧτ ΤΫεϙʔτ͢ΔͷͰͳ͘ɺ ServerComponentͱ͍͏໊લͰΤΫ εϙʔτ͢Δͱ4FSWFS$PNQPOFOU ʹͳΔ w ͦͷϧʔτʹ͓͚ΔίϯϙʔωϯτπϦʔͰ4FSWFS$PNQPOFOUT͕ σϑΥϧτͱͳΓɺ$MJFOU$PNQPOFOUΛఆٛ͢Δʹ“use
client” σΟϨΫςΟϒ͕ඞཁʹͳΔ w 4$3 Ͱैདྷͱಉ༷ʹloader() action() ͕ఆٛՄೳ
4FSWFS'VODUJPOT w “use server” σΟϨΫςΟϒ͖ͭͷ ؔαʔόͰ࣮ߦ͞ΕΔ ➔ ैདྷ loader()
action() ͷΈ w 4FSWFS'VODUJPOT͕ݺͼग़͞ΕΔͱɺ ࣗಈతʹͦͷϧʔτΛSFWBMJEBUFͨ͠ ͏͑Ͱ6*͕ߋ৽͞ΕΔ ➔loader() ͷ࠶࣮ߦɺ34$πϦʔͷ ετϦʔϛϯά
Ͱ͜ΕΒͬͯ 33 ݻ༗ͷػೳͱڝ߹͢ΔͷͰʁ w loader()㲗4FSWFS$PNQPOFOUT w action()㲗4FSWFS'VODUJPOT IUUQTYDPNSZBO fl PSFODFTUBUVT
⋮
ͦͷଞ 3FBDU ຊମͱඃͬͯΔػೳকདྷతʹඇਪʹ IUUQTSFNJYSVOCMPHSSHPWFSOBODF
ࠓޙΛݟਾ͑ͯɺࣗͳΓͷઓུΛߟ͑ͨ কདྷͷ ٕज़తෛ࠴ %9 ӡ༻ίετ
3PVUF-PBEFSʼ34$ ௨ৗͷ 8FC ΞϓϦέʔγϣϯͰ 34$ ͕ 3PVUF-PBEFS ʹରͯ͠໌֬ͳ༏Ґੑ Λ࣋ͭέʔεݶఆతͳͨΊɺ-PBEFS ϑΝʔετͷઃܭʹ͢Δ
✅όϯυϧαΠζ͕ݮΒͤΔ ➔ͦ͜·ͰΧϦΧϦʹνϡʔχϯά͢Δඞཁੑ͋Δʁ ➔ॏྔڃͷσʔλՃܥMJCMPBEFSͰ͏ͷͰԸܙͳ͠ ✅ίϯϙʔωϯτͷ$PNQPTBCJMJUZ্͕ ➔8FCΞϓϦͰσʔλΛίϯϙʔωϯτʹด͡ࠐΊͯऴΘΓ ʹͳΔέʔεك ✅QSPQTͷόέπϦϨʔΛͳͤ͘Δ ➔దʹωετͨ͠ϧʔτͱuseRouteLoaderData()Λ͑ QSPQESJMMJOHൃੜ͠ͳ͍ 🚫ΩϟογϡઓུͷෳࡶԽ ➔/ ΥʔλʔϑΥʔϧ͕ൃੜ͍͢͠ 🚫ςελϏϦςΟͷԼ ➔୯ମɾ݁߹ςετ͕ࠔɻελΠϧΨΠυԽ͢Δʹ͍ ͍ͪͪ௨৴ϞοΫ͕ඞཁ 🚫3FNJY༝དྷͷγϯϓϧ͕ࣦ͞ΘΕΔ ➔ϧʔτϨϕϧʹσʔλϩδοΫΛू͠ɺίϯϙʔωϯ τΛडಈతʹอͭ͜ͱͰઃܭ͕γϯϓϧʹͳ͍ͬͯͨ
3PVUF"DUJPO㱡4FSWFS'VODUJPO w 4FSWFS'VODUJPOT 3PVUF"DUJPO ͷશͯͷػೳΛஔ͖͑Մೳ w ϧʔςΟϯάʹີ݁߹Ͱͳ͍ͨΊɺ࠶ར༻ੑ͕ߴ·Δ w loader()ˠ34$ͷΓସ͑ͱҟͳΓɺίϯϙʔωϯτઃܭΛ
େ͖͘ม͑Δඞཁ͕ͳ͍ 3FTPVSDF3PVUFTͷΈaction()Λ͍ɺଞͷ߹4FSWFS 'VODUJPOΛ͏ W Ҏ߱
'FUDIFSʻVTF"DUJPO4UBUFͦͷଞ w কདྷతʹ useFetcher() ഇࢭͷํʹ͔͍ͦ͏ IUUQTSFNJYSVOCMPHSSHPWFSOBODF w ͦͦ 'FUDIFS ༷͕ෳࡶͰɺίʔυͷՄಡੑΛԼ͛Δ
w 4FSWFS'VODUJPOT ͱͷ૬ੑ͕ෆ໌ ΞΫγϣϯͱͷ௨৴ʹ useActionState() Λܦ༝ͯ͠ϑΥʔϜͷ BDUJPO ϓϩύςΟΛ͍ɺָ؍త6*ʹ useOptimistic() Λ͏ W Ҏ߱
NFUB 㱡NFUB UJUMF w ެࣜυΩϡϝϯτͰ͍ͭͷ·ʹ͔ <meta> ͷ༻͕ਪ͞Εͯͨ w meta() ͷෳݺͼग़͠Ϛʔδ͞ΕΔ͕ɺ<meta>
<title> ୯७ʹλά͕ཏྻ͞ΕΔ ➔)5.-ͷ༷ͱͯ͠UJUMFͷॏෳهड़ҧɺNFUBಈ࡞อূ֎ ࠓޙ <meta> ͱ <title> Λ͏͕ɺॏෳ͠ͳ͍Α͏ʹҙ͖͢ ➔W ͰඇਪɺW Ͱআͷ ɹ༧ఆΒ͍͠ ࠓ͔Β
None