Reactのトレンドよくわからん

PWA Conference 2022 でのセッションの資料です。
https://conf2022.pwanight.jp/

Transcript

1. React
   ͷτϨϯυ
   Α͘Θ͔ΒΜ େԬ༝Ղʢ͘ΔΈׂΓॻ๪ʣ
2. 3FBDU
   ͸΋͏͙͢ొ৔͔Β
   
   प೥Λܴ͑ɺϑϩϯτΤϯυͷϑϨʔ ϜϫʔΫͱͯ͠͸ੈքతʹ΄΅Ұڧঢ়ଶͱͳ͍ͬͯ·͢ɻ͔ͦ͠͠ͷ มԽ͸ܹ͘͠ɺ
   ೥౰ॳͷ
   3FBDU
   ͱ
   
   ೥ݱࡏͷ
   3FBDU
   Ͱಉ ͡ͳͷ͸
   +49
   ͱԾ૝
   %0.
   Λ࢖͍ͬͯΔ͜ͱ͘Β͍Ͱɺ΄΅ผ΋ͷͱ ݴ͍͍ͬͯͰ͠ΐ͏ɻ
   ·ͨຊମҎ্ʹͦͷपลٕज़ͷྲྀߦΓഇΓ΋ܹ͘͠ɺͦͷτϨϯυΛ ݟޡΔͱকདྷతʹٕज़తෛ࠴ͷࢁ͕ੵΈ্͕ͬͯ͠·͏͜ͱʹͳΓ͔ Ͷ·ͤΜɻ
   ຊηογϣϯͰ͸͜Ε·Ͱͷ
   3FBDU
   ΤίγεςϜͷมભΛ;Γ͔͑ ΓɺࠓޙͷτϨϯυΛݟۃΊΔ໨Λཆ͏͜ͱΛ໨ࢦ͠·͢ɻ ຊηογϣϯ಺༰ͷ౰ॳͷઆ໌ IUUQTDPOGQXBOJHIUKQTQFBLFSPVLBZVLB
3. React
   ΤίγεςϜͷ 
 ࠓޙͷτϨϯυΛݟۃΊΔ ʜ͔͠͠ࢿྉΛ࡞Γ࢝ΊͯΈͯɺ௧ײ͠·ͨ͠ɻ ͜Ε͸ ແཧͩ
4. ೥͔Β໿೥ؒɺ3FBDU ҰຊͰ͓ۚΛ 
 Ք͍Ͱ͖ͨࢲͰ΋͜͏ࢥ͍·͢ɻ 3FBDU ͸τϨϯυͷҠΓมΘΓ͕ܹ͔ͬͨ͠Γɺ 
 ଞʹ΋ෆ࣮֬ཁૉ͕͍Ζ͍Ζ͋Γ͗ͯ͢ɺ 
 ͜ͷઌͲ͏ͳΔ͔ Α͘Θ͔ΒΜ
5. ͖͋ΒΊͪΌμϝͩ ϑϩϯτΤϯυͷੈքͰ΄΅Ұڧঢ়ଶͷ3FBDU ͱ 
 ࢲͨͪ͸͜ͷઌ΋͖͍͔ͭ͋ͬͯͳ͚Ε͹ͳΒͳ͍ɻ
   ͦ͜Ͱ͜ͷηογϣϯͰ͸ɺͦͷΑ͘Θ͔Βͳ͍ 3FBDUͷΘ͔Βͳ͞ΛҼ਺෼ղͯ͠Կ͕Θ͔Βͳ͍ 
 ͷ͔ΛΘ͔ΔΑ͏ʹ͢Δ͜ͱͰɺࠓޙ3FBDU ͕Ͳ͏ 
 มԽ͠Α͏ͱ΋͏·͘ରԠ͠ɺͦͷෆ࣮֬ੑʹཱͪ 
 ޲͔͑ΔྗΛཆ͍͍ͨɻཆ͑ͨΒ͍͍ͳ͋ɻ
6. ৽ਓͱઌഐͷର࿩ͰΘ͔Γ΍͘͢
   3FBDU
   ֶ͕΂Δͱධ൑ͷٕज़ಉਓࢽ 
 ʰΓ͋ΫτʂʱγϦʔζͷ࡞ऀɻ େԬ༝Ղ @oukayuka ࣗݾ঺հ
7. ReactΑ͘Θ͔Βͳ͍
   ϫʔετ̓
8. Ґ
   ຊମͷόʔδϣχϯά
9. ຊ౰ʹʁ IUUQTKBSFBDUKTPSHEPDTGBRWFSTJPOJOHIUNM
10. ެ։͞Εͨ࠷ॳͷόʔδϣϯ͕ ೥݄ɹ+4$POG
    64
    ʹͯΦʔϓϯιʔεԽ όʔδϣϯͷ͕࣍ͩͬͨ ೥݄ɹ͍͔ͭ͘ͷඇਪ঑ػೳ͕࡟আ )PPLT͕ಋೖ͞Εͨόʔδϣϯ͸ ೥݄ɹྺ࢙తͳେվมͳͷʹϚΠφʔϦϦʔεʜ ͸४උతόʔδϣϯͰ৽ػೳͳ͠ ೥݄ɹͷͨΊͷ౿ΈੴͳͷʹϝδϟʔϦϦʔε
11. Ґ
    ϩδοΫͷॻ͖ํ 
 มΘΓ͗͢
12. .JYJOTɹ೥ʙ೥ࠒ 3FBDUDSFBUF$MBTT ʹΑΔٖࣅΫϥείϯϙʔωϯτʹొ࿥͢Δ 
 ೥ʹඇਪ঑Ξφ΢ϯεɺ೥ʹഇࢭ )0$ ʢ)JHIFS
    0SEFS
    $PNQPOFOUʣ೥ʙ೥ࠒ ؔ਺ίϯϙʔωϯτʹΫϥείϯϙʔωϯτͰॻ͍ͨϩδοΫΛ߹੒͢Δ 
 ίϛϡχςΟओಋͰ޿·͕ͬͨɺ3FDPNQPTFͷऴᖼͱͱ΋ʹফ໓ 3FOEFS
    1SPQTɹ೥ʙ೥ࠒ )0$͕ؾʹೖΒͳ͔ͬͨެ͕ࣜ୅ସҊͱͯ͠ఏࣔ 
 3FBDU
    3PVUFS΍'PSNJLʹ΋ಋೖ͞Ε͕ͨɺ)PPLTͷొ৔ʹΑΓୀ৔ )PPLTɹ೥ʙݱࡏ ͔Βಋೖ͞Εͨؔ਺ίϯϙʔωϯτʹϩδοΫΛ௥Ճ͢Δػೳ 
 υϥεςΟοΫͳվมͳ͕ΒεϜʔζʹड͚ೖΕΒΕɺଞΛۦஞͨ͠
13. )PPLTొ৔Ҏ߱͸མͪண͍͓ͯΓɺίϯϙʔωϯτʹ 
 ϩδοΫΛ௥Ճ͢Δํ๏ΛͲ͏͢Δ͔೰Ή͜ͱ͸ͳ͘ͳͬͨɻ
    ͨͩ͠Ͱಋೖ͞Εͨ4VTQFOTFΛ࢖͏৔߹͸ɺඍົʹ 
 ॻ͖ํ͕มΘΔͷͰ஫ҙ͕ඞཁɻ ͦͷ΁Μৄ͍͜͠ͱ͕஌Γ͍ͨํ͸
    ʰΓ͋Ϋτʂ
    ᶅ3FBDUԠ༻ฤʱ
    Λ͝ࢀর͍ͩ͘͞ 🙇 IUUQTPVLBZVLBCPPUIQNJUFNT
14. Ґ
    ίΞνʔϜͷ 
 ݴޠ΁ͷͩ͜ΘΓ
15. 3FBDU͸೥݄ϦϦʔεͷόʔδϣϯ͔ΒܕνΣοΫ 
 ͷͨΊʹɺࣗࣾ։ൃϓϩμΫτͰ͋Δ'MPXΛಋೖͯ͠։ൃ͍ͯ͠Δɻ
    ͔͠͠౰࣌ɺ͢Ͱʹ5ZQF4DSJQU͕ϦϦʔεࡁΈͰόʔδϣϯ΋ 
 ·Ͱୡ͓ͯ͠Γɺ+4ίϛϡχςΟ͔Βߴ͍ධՁΛಘ͍ͯͨɻ
16. ະͩʹ5ZQF4DSJQUͷܕఆ͕ٛ%F fi OJUFMZ
    5ZQFEʹΑΔඇެࣜͳ΋ͷΛ࢖͏͔͠ͳ͍ ͦͷ͍ͤͰϢʔβʔ͕ඃΔඃ֐ ͔ͳΓଟ͘ͷݱ৔Ͱ5ZQF4DSJQU͕࢖ΘΕͯ 
 ͍ΔͷʹɺެࣜυΩϡϝϯτͷઆ໌͕ +BWB4DSJQUͷΈ
17. Ґ
    .FUB͕ग़͢ 
 पลϓϩμΫτ͕ऑ͍
18. 'MVY
    ʻʻʻʻʻɹ
    
    
    3FEVY 'MPX
    ʻʻʻʻʻʻʻɹɹ5ZQF4DSJQU 3FMBZ
    ʻʻʻʻɹɹ"QPMMP 'MVYΞʔΩςΫνϟঢ়ଶ؅ཧϥΠϒϥϦ ܕνΣοΧʔ (SBQI2-ΫϥΠΞϯτ 3FDPJM΋͚ͬ͜͏ඍົʜ ͜Ε·Ͱͷઓ੷
19. ΋ͱ΋ͱίΞϝϯόʔ͕࡞ऀͰ3FBDUͷ४ެࣜπʔϧνΣʔϯ ͱ΋ݴ͑Δ$SFBUF
    3FBDU
    "QQ͕์ஔঢ়ଶɻ
    .FUBࣾʹ͸ৗۈͷ୲౰ऀ͕͓ΒͣɺϓϩδΣΫτ͸͢Ͱʹ ʮϝϯςφϯεϞʔυʯͱͷ͜ͱɻ $SFBUF
    3FBDU
    "QQ
    śƂŦ
20. Ґ
    ϝλϑϨʔϜϫʔΫ 
 ࢖͏΂͖ʁ
21. /FYUKT ඈͿௗΛམͱ͢੎͍ͷ7FSDFMࣾ੡ɻ443ɾ44(ɾ*43ʹରԠɻ 
 ϑΝΠϧϕʔεͷϧʔςΟϯάɺը૾ͷ࠷దԽͳͲͷػೳΛ಺แɻ 3FNJY 3FBDU
    3PVUFSͷ࡞ऀਓ͕։ൃ͢Δ৽ਐؾӶͷϑϨʔϜϫʔΫɻ 
 443ઐ༻ͰɺαʔόͷڍಈΛࡉ੍͔͘ޚͰ͖Δɻ 3FEXPPE+4ɺ#MJU[KT 3BJMTʹ৮ൃ͞Εͨɺ03.·ͰؚΉϑϧελοΫͳϑϨʔϜϫʔΫɻ (BUTCZɺ"TUSP ੩తαΠτϏϧμʔɻ
22. Ґ
    .FUBࣾͷࠓޙ
23. $BNCSJEHF
    "OBMZUJDB
    ࣄ݅ ੑ֨਍அΞϓϦͰखʹೖΕͨϢʔβʔͱͦͷ༑ਓܭ ສ݅ͷݸਓ৘ใ͕ 
 ෆਖ਼ྲྀ༻͞Εɺ೥ͷถେ౷ྖબʹ͓͍ͯτϥϯϓਞӦ͕޿ࠂʹ׆༻ͨ͠ɻ 
 'BDFCPPL͸ͣ͞Μͳ৘ใ؅ཧΛࢦఠ͞Εɺ$&0͕ԼӃެௌձͰਘ໰͞Εͨɻ ௿Լ͠ଓ͚ΔϒϥϯυΠϝʔδ *OUFSCSBOE͕ࣾຖ೥ެ։͍ͯ͠Δ#FTU
    (MPCBM
    #SBOETͰɺ'BDFCPPL͸ 
 ೥ͷҐ͔Β೥ʹ͸Ґʹ·Ͱసམɻͳ͓Ґ͸"QQMFɺҐ͕ .JDSPTPGUɺҐ͕"NB[POɺҐ͕(PPHMFɻ ओཁϓϨʔϠʔͷ૬͙࣍ୀࣾ 8IBUT"QQ૑ۀऀͷ+BO
    ,PVN ʢ೥݄ʣ ɺ*OTUBHSBN૑ۀऀͷ,FWJO
    4ZTUSPN ʢ೥݄ʣ ɺ$00ͷ4IFSZM
    4BOECFSHʢ೥݄ʣ ۀ੷ͷ௿໎ɺϦετϥ גՁ͸Ұ࣌ظΑΓ௒Լམɺશैۀһͷ໿ˋʹ͋ͨΔສਓͷ࡟ݮΛൃදɻ
24. .FUBࣾʹۈ຿͍ͯ͠Δ͜ͱ͕Ո଒ɾ༑ਓ͔ΒΑ͘ࢥΘΕ 
 ͳ͚Ε͹ɺίΞνʔϜͷओཁϝϯόʔ΋͍ͣΕୀࣾΛߟ͑Δ 
 ͔΋͠Εͳ͍ɻ ͦΕͬͯ
    3FBDU
    ʹؔ܎͋Δʁ ೥͔Β'BDFCPPLʹۈ຿ɺॳظ͔Β3FBDUͷ։ൃʹ 
 ܞΘ͍ͬͯͨ4FCBTUJBO
    .BSLCÆHF͕7FSDFMʹస৬ɻ
    ଞʹ΋೥͔Βॴଐ͍ͯͨ͠ɺ+FTUͱ:BSOͷ࡞ऀͰ͋Δ $ISJTUPQI
    /BLB[BXB͕4USJQFʹస৬͍ͯ͠Δɻ
25. Ґ
    ঢ়ଶ؅ཧϥΠϒϥϦ 
 ͲΕ࢖͑͹͍͍ͷʁ
26. ࢖Θͳ͍ $POUFYU
    "1*ͷΈɺ΋͘͠͸VTF3FEVDFSΛ૊Έ߹Θ͕ͤͯΜ͹Δ 'MVYΞʔΩςΫνϟ ແ೉ͳηϯͳΒ3FEVYɺ΋ͬͱγϯϓϧʹॻ͖͚ͨΕ͹;VTUBOE "UPNΞʔΩςΫνϟ ձࣾϒϥϯυͳΒ3FDPJMɺॻ͖΍͢͞ͳΒ+PUBJ ΫΤϦΩϟογϡͱͯ͠ѻ͏ ଟػೳ͕͍͍ͳΒ5BO4UBDL
    2VFSZɺγϯϓϧ͕͍͍ͳΒ483
28. 3FBDU ͷΘ͔Βͳ͕͞গ͠Ͱ΋੔ཧͰ͖ͨ 
 Ͱ͠ΐ͏͔ʁ
    ͜Ε͚ͩෆ࣮֬ੑΛ๊͑ͳ͕ΒΑ͘͜͜ 
 ·ͰීٴͰ͖ͨ΋ͷͩͱࢥ͍·͕͢ɺٯʹ 
 ͜ͷෆ࣮֬ੑ͕Ͳ͔͜Ͱ3FBDUͷڧ͞ʹ 
 ͭͳ͕͍ͬͯΔͷ͔΋͠Ε·ͤΜɻ
    Α͘Θ͔Βͳ͍3FBDUͷมԽʹɺࠓޙ΋ 
 Ί͛ͣʹཱͪ޲͔͍͖ͬͯ·͠ΐ͏ɻ ૯ධ
29. ͓·͚
    ৘ใऩूͲ͏ͯ͠Δʁ
30. ͦͷिͷ3FBDUʹ·ͭΘΔτϐοΫΛ·ͱΊͯڭ͑ͯ͘ ΕΔαΠτɻ5XJUUFSͰ΋ൃ৴͍ͯ͠ΔͷͰɺࢲ͸ͦͪΒ ΛνΣοΫ͍ͯ͠Δɻ IUUQTUIJTXFFLJOSFBDUDPN !TFCBTUJFOMPSCFS IUUQTUXJUUFSDPNJDPNNVOJUJFT
31. +BWB4DSJQU
    ϥΠδϯάελʔ (JU)VCͷελʔ֫ಘ਺ʹΑΔ+4քͷτϨϯυΛຖ೥·ͱΊ͍ͯΔ ϞόΠϧ൛$ISPNF τοϓϖʔδʹϢʔβʔ͕޷͖ͦ͏ͳهࣄΛूΊ͖ͯͯ͘ΕΔͷͰɺ 
 ;ͩΜ͔Βͦ͏͍͏هࣄΛݟ͍ͯΕ͹࠷৽৘ใΛڭ͑ͯ͘ΕΔ ͦͷଞ 4UBUF
    PG
    +BWB4DSJQU ੈքதͷ։ൃऀ͔ΒΞϯέʔτΛͱͬͯ+4քͷτϨϯυΛ೥ʹճ 
 ·ͱΊ͍ͯΔ OQN
    USFOET OQNͷμ΢ϯϩʔυ਺ΛάϥϑͰࢹ֮ԽɺൺֱͰ͖ΔαΠτ