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ͷτϨϯυ
    Α͘Θ͔ΒΜ
    େԬ༝Ղʢ͘ΔΈׂΓॻ๪ʣ

    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