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
1.2k
来たるべき 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 使いじゃなくても知っておきたい教養としての React
oukayuka
21
6.3k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
48
18k
Reactのトレンドよくわからん
oukayuka
16
9.5k
とある個人開発 PWA の SEO 奮戦記
oukayuka
8
3k
Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 / Recompose Funeral March
oukayuka
3
5.9k
(Ruby使いのための)Scalaで学ぶ関数型プログラミング
oukayuka
0
340
Other Decks in Programming
See All in Programming
CSC509 Lecture 06
javiergs
PRO
0
270
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
610
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
540
Pythonに漸進的に型をつける
nealle
1
120
Catch Up: Go Style Guide Update
andpad
0
250
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
290
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
330
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
290
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.5k
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
Featured
See All Featured
Site-Speed That Sticks
csswizardry
13
920
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Being A Developer After 40
akosma
91
590k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Pragmatic Product Professional
lauravandoore
36
7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
GraphQLとの向き合い方2022年版
quramy
49
14k
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