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

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

Transcript

1. ReactͷτϨϯυ
   Α͘Θ͔ΒΜ
   େԬ༝Ղʢ͘ΔΈׂΓॻ๪ʣ
   

   View Slide

2. 3FBDU͸΋͏͙͢ొ৔͔Βप೥Λܴ͑ɺϑϩϯτΤϯυͷϑϨʔ
   ϜϫʔΫͱͯ͠͸ੈքతʹ΄΅Ұڧঢ়ଶͱͳ͍ͬͯ·͢ɻ͔ͦ͠͠ͷ
   มԽ͸ܹ͘͠ɺ೥౰ॳͷ3FBDUͱ೥ݱࡏͷ3FBDUͰಉ
   ͡ͳͷ͸+49ͱԾ૝%0.Λ࢖͍ͬͯΔ͜ͱ͘Β͍Ͱɺ΄΅ผ΋ͷͱ
   ݴ͍͍ͬͯͰ͠ΐ͏ɻ
   ·ͨຊମҎ্ʹͦͷपลٕज़ͷྲྀߦΓഇΓ΋ܹ͘͠ɺͦͷτϨϯυΛ
   ݟޡΔͱকདྷతʹٕज़తෛ࠴ͷࢁ͕ੵΈ্͕ͬͯ͠·͏͜ͱʹͳΓ͔
   Ͷ·ͤΜɻ
   ຊηογϣϯͰ͸͜Ε·Ͱͷ3FBDUΤίγεςϜͷมભΛ;Γ͔͑
   ΓɺࠓޙͷτϨϯυΛݟۃΊΔ໨Λཆ͏͜ͱΛ໨ࢦ͠·͢ɻ
   ຊηογϣϯ಺༰ͷ౰ॳͷઆ໌
   IUUQTDPOGQXBOJHIUKQTQFBLFSPVLBZVLB
   

   View Slide

3. ReactΤίγεςϜͷ
   

   ࠓޙͷτϨϯυΛݟۃΊΔ
   ʜ͔͠͠ࢿྉΛ࡞Γ࢝ΊͯΈͯɺ௧ײ͠·ͨ͠ɻ
   ͜Ε͸
   ແཧͩ
   

   View Slide

4. ೥͔Β໿೥ؒɺ3FBDU ҰຊͰ͓ۚΛ
   

   Ք͍Ͱ͖ͨࢲͰ΋͜͏ࢥ͍·͢ɻ
   3FBDU ͸τϨϯυͷҠΓมΘΓ͕ܹ͔ͬͨ͠Γɺ
   

   ଞʹ΋ෆ࣮֬ཁૉ͕͍Ζ͍Ζ͋Γ͗ͯ͢ɺ
   

   ͜ͷઌͲ͏ͳΔ͔
   Α͘Θ͔ΒΜ
   

   View Slide

5. ͖͋ΒΊͪΌμϝͩ
   ϑϩϯτΤϯυͷੈքͰ΄΅Ұڧঢ়ଶͷ3FBDU ͱ
   

   ࢲͨͪ͸͜ͷઌ΋͖͍͔ͭ͋ͬͯͳ͚Ε͹ͳΒͳ͍ɻ
   ͦ͜Ͱ͜ͷηογϣϯͰ͸ɺͦͷΑ͘Θ͔Βͳ͍
   3FBDUͷΘ͔Βͳ͞ΛҼ਺෼ղͯ͠Կ͕Θ͔Βͳ͍
   

   ͷ͔ΛΘ͔ΔΑ͏ʹ͢Δ͜ͱͰɺࠓޙ3FBDU ͕Ͳ͏
   

   มԽ͠Α͏ͱ΋͏·͘ରԠ͠ɺͦͷෆ࣮֬ੑʹཱͪ
   

   ޲͔͑ΔྗΛཆ͍͍ͨɻཆ͑ͨΒ͍͍ͳ͋ɻ
   

   View Slide

6. ৽ਓͱઌഐͷର࿩ͰΘ͔Γ΍͘͢
   3FBDUֶ͕΂Δͱධ൑ͷٕज़ಉਓࢽ
   

   ʰΓ͋ΫτʂʱγϦʔζͷ࡞ऀɻ
   େԬ༝Ղ @oukayuka
   ࣗݾ঺հ
   

   View Slide

7. ReactΑ͘Θ͔Βͳ͍
   ϫʔετ̓
   

   View Slide

8. Ґ
   ຊମͷόʔδϣχϯά
   

   View Slide

9. ຊ౰ʹʁ
   IUUQTKBSFBDUKTPSHEPDTGBRWFSTJPOJOHIUNM
   

   View Slide

10. ެ։͞Εͨ࠷ॳͷόʔδϣϯ͕
    ೥݄ɹ+4$POG64ʹͯΦʔϓϯιʔεԽ
    όʔδϣϯͷ͕࣍ͩͬͨ
    ೥݄ɹ͍͔ͭ͘ͷඇਪ঑ػೳ͕࡟আ
    )PPLT͕ಋೖ͞Εͨόʔδϣϯ͸
    ೥݄ɹྺ࢙తͳେվมͳͷʹϚΠφʔϦϦʔεʜ
    ͸४උతόʔδϣϯͰ৽ػೳͳ͠
    ೥݄ɹͷͨΊͷ౿ΈੴͳͷʹϝδϟʔϦϦʔε
    

    View Slide

11. Ґ
    ϩδοΫͷॻ͖ํ
    

    มΘΓ͗͢
    

    View Slide

12. .JYJOTɹ೥ʙ೥ࠒ
    3FBDUDSFBUF$MBTT
    ʹΑΔٖࣅΫϥείϯϙʔωϯτʹొ࿥͢Δ
    

    ೥ʹඇਪ঑Ξφ΢ϯεɺ೥ʹഇࢭ
    )0$
    ʢ)JHIFS0SEFS$PNQPOFOUʣ೥ʙ೥ࠒ
    ؔ਺ίϯϙʔωϯτʹΫϥείϯϙʔωϯτͰॻ͍ͨϩδοΫΛ߹੒͢Δ
    

    ίϛϡχςΟओಋͰ޿·͕ͬͨɺ3FDPNQPTFͷऴᖼͱͱ΋ʹফ໓
    3FOEFS1SPQTɹ೥ʙ೥ࠒ
    )0$͕ؾʹೖΒͳ͔ͬͨެ͕ࣜ୅ସҊͱͯ͠ఏࣔ
    

    3FBDU3PVUFS΍'PSNJLʹ΋ಋೖ͞Ε͕ͨɺ)PPLTͷొ৔ʹΑΓୀ৔
    )PPLTɹ೥ʙݱࡏ
    ͔Βಋೖ͞Εͨؔ਺ίϯϙʔωϯτʹϩδοΫΛ௥Ճ͢Δػೳ
    

    υϥεςΟοΫͳվมͳ͕ΒεϜʔζʹड͚ೖΕΒΕɺଞΛۦஞͨ͠
    

    View Slide

13. )PPLTొ৔Ҏ߱͸མͪண͍͓ͯΓɺίϯϙʔωϯτʹ
    

    ϩδοΫΛ௥Ճ͢Δํ๏ΛͲ͏͢Δ͔೰Ή͜ͱ͸ͳ͘ͳͬͨɻ
    ͨͩ͠Ͱಋೖ͞Εͨ4VTQFOTFΛ࢖͏৔߹͸ɺඍົʹ
    

    ॻ͖ํ͕มΘΔͷͰ஫ҙ͕ඞཁɻ
    ͦͷ΁Μৄ͍͜͠ͱ͕஌Γ͍ͨํ͸
    ʰΓ͋Ϋτʂᶅ3FBDUԠ༻ฤʱ
    Λ͝ࢀর͍ͩ͘͞
    🙇
    IUUQTPVLBZVLBCPPUIQNJUFNT
    

    View Slide

14. Ґ
    ίΞνʔϜͷ
    

    ݴޠ΁ͷͩ͜ΘΓ
    

    View Slide

15. 3FBDU͸೥݄ϦϦʔεͷόʔδϣϯ͔ΒܕνΣοΫ
    

    ͷͨΊʹɺࣗࣾ։ൃϓϩμΫτͰ͋Δ'MPXΛಋೖͯ͠։ൃ͍ͯ͠Δɻ
    ͔͠͠౰࣌ɺ͢Ͱʹ5ZQF4DSJQU͕ϦϦʔεࡁΈͰόʔδϣϯ΋
    

    ·Ͱୡ͓ͯ͠Γɺ+4ίϛϡχςΟ͔Βߴ͍ධՁΛಘ͍ͯͨɻ
    

    View Slide

16. ະͩʹ5ZQF4DSJQUͷܕఆ͕ٛ%F
    fi
    OJUFMZ
    5ZQFEʹΑΔඇެࣜͳ΋ͷΛ࢖͏͔͠ͳ͍
    ͦͷ͍ͤͰϢʔβʔ͕ඃΔඃ֐
    ͔ͳΓଟ͘ͷݱ৔Ͱ5ZQF4DSJQU͕࢖ΘΕͯ
    

    ͍ΔͷʹɺެࣜυΩϡϝϯτͷઆ໌͕
    +BWB4DSJQUͷΈ
    

    View Slide

17. Ґ
    .FUB͕ग़͢
    

    पลϓϩμΫτ͕ऑ͍
    

    View Slide

18. 'MVYʻʻʻʻʻɹ3FEVY
    'MPXʻʻʻʻʻʻʻɹɹ5ZQF4DSJQU
    3FMBZʻʻʻʻɹɹ"QPMMP
    'MVYΞʔΩςΫνϟঢ়ଶ؅ཧϥΠϒϥϦ
    ܕνΣοΧʔ
    (SBQI2-ΫϥΠΞϯτ
    3FDPJM΋͚ͬ͜͏ඍົʜ
    ͜Ε·Ͱͷઓ੷
    

    View Slide

19. ΋ͱ΋ͱίΞϝϯόʔ͕࡞ऀͰ3FBDUͷ४ެࣜπʔϧνΣʔϯ
    ͱ΋ݴ͑Δ$SFBUF3FBDU"QQ͕์ஔঢ়ଶɻ
    .FUBࣾʹ͸ৗۈͷ୲౰ऀ͕͓ΒͣɺϓϩδΣΫτ͸͢Ͱʹ
    ʮϝϯςφϯεϞʔυʯͱͷ͜ͱɻ
    $SFBUF3FBDU"QQśƂŦ
    

    View Slide

20. Ґ
    ϝλϑϨʔϜϫʔΫ
    

    ࢖͏΂͖ʁ
    

    View Slide

21. /FYUKT
    ඈͿௗΛམͱ͢੎͍ͷ7FSDFMࣾ੡ɻ443ɾ44(ɾ*43ʹରԠɻ
    

    ϑΝΠϧϕʔεͷϧʔςΟϯάɺը૾ͷ࠷దԽͳͲͷػೳΛ಺แɻ
    3FNJY
    3FBDU3PVUFSͷ࡞ऀਓ͕։ൃ͢Δ৽ਐؾӶͷϑϨʔϜϫʔΫɻ
    

    443ઐ༻ͰɺαʔόͷڍಈΛࡉ੍͔͘ޚͰ͖Δɻ
    3FEXPPE+4ɺ#MJU[KT
    3BJMTʹ৮ൃ͞Εͨɺ03.·ͰؚΉϑϧελοΫͳϑϨʔϜϫʔΫɻ
    (BUTCZɺ"TUSP
    ੩తαΠτϏϧμʔɻ
    

    View Slide

22. Ґ
    .FUBࣾͷࠓޙ
    

    View Slide

23. $BNCSJEHF"OBMZUJDBࣄ݅
    ੑ֨਍அΞϓϦͰखʹೖΕͨϢʔβʔͱͦͷ༑ਓܭ ສ݅ͷݸਓ৘ใ͕
    

    ෆਖ਼ྲྀ༻͞Εɺ೥ͷถେ౷ྖબʹ͓͍ͯτϥϯϓਞӦ͕޿ࠂʹ׆༻ͨ͠ɻ
    

    'BDFCPPL͸ͣ͞Μͳ৘ใ؅ཧΛࢦఠ͞Εɺ$&0͕ԼӃެௌձͰਘ໰͞Εͨɻ
    ௿Լ͠ଓ͚ΔϒϥϯυΠϝʔδ
    *OUFSCSBOE͕ࣾຖ೥ެ։͍ͯ͠Δ#FTU(MPCBM#SBOETͰɺ'BDFCPPL͸
    

    ೥ͷҐ͔Β೥ʹ͸Ґʹ·Ͱసམɻͳ͓Ґ͸"QQMFɺҐ͕
    .JDSPTPGUɺҐ͕"NB[POɺҐ͕(PPHMFɻ
    ओཁϓϨʔϠʔͷ૬͙࣍ୀࣾ
    8IBUT"QQ૑ۀऀͷ+BO,PVN
    ʢ೥݄ʣ
    ɺ*OTUBHSBN૑ۀऀͷ,FWJO4ZTUSPN
    ʢ೥݄ʣ
    ɺ$00ͷ4IFSZM4BOECFSHʢ೥݄ʣ
    ۀ੷ͷ௿໎ɺϦετϥ
    גՁ͸Ұ࣌ظΑΓ௒Լམɺશैۀһͷ໿ˋʹ͋ͨΔສਓͷ࡟ݮΛൃදɻ
    

    View Slide

24. .FUBࣾʹۈ຿͍ͯ͠Δ͜ͱ͕Ո଒ɾ༑ਓ͔ΒΑ͘ࢥΘΕ
    

    ͳ͚Ε͹ɺίΞνʔϜͷओཁϝϯόʔ΋͍ͣΕୀࣾΛߟ͑Δ
    

    ͔΋͠Εͳ͍ɻ
    ͦΕͬͯ3FBDUʹؔ܎͋Δʁ
    ೥͔Β'BDFCPPLʹۈ຿ɺॳظ͔Β3FBDUͷ։ൃʹ
    

    ܞΘ͍ͬͯͨ4FCBTUJBO.BSLCÆHF͕7FSDFMʹస৬ɻ
    ଞʹ΋೥͔Βॴଐ͍ͯͨ͠ɺ+FTUͱ:BSOͷ࡞ऀͰ͋Δ
    $ISJTUPQI/BLB[BXB͕4USJQFʹస৬͍ͯ͠Δɻ
    

    View Slide

25. Ґ
    ঢ়ଶ؅ཧϥΠϒϥϦ
    

    ͲΕ࢖͑͹͍͍ͷʁ
    

    View Slide

26. ࢖Θͳ͍
    $POUFYU"1*ͷΈɺ΋͘͠͸VTF3FEVDFSΛ૊Έ߹Θ͕ͤͯΜ͹Δ
    'MVYΞʔΩςΫνϟ
    ແ೉ͳηϯͳΒ3FEVYɺ΋ͬͱγϯϓϧʹॻ͖͚ͨΕ͹;VTUBOE
    "UPNΞʔΩςΫνϟ
    ձࣾϒϥϯυͳΒ3FDPJMɺॻ͖΍͢͞ͳΒ+PUBJ
    ΫΤϦΩϟογϡͱͯ͠ѻ͏
    ଟػೳ͕͍͍ͳΒ5BO4UBDL2VFSZɺγϯϓϧ͕͍͍ͳΒ483
    

    View Slide

27. View Slide

28. 3FBDU ͷΘ͔Βͳ͕͞গ͠Ͱ΋੔ཧͰ͖ͨ
    

    Ͱ͠ΐ͏͔ʁ
    ͜Ε͚ͩෆ࣮֬ੑΛ๊͑ͳ͕ΒΑ͘͜͜
    

    ·ͰීٴͰ͖ͨ΋ͷͩͱࢥ͍·͕͢ɺٯʹ
    

    ͜ͷෆ࣮֬ੑ͕Ͳ͔͜Ͱ3FBDUͷڧ͞ʹ
    

    ͭͳ͕͍ͬͯΔͷ͔΋͠Ε·ͤΜɻ
    Α͘Θ͔Βͳ͍3FBDUͷมԽʹɺࠓޙ΋
    

    Ί͛ͣʹཱͪ޲͔͍͖ͬͯ·͠ΐ͏ɻ
    ૯ධ
    

    View Slide

29. ͓·͚
    ৘ใऩूͲ͏ͯ͠Δʁ
    

    View Slide

30. ͦͷिͷ3FBDUʹ·ͭΘΔτϐοΫΛ·ͱΊͯڭ͑ͯ͘
    ΕΔαΠτɻ5XJUUFSͰ΋ൃ৴͍ͯ͠ΔͷͰɺࢲ͸ͦͪΒ
    ΛνΣοΫ͍ͯ͠Δɻ
    IUUQTUIJTXFFLJOSFBDUDPN
    !TFCBTUJFOMPSCFS
    IUUQTUXJUUFSDPNJDPNNVOJUJFT
    

    View Slide

31. +BWB4DSJQUϥΠδϯάελʔ
    (JU)VCͷελʔ֫ಘ਺ʹΑΔ+4քͷτϨϯυΛຖ೥·ͱΊ͍ͯΔ
    ϞόΠϧ൛$ISPNF
    τοϓϖʔδʹϢʔβʔ͕޷͖ͦ͏ͳهࣄΛूΊ͖ͯͯ͘ΕΔͷͰɺ
    

    ;ͩΜ͔Βͦ͏͍͏هࣄΛݟ͍ͯΕ͹࠷৽৘ใΛڭ͑ͯ͘ΕΔ
    ͦͷଞ
    4UBUFPG+BWB4DSJQU
    ੈքதͷ։ൃऀ͔ΒΞϯέʔτΛͱͬͯ+4քͷτϨϯυΛ೥ʹճ
    

    ·ͱΊ͍ͯΔ
    OQNUSFOET
    OQNͷμ΢ϯϩʔυ਺ΛάϥϑͰࢹ֮ԽɺൺֱͰ͖ΔαΠτ
    

    View Slide