React は次の10年を生き残れるか：3つのトレンドから考える

React Tokyo ミートアップ #7 のメイントークのスライド。
https://react-tokyo.connpass.com/event/358171/

Transcript

1. େԬ
   ༝Ղʢ͘ΔΈׂΓॻ๪ʣ 3FBDU
   ͸࣍ͷ೥Λ
   ੜ͖࢒ΕΔ͔ ͭͷτϨϯυ͔Βߟ͑Δ
2. ೥ݱࡏɺ3FBDU
   ͷμ΢ϯϩʔυ਺͸Ϳͬͪ͗Γ npm trends, Jul. 2025
3. +4
   ։ൃऀʹΑΔγΣΞͰ΋೥Ҏ্τοϓΛҡ࣋ State of JavaScript 2024: Front-end Frameworks
4. ͜ͷ஍Ґ͸͜Ε͔Βઌ΋൫ੴ͔ 🔹ʮ޷ࣄຐଟ͠ʢ͜͏͡·͓͓͠ʣʯ ҙຯɿ෺ࣄ͕͏·͍͍ͬͯ͘Δͱ͖΄ͲɺࢥΘ͵ࡂ͍΍๦͕͛ ى͜Γ΍͍͢ɻ 🔹ʮཅۃ·Ε͹ӄʹసͣʢΑ͏͖Θ·Ε͹͍ΜʹͯΜͣʣʯ ҙຯɿ෺ࣄ͕ۃ୺ͳঢ়ଶʹୡ͢Δͱɺͦͷ൓స͕ى͜Δͱ͍͏ ͜ͱɻ౦༸ࢥ૝ʹ͓͚Δӄཅ࿦ʹج͍ͮͨݴ༿ɻ
5. ຊ೔ͷςʔϚ 3FBDU
   ͕όʔδϣϯ
   
   ͱͯ͠ॳΊͯެ։͞Εͨͷ͸
   ೥
   ݄ɻ
   ʮ೥ʹҰ౓ݱΕΔήʔϜνΣϯδϟʔʯͱݴΘΕͭͭɺొ৔͔Β΋͏೥ɻ
   ϑϩϯτΤϯυϑϨʔϜϫʔΫͱͯ͠͸ѹ౗తͳγΣΞΛތΔ
   3FBDU
   ͕ͩɺ
   ͦ͜ʹ໡఺͸ͳ͍ͷ͔ɻ
   3FBDU
   ͕ਐΜͰ͍Δํ޲͸ਖ਼͍͠ͷ͔ʁɹ
   ஌Βͳ͍಺ʹτϨϯυ͔ΒऔΓ࢒͞Ε͍ͯͳ͍͔ʁ
   ͦΕΛߟ࡯͍͖͍ͯͨ͠ɻ
6. ࣗݾ঺հ େԬ
   ༝Ղ !PVLBZVLB ৽ਓͱઌഐͷର࿩ܗࣜͰΘ͔Γ΍ֶ͘͢΂Δ
   3FBDU
   ڭຊʰΓ͋ΫτʂʱγϦʔζͷ࡞ऀɻ ݱ৔ͷΤϯδχΞͷޱίϛͰධ൑Λݺͼɺ
   γϦʔζྦྷܭച্
   ສઍ෦
   Λಥഁʂ ࠷৽
   3FBDU
   
   ʹରԠɺ3FBDU
   3PVUFS
   
   ΍
   /FYUKT
   ʹΑΔ࡞ྫΛ๛෋ʹܝࡌͨ͠
   վగ
   
   ൛Λ
   
   ʹϦϦʔεɻ IUUQTPVLBZVLBCPPUIQN Ͱൢചதʂ ˞
   3FBDU
   5PLZP
   ϝϯόʔʹ΋ߍਖ਼ʹ͝ڠྗ͍͖ͨͩ·ͨ͠ 🙇 ങͬͯͶ ͓͓
   ͓͔
   
   
   
   Ώɹ͔
7. ࠓ౓͜Μͳηογϣϯ΋΍Γ·͢ IUUQTXBLFDBSFFSDPOOQBTTDPNFWFOU
8. KTGSBNFXPSLCFODINBSL
   Λ͝ଘ஌Ͱ͔͢ʁ IUUQTHJUIVCDPNLSBVTFTUKTGSBNFXPSLCFODINBSL ͜Ε͸
   ෳ਺ͷ
   +BWB4DSJQU
   ϑϨʔϜϫʔΫʢ
   छ ྨʣΛର৅ͱͨ͠γϯϓϧͳϕϯνϚʔΫͰ͢ɻ͜ͷ ϕϯνϚʔΫͰ͸ɺϥϯμϜԽ͞ΕͨΤϯτϦΛؚΉ େ͖ͳςʔϒϧʢ ߦʣΛ࡞੒͠ɺϨϯμϦϯά ࣌ؒΛؚΉ༷ʑͳૢ࡞ʹ͔͔Δ࣌ؒΛଌఆ͠·͢ɻ
9. ϦΞΫςΟϏςΟͷύϑΥʔϚϯε ⋮
10. ϝϞϦޮ཰ ⋮
11. సૹαΠζ
12. ݁࿦ɿ 3FBDU
    ͷύϑΥʔϚϯε͸
    ओཁϑϨʔϜϫʔΫͷதͰ͸
    ΄΅
    ࠷ԼҐ
    ͷ෦ྨ
13. ଞͷϑϨʔϜϫʔΫͷؒͰ޿͕͍ͬͯΔτϨϯυ͔Β
    3FBDU
    ͕औΓ࢒͞Ε͍ͯΔɻ
    3FBDU
    ͷΞʔΩςΫνϟ͸ެ։౰࣌͸ֵ৽తͰɺଞͷϑϨʔϜϫʔΫ͕ͧͬͯ͜
    ௥ਵͨ͠ɻ
    ͔ͦ͠͠ͷޙͷ
    3FBDU
    Ҏ֎͔Βੜ·ΕͨΠϊϕʔγϣϯ͕ଞͷϑϨʔϜϫʔΫʹ
    ޿·Δ͍ͬΆ͏ɺ3FBDU
    ͸ͦΕʹ௥ਵͤͣզ͕ಓΛาΜͰ͍ΔͨΊɺޙൃʹͲΜ
    ͲΜൈ͔Εͯݱࡏͷϙδγϣϯʹ·Ͱసམͨ͠ɻ
    ͳͥͳͷ͔ʁ
14. ͻͱͭΊͷτϨϯυ 4JHOBMT ʢ'JOF(SBJOFE
    3FBDUJWJUZʣ
15. Ծ૝
    %0.
    ͸஗͍ʁ wԾ૝
    %0.
    πϦʔͷอ࣋͸ϝϞϦ࢖༻ྔΛ૿Ճͤ͞Δ
    wॳճϨϯμϦϯά࣌ͷπϦʔߏஙɺ࠶ϨϯμϦϯά࣌ͷࠩ෼ݕग़ͷܭࢉίετ
16. 4PMJE+4
    ͕ൃ໌ͨ͠
    4JHOBMT
    ͱ͸ wίϯϙʔωϯτͷ࠶ϨϯμϦϯάΛཁͣ͞ɺ6*
    ΛϐϯϙΠϯτͰมߋ͢Δ
    w஋ͷมߋ͕ଈ࠲ʹ
    6*
    ʹ൓ө͞ΕΔ
    
    wґଘͷ௥੻͕શࣗಈʢ˞
    3FBDU
    ͷΑ͏ͳґଘ഑ྻͷઃఆ͕ෆඞཁʣ
    wuseStateɺuseEffect
    ϥΠΫͳΠϯλʔϑΣʔε Ծ૝
    %0.
    Λ༻͍ͣɺ͖Ίࡉ΍͔ͳϦΞΫςΟϏςΟΛ࣮ݱ͢Δ͘͠Έ (fine-grained)
17. !QSFBDUTJHOBMT
18. 4JHOBMT
    ͷ։ൃऀମݧͷΑ͞ w࠶ϨϯμϦϯάͷ৚݅ɺґଘ഑ྻɺϝϞԽͷٞ࿦͔Β։์͞ΕΔ
    wʮίϯϙʔωϯτͷதͰͷΈ࢖༻Մʯʮ੍ޚߏจͷதͰ͸࢖༻ෆՄʯ ͷΑ͏ͳ
    3VMFT
    PG
    )PPLT
    ʹറΒΕͳ͍
    wίϯϙʔωϯτͷதͰ΋֎Ͱ΋ؔ܎ͳ͘࢖͑ΔͷͰɺάϩʔόϧͳ
    ঢ়ଶ؅ཧʹ΋ར༻Ͱ͖Δ
19. 3FBDU
    Ҏ֎͸
    4JHOBMT
    ΛಋೖࡁΈʗಋೖ༧ఆ w 1SFBDUʢ
    ೥
    
    ݄ɺ!QSFBDUTJHOBMTʣ
    w 2XJL
    Wʢ
    ೥
    
    ݄ʣ
    w "OHVMBS
    Wʢ
    ೥
    
    ݄ʣ
    w -JUʢ
    ೥݄ɺ!MJUMBCTTJHOBMTʣ
    w 4WFMUF
    Wʢ
    ೥݄ʣ
    w 7VFKT
    7BQPS
    .PEFʢ։ൃதʣ
20. 3FBDU
    ͸Ͳ͏ͳͷʁ wٞ࿦͸ఏى͞Ε͍ͯΔ͕ɺ·ͩԿ΋ਐల͍ͯ͠Ͱͳ͍
    w3FBDU
    $PNQJMFS
    ʹ஫ྗ͍ͯ͠ΔͨΊɺ௚ۙͰ͸ಋೖͦ͠͏ʹͳ͍
    w!QSFBDUTJHOBMTSFBDU
    ͕͍͓ͪ͏࢖͑Δ͕ʜʜ
21. ;ͨͭΊͷτϨϯυ ;FSP3VOUJNF
22. ͳͥ͜Μͳʹ͕ࠩ͋Δͷ͔ʁ
23. 3FBDU
    ͷసૹαΠζ͕େ͖͍ཧ༝ w࠷ॳʹେྔͷϥϯλΠϜίʔυΛؙ͝ͱૹΔઃܭ
    wԾ૝
    %0.
    ߏங͓Αͼࠩ෼ݕग़γεςϜɺεέδϡʔϥͳͲ
    ࠷௿ݶͷಈ࡞ʹඞཁͳίʔυ͕ඇৗʹଟ͍
    wޙํޓ׵ੑΛ༏ઌͯ͠ɺաڈͷ
    "1*
    ʹґଘͨ͠ϨΨγʔͳίʔυΛ
    ࣺ͖ͯΕ͍ͯͳ͍
24. 4WFMUF
    ͸ίϯύΠϥ wϏϧυ࣌ʹ
    4WFMUF
    ίϯϙʔωϯτΛ७ਮͳ
    +BWB4DSJQU
    ʹม׵
    wϑϨʔϜϫʔΫݻ༗ͷϥϯλΠϜίʔυΛ΄ͱΜͲؚ·ͳ͍
25. 4WFMUF
    Ξϓϩʔνͷ௥ਵऀ w4PMJE+4
    w2XJL
    w7VFKT
    7BQPS
    .PEFʢ։ൃதʣ ˞
    ίϯύΠϧ͸͢Δ͕ɺ࠷খݶͷϥϯλΠϜΛอ࣋
26. 3FBDU
    ͸Ͳ͏ͳͷʁ wͦΕ͔ΒԿͷԻࠫଡ΋ͳ͍ͷͰɺࠓޙ΋ಋೖ͞ΕΔ͜ͱ͸ͳͦ͞͏
    wͰͳ͚Ε͹ࣗಈϝϞԽπʔϧʹʮ3FBDU
    $PNQJMFSʯͱ͍͏
    ໊લ͸͚ͭͳ͍ΑͶʜ w)PPLT
    ϦϦʔε௚ޙ͸͜Μͳ͜ͱ΋ݴ͍ͬͯͨ
27. ΈͬͭΊͷτϨϯυ ;FSP
    +BWB4DSJQU
28. ;FSP
    +BWB4DSJQU
    ΛചΓʹ͢ΔϑϨʔϜϫʔΫ
29. ʮ;FSP
    +BWB4DSJQUʯͱ͸ɺϒϥ΢βʹૹ৴͞ΕΔ
    +BWB4DSJQU
    ίʔυ͕
    σϑΥϧτͰθϩͱ͍͏͜ͱɻͦͷඞཁ͕ͳ͍ͷʹ
    +BWB4DSJQU
    ίʔυΛ
    ૹΓ͚ͭͯ
    )ZESBUJPO
    ͠ͳ͍ɻ
    ϖʔδ͸αʔόͰϨϯμϦϯά͞Εɺ੩తͳ
    )5.-
    ͱ
    $44
    ͚͕ͩಧ͘ɻ
    +BWB4DSJQU
    ͕ඞཁͳγʔϯͰ͸ɺ։ൃऀ͕໌ࣔతʹΦϓτΠϯͨ͠෦෼
    ͚ͩΛݸผʹ഑৴͢Δʢ˞ޙड़ʣ +4
    ϑϨʔϜϫʔΫͰ
    +4
    Λθϩʹ͢Δͱ͸ʁ
30. *TMBOET
    "SDIJUFDUVSF ੩తͳίϯϙʔωϯτ܈ͷதʹɺಈతͳཁૉ
    ΛؚΉίϯϙʔωϯτΛͦ͜ʹු͔Ϳʮౡʯ
    ͱͯ͠ಠཱͤ͞ɺݸผʹඞཁͳ
    )ZESBUJPO
    Λߦ͏ઃܭύλʔϯɻ
    ഑৴ɾ࣮ߦ͞ΕΔ
    +BWB4DSJQU
    ͕খ͍ͨ͞Ίɺ ίϯςϯπओಋܕͷαΠτʹ͓͍ͯ͸ѹ౗త
    ͳύϑΥʔϚϯεΛൃش͢Δɻ
31. 2XJL 3FTVNBCMF
    ͱ͸ʁ ॳظϩʔυ࣌͸
    L#
    ΄ͲͷϥϯλΠϜ͚ͩΛμ΢ϯϩʔυɻϢʔβʔૢ࡞͕ى ͖ͨॠؒʹ͚ͩඞཁίʔυΛऔΓدͤͯॲཧΛ࠶։͢Δٕज़ɻ
    )ZESBUJPO
    Λ׬શʹഉআɻཁૉΛΫϦοΫͨ͠ͱ͖ͳͲʹɺνϟϯΫԽ͞Εͨ ࠷খݶͷ
    +BWB4DSJQU
    ίʔυ͕μ΢ϯϩʔυ͞Ε࣮ߦ͞ΕΔɻ
    ͋ΒΏΔλΠϓͷ
    8FC
    ΞϓϦέʔγϣϯʹରԠͨ͠ɺΦʔόϔουΛۃݶʹ· Ͱ࠷খԽͰ͖ΔΞʔΩςΫνϟɻ
32. 3FBDU
    ͸Ͳ͏ͳͷʁ 4FMFDUJWF
    )ZESBUJPOʢඞཁͳ෦෼͔Βͷॱ࣍ϋΠυϨʔγϣϯʣɺ 4USFBNJOH
    )5.-ʢ)5.-
    Λ෼ׂɺॱ࣍ૹ৴ʣ͸
    3FBDU
    
    ʹͯ
    ରԠࡁΈɻ
    ͦΕҎ্ͷ͜ͱ͸ϨΨγʔίʔυͱͷ݉Ͷ߹͍΍ɺ%9
    ΁ͷѱӨڹ͕ ߟ͑ΒΕΔͨΊকདྷతͳಋೖͷՄೳੑ͸ɺ΄΅θϩͩΖ͏ɻ
33. 3FBDU
    ͷࠓޙ ύϑΥʔϚϯεͰѹ౗తʹྼΔ
    3FBDU
    ͕τοϓΛҡ࣋Ͱ͖͍ͯΔͷ ͸ɺύϑΥʔϚϯεΑΓ
    %9
    Λ༏ઌͤ͞Δ࢟੎͕։ൃऀʹࢧ࣋͞Εͯ ͖ͨͨΊɻ
    ͔͠͠࠷ۙͷ
    3FBDU
    ͸
    34$
    ͳͲɺෳࡶ͞Λ૿͠ͳ͕ΒҰൠͷ։ൃऀ ʹͱͬͯͷ
    %9
    ޲্ʹ͸ԿΒߩݙ͠ͳ͍ٕज़ͷಋೖʹ݂ಓΛ্͛ͯ
    ͍Δɻ
    ύϑΥʔϚϯεͰѹ౗͢Δ৽ਐͷϑϨʔϜϫʔΫ͕
    %9
    Ͱ΋௥͍͍ͭ ͖ͯͨͱ͖ɺ͸ͨͯ͠
    3FBDU
    ͷԦ࠲͸҆ହͰ͍ΒΕΔͷ͔ɻ