Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yuka O’oka
December 03, 2022

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

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

Yuka O’oka

December 03, 2022
Tweet

More Decks by Yuka O’oka

Other Decks in Technology

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

  11. Ґ ϩδοΫͷॻ͖ํ 
 มΘΓ͗͢

  12. .JYJOTɹ೥ʙ೥ࠒ 3FBDUDSFBUF$MBTT ʹΑΔٖࣅΫϥείϯϙʔωϯτʹొ࿥͢Δ 
 ೥ʹඇਪ঑Ξφ΢ϯεɺ೥ʹഇࢭ )0$ ʢ)JHIFS0SEFS$PNQPOFOUʣ೥ʙ೥ࠒ ؔ਺ίϯϙʔωϯτʹΫϥείϯϙʔωϯτͰॻ͍ͨϩδοΫΛ߹੒͢Δ 
 ίϛϡχςΟओಋͰ޿·͕ͬͨɺ3FDPNQPTFͷऴᖼͱͱ΋ʹফ໓

    3FOEFS1SPQTɹ೥ʙ೥ࠒ )0$͕ؾʹೖΒͳ͔ͬͨެ͕ࣜ୅ସҊͱͯ͠ఏࣔ 
 3FBDU3PVUFS΍'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ͷ४ެࣜπʔϧνΣʔϯ ͱ΋ݴ͑Δ$SFBUF3FBDU"QQ͕์ஔঢ়ଶɻ .FUBࣾʹ͸ৗۈͷ୲౰ऀ͕͓ΒͣɺϓϩδΣΫτ͸͢Ͱʹ ʮϝϯςφϯεϞʔυʯͱͷ͜ͱɻ $SFBUF3FBDU"QQśƂŦ

  20. Ґ ϝλϑϨʔϜϫʔΫ 
 ࢖͏΂͖ʁ

  21. /FYUKT ඈͿௗΛམͱ͢੎͍ͷ7FSDFMࣾ੡ɻ443ɾ44(ɾ*43ʹରԠɻ 
 ϑΝΠϧϕʔεͷϧʔςΟϯάɺը૾ͷ࠷దԽͳͲͷػೳΛ಺แɻ 3FNJY 3FBDU3PVUFSͷ࡞ऀਓ͕։ൃ͢Δ৽ਐؾӶͷϑϨʔϜϫʔΫɻ 
 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૑ۀऀͷ,FWJO4ZTUSPN ʢ೥݄ʣ ɺ$00ͷ4IFSZM4BOECFSHʢ೥݄ʣ ۀ੷ͷ௿໎ɺϦετϥ גՁ͸Ұ࣌ظΑΓ௒Լམɺશैۀһͷ໿ˋʹ͋ͨΔສਓͷ࡟ݮΛൃදɻ
  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 ΫΤϦΩϟογϡͱͯ͠ѻ͏ ଟػೳ͕͍͍ͳΒ5BO4UBDL2VFSZɺγϯϓϧ͕͍͍ͳΒ483

  27. None
  28. 3FBDU ͷΘ͔Βͳ͕͞গ͠Ͱ΋੔ཧͰ͖ͨ 
 Ͱ͠ΐ͏͔ʁ ͜Ε͚ͩෆ࣮֬ੑΛ๊͑ͳ͕ΒΑ͘͜͜ 
 ·ͰීٴͰ͖ͨ΋ͷͩͱࢥ͍·͕͢ɺٯʹ 
 ͜ͷෆ࣮֬ੑ͕Ͳ͔͜Ͱ3FBDUͷڧ͞ʹ 


    ͭͳ͕͍ͬͯΔͷ͔΋͠Ε·ͤΜɻ Α͘Θ͔Βͳ͍3FBDUͷมԽʹɺࠓޙ΋ 
 Ί͛ͣʹཱͪ޲͔͍͖ͬͯ·͠ΐ͏ɻ ૯ධ
  29. ͓·͚ ৘ใऩूͲ͏ͯ͠Δʁ

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

  31. +BWB4DSJQUϥΠδϯάελʔ (JU)VCͷελʔ֫ಘ਺ʹΑΔ+4քͷτϨϯυΛຖ೥·ͱΊ͍ͯΔ ϞόΠϧ൛$ISPNF τοϓϖʔδʹϢʔβʔ͕޷͖ͦ͏ͳهࣄΛूΊ͖ͯͯ͘ΕΔͷͰɺ 
 ;ͩΜ͔Βͦ͏͍͏هࣄΛݟ͍ͯΕ͹࠷৽৘ใΛڭ͑ͯ͘ΕΔ ͦͷଞ 4UBUFPG+BWB4DSJQU ੈքதͷ։ൃऀ͔ΒΞϯέʔτΛͱͬͯ+4քͷτϨϯυΛ೥ʹճ 


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