来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える

େԬ༝Ղʢ͘ΔΈׂΓॻ๪ʣ དྷͨΔ΂͖ʹඋ͑ͯ 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 ϑΝʔετͷઃܭʹ͢Δ
✅όϯυϧαΠζ͕ݮΒͤΔ ➔ͦ͜·ͰΧϦΧϦʹνϡʔχϯά͢Δඞཁੑ͋Δʁ ➔ॏྔڃͷσʔλՃ޻ܥMJC͸MPBEFS಺Ͱ࢖͏ͷͰԸܙͳ͠ ✅ίϯϙʔωϯτͷ$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 Ͱ࡟আͷ ɹ༧ఆΒ͍͠ ࠓ͔Β

来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の...

来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える

Yuka O’oka

More Decks by Yuka O’oka

Other Decks in Programming

Featured

Transcript

େԬ༝Ղʢ͘ΔΈׂΓॻ๪ʣ དྷͨΔ΂͖ʹඋ͑ͯ 3FBDU ৽ػೳͱ 3FBDU3PVUFSݻ༗ػೳͷ औࣺબ୒ͱ͢Γ߹ΘͤΛߟ͑Δ

ࣗݾ঺հ େԬ༝Ղ !PVLBZVLB ৽ਓͱઌഐͷର࿩ܗࣜͰΘ͔Γ΍ֶ͘͢΂Δ 3FBDUڭຊʰΓ͋ΫτʂʱγϦʔζͷ࡞ऀɻ ݱ৔ͷΤϯδχΞͷޱίϛͰධ൑Λݺͼɺ γϦʔζྦྷܭച্ ෦Λಥഁʂ ࠷৽3FBDU ʹରԠɺ3FBDU3PVUFS

3FBDU3PVUFS34$1SFWJFX w ଴๬ͷ 34$ ରԠ͕ϓϨϏϡʔஈ֊ʹ w 34$'SPN-PBEFST w 4FSWFS$PNQPOFOU3PVUFTʢ4$3ʣ w

34$'SPN-PBEFST w loader() action() ͔ΒϨϯμ ϦϯάࡁΈͷ4FSWFS$PNQPOFOUT Λ3PVUF$PNQPOFOUʹ౉ͤΔ w ैདྷͷ

4FSWFS$PNQPOFOU3PVUFTʢ4$3ʣ w 3PVUF$PNQPOFOUΛσϑΥϧτ ΤΫεϙʔτ͢ΔͷͰ͸ͳ͘ɺ ServerComponentͱ͍͏໊લͰΤΫ εϙʔτ͢Δͱ4FSWFS$PNQPOFOU ʹͳΔ w ͦͷϧʔτʹ͓͚ΔίϯϙʔωϯτπϦʔͰ͸4FSWFS$PNQPOFOUT͕ σϑΥϧτͱͳΓɺ$MJFOU$PNQPOFOUΛఆٛ͢Δʹ͸“use

4FSWFS'VODUJPOT w “use server” σΟϨΫςΟϒ͖ͭͷ ؔ਺͸αʔόͰ࣮ߦ͞ΕΔ ➔ ैདྷ͸ loader()

Ͱ΋͜ΕΒͬͯ 33 ݻ༗ͷػೳͱڝ߹͢ΔͷͰ͸ʁ w loader()㲗4FSWFS$PNQPOFOUT w action()㲗4FSWFS'VODUJPOT IUUQTYDPNSZBO fl PSFODFTUBUVT

ͦͷଞ 3FBDU ຊମͱඃͬͯΔػೳ͸কདྷతʹ͸ඇਪ঑ʹ IUUQTSFNJYSVOCMPHSSHPWFSOBODF

ࠓޙΛݟਾ͑ͯɺࣗ෼ͳΓͷઓུΛߟ͑ͨ কདྷͷ ٕज़తෛ࠴ %9 ӡ༻ίετ

3PVUF-PBEFSʼ34$ ௨ৗͷ 8FC ΞϓϦέʔγϣϯͰ͸ 34$ ͕ 3PVUF-PBEFS ʹରͯ͠໌֬ͳ༏Ґੑ Λ࣋ͭέʔε͸ݶఆతͳͨΊɺ-PBEFS ϑΝʔετͷઃܭʹ͢Δ

3PVUF"DUJPO㱡4FSWFS'VODUJPO w 4FSWFS'VODUJPOT ͸ 3PVUF"DUJPO ͷશͯͷػೳΛஔ͖׵͑Մೳ w ϧʔςΟϯάʹີ݁߹Ͱ͸ͳ͍ͨΊɺ࠶ར༻ੑ͕ߴ·Δ w loader()ˠ34$΁ͷ੾Γସ͑ͱҟͳΓɺίϯϙʔωϯτઃܭΛ

'FUDIFSʻVTF"DUJPO4UBUFͦͷଞ w কདྷతʹ͸ useFetcher() ͸ഇࢭͷํ޲ʹ޲͔͍ͦ͏ IUUQTSFNJYSVOCMPHSSHPWFSOBODF w ͦ΋ͦ΋ 'FUDIFS ͸࢓༷͕ෳࡶͰɺίʔυͷՄಡੑΛԼ͛Δ

NFUB 㱡NFUB UJUMF w ެࣜυΩϡϝϯτͰ͍ͭͷ·ʹ͔ <meta> ͷ࢖༻͕ਪ঑͞Εͯͨ w meta() ͷෳ਺ݺͼग़͠͸Ϛʔδ͞ΕΔ͕ɺ<meta>