PWA Conference 2022 でのセッションの資料です。 https://conf2022.pwanight.jp/
ReactͷτϨϯυΑ͘Θ͔ΒΜେԬ༝Ղʢ͘ΔΈׂΓॻʣ
View Slide
3FBDU͏͙͢ొ͔ΒपΛܴ͑ɺϑϩϯτΤϯυͷϑϨʔϜϫʔΫͱͯ͠ੈքతʹ΄΅Ұڧঢ়ଶͱͳ͍ͬͯ·͢ɻ͔ͦ͠͠ͷมԽܹ͘͠ɺॳͷ3FBDUͱݱࡏͷ3FBDUͰಉ͡ͳͷ+49ͱԾ%0.Λ͍ͬͯΔ͜ͱ͘Β͍Ͱɺ΄΅ผͷͱݴ͍͍ͬͯͰ͠ΐ͏ɻ·ͨຊମҎ্ʹͦͷपลٕज़ͷྲྀߦΓഇΓܹ͘͠ɺͦͷτϨϯυΛݟޡΔͱকདྷతʹٕज़తෛ࠴ͷࢁ͕ੵΈ্͕ͬͯ͠·͏͜ͱʹͳΓ͔Ͷ·ͤΜɻຊηογϣϯͰ͜Ε·Ͱͷ3FBDUΤίγεςϜͷมભΛ;Γ͔͑ΓɺࠓޙͷτϨϯυΛݟۃΊΔΛཆ͏͜ͱΛࢦ͠·͢ɻຊηογϣϯ༰ͷॳͷઆ໌IUUQTDPOGQXBOJHIUKQTQFBLFSPVLBZVLB
ReactΤίγεςϜͷ ࠓޙͷτϨϯυΛݟۃΊΔʜ͔͠͠ࢿྉΛ࡞Γ࢝ΊͯΈͯɺ௧ײ͠·ͨ͠ɻ͜Εແཧͩ
͔Βؒɺ3FBDU ҰຊͰ͓ۚΛ Ք͍Ͱ͖ͨࢲͰ͜͏ࢥ͍·͢ɻ3FBDU τϨϯυͷҠΓมΘΓ͕ܹ͔ͬͨ͠Γɺ ଞʹෆ࣮֬ཁૉ͕͍Ζ͍Ζ͋Γ͗ͯ͢ɺ ͜ͷઌͲ͏ͳΔ͔Α͘Θ͔ΒΜ
͖͋ΒΊͪΌμϝͩϑϩϯτΤϯυͷੈքͰ΄΅Ұڧঢ়ଶͷ3FBDU ͱ ࢲͨͪ͜ͷઌ͖͍͔ͭ͋ͬͯͳ͚ΕͳΒͳ͍ɻͦ͜Ͱ͜ͷηογϣϯͰɺͦͷΑ͘Θ͔Βͳ͍3FBDUͷΘ͔Βͳ͞ΛҼղͯ͠Կ͕Θ͔Βͳ͍ ͷ͔ΛΘ͔ΔΑ͏ʹ͢Δ͜ͱͰɺࠓޙ3FBDU ͕Ͳ͏ มԽ͠Α͏ͱ͏·͘ରԠ͠ɺͦͷෆ࣮֬ੑʹཱͪ ͔͑ΔྗΛཆ͍͍ͨɻཆ͑ͨΒ͍͍ͳ͋ɻ
৽ਓͱઌഐͷରͰΘ͔Γ͘͢3FBDUֶ͕Δͱධͷٕज़ಉਓࢽ ʰΓ͋ΫτʂʱγϦʔζͷ࡞ऀɻେԬ༝Ղ @oukayukaࣗݾհ
ReactΑ͘Θ͔Βͳ͍ϫʔετ̓
Ґຊମͷόʔδϣχϯά
ຊʹʁIUUQTKBSFBDUKTPSHEPDTGBRWFSTJPOJOHIUNM
ެ։͞Εͨ࠷ॳͷόʔδϣϯ͕݄ɹ+4$POG64ʹͯΦʔϓϯιʔεԽόʔδϣϯͷ͕݄࣍ͩͬͨɹ͍͔ͭ͘ͷඇਪػೳ͕আ)PPLT͕ಋೖ͞Εͨόʔδϣϯ݄ɹྺ࢙తͳେվมͳͷʹϚΠφʔϦϦʔεʜ४උతόʔδϣϯͰ৽ػೳͳ݄͠ɹͷͨΊͷ౿ΈੴͳͷʹϝδϟʔϦϦʔε
ҐϩδοΫͷॻ͖ํ มΘΓ͗͢
.JYJOTɹʙࠒ3FBDUDSFBUF$MBTT ʹΑΔٖࣅΫϥείϯϙʔωϯτʹొ͢Δ ʹඇਪΞφϯεɺʹഇࢭ)0$ʢ)JHIFS0SEFS$PNQPOFOUʣʙࠒؔίϯϙʔωϯτʹΫϥείϯϙʔωϯτͰॻ͍ͨϩδοΫΛ߹͢Δ ίϛϡχςΟओಋͰ·͕ͬͨɺ3FDPNQPTFͷऴᖼͱͱʹফ໓3FOEFS1SPQTɹʙࠒ)0$͕ؾʹೖΒͳ͔ͬͨެ͕ࣜସҊͱͯ͠ఏࣔ 3FBDU3PVUFS'PSNJLʹಋೖ͞Ε͕ͨɺ)PPLTͷొʹΑΓୀ)PPLTɹʙݱࡏ͔Βಋೖ͞ΕͨؔίϯϙʔωϯτʹϩδοΫΛՃ͢Δػೳ υϥεςΟοΫͳվมͳ͕ΒεϜʔζʹड͚ೖΕΒΕɺଞΛۦஞͨ͠
)PPLTొҎ߱མͪண͍͓ͯΓɺίϯϙʔωϯτʹ ϩδοΫΛՃ͢Δํ๏ΛͲ͏͢Δ͔Ή͜ͱͳ͘ͳͬͨɻͨͩ͠Ͱಋೖ͞Εͨ4VTQFOTFΛ͏߹ɺඍົʹ ॻ͖ํ͕มΘΔͷͰҙ͕ඞཁɻͦͷΜৄ͍͜͠ͱ͕Γ͍ͨํʰΓ͋Ϋτʂᶅ3FBDUԠ༻ฤʱΛ͝ࢀর͍ͩ͘͞🙇IUUQTPVLBZVLBCPPUIQNJUFNT
ҐίΞνʔϜͷ ݴޠͷͩ͜ΘΓ
3FBDU݄ϦϦʔεͷόʔδϣϯ͔ΒܕνΣοΫ ͷͨΊʹɺࣗࣾ։ൃϓϩμΫτͰ͋Δ'MPXΛಋೖͯ͠։ൃ͍ͯ͠Δɻ͔࣌͠͠ɺ͢Ͱʹ5ZQF4DSJQU͕ϦϦʔεࡁΈͰόʔδϣϯ ·Ͱୡ͓ͯ͠Γɺ+4ίϛϡχςΟ͔Βߴ͍ධՁΛಘ͍ͯͨɻ
ະͩʹ5ZQF4DSJQUͷܕఆ͕ٛ%FfiOJUFMZ5ZQFEʹΑΔඇެࣜͳͷΛ͏͔͠ͳ͍ͦͷ͍ͤͰϢʔβʔ͕ඃΔඃ͔ͳΓଟ͘ͷݱͰ5ZQF4DSJQU͕ΘΕͯ ͍ΔͷʹɺެࣜυΩϡϝϯτͷઆ໌͕+BWB4DSJQUͷΈ
Ґ.FUB͕ग़͢ पลϓϩμΫτ͕ऑ͍
'MVYʻʻʻʻʻɹ3FEVY'MPXʻʻʻʻʻʻʻɹɹ5ZQF4DSJQU3FMBZʻʻʻʻɹɹ"QPMMP'MVYΞʔΩςΫνϟঢ়ଶཧϥΠϒϥϦܕνΣοΧʔ(SBQI2-ΫϥΠΞϯτ3FDPJM͚ͬ͜͏ඍົʜ͜Ε·Ͱͷઓ
ͱͱίΞϝϯόʔ͕࡞ऀͰ3FBDUͷ४ެࣜπʔϧνΣʔϯͱݴ͑Δ$SFBUF3FBDU"QQ͕์ஔঢ়ଶɻ.FUBࣾʹৗۈͷ୲ऀ͕͓ΒͣɺϓϩδΣΫτ͢ͰʹʮϝϯςφϯεϞʔυʯͱͷ͜ͱɻ$SFBUF3FBDU"QQśƂŦ
ҐϝλϑϨʔϜϫʔΫ ͏͖ʁ
/FYUKTඈͿௗΛམͱ͍͢ͷ7FSDFMࣾɻ443ɾ44(ɾ*43ʹରԠɻ ϑΝΠϧϕʔεͷϧʔςΟϯάɺը૾ͷ࠷దԽͳͲͷػೳΛแɻ3FNJY3FBDU3PVUFSͷ࡞ऀਓ͕։ൃ͢Δ৽ਐؾӶͷϑϨʔϜϫʔΫɻ 443ઐ༻ͰɺαʔόͷڍಈΛࡉ੍͔͘ޚͰ͖Δɻ3FEXPPE+4ɺ#MJU[KT3BJMTʹ৮ൃ͞Εͨɺ03.·ͰؚΉϑϧελοΫͳϑϨʔϜϫʔΫɻ(BUTCZɺ"TUSP੩తαΠτϏϧμʔɻ
Ґ.FUBࣾͷࠓޙ
$BNCSJEHF"OBMZUJDBࣄ݅ੑ֨அΞϓϦͰखʹೖΕͨϢʔβʔͱͦͷ༑ਓܭ ສ݅ͷݸਓใ͕ ෆਖ਼ྲྀ༻͞Εɺͷถେ౷ྖબʹ͓͍ͯτϥϯϓਞӦ͕ࠂʹ׆༻ͨ͠ɻ 'BDFCPPLͣ͞ΜͳใཧΛࢦఠ͞Εɺ$&0͕ԼӃެௌձͰਘ͞ΕͨɻԼ͠ଓ͚ΔϒϥϯυΠϝʔδ*OUFSCSBOE͕ࣾຖެ։͍ͯ͠Δ#FTU(MPCBM#SBOETͰɺ'BDFCPPL ͷҐ͔ΒʹҐʹ·Ͱసམɻͳ͓Ґ"QQMFɺҐ͕.JDSPTPGUɺҐ͕"NB[POɺҐ͕(PPHMFɻओཁϓϨʔϠʔͷ૬͙࣍ୀࣾ8IBUT"QQۀऀͷ+BO,PVNʢ݄ʣɺ*OTUBHSBNۀऀͷ,FWJO4ZTUSPNʢ݄ʣɺ$00ͷ4IFSZM4BOECFSHʢ݄ʣۀͷ໎ɺϦετϥגՁҰ࣌ظΑΓԼམɺશैۀһͷˋʹ͋ͨΔສਓͷݮΛൃදɻ
.FUBࣾʹۈ͍ͯ͠Δ͜ͱ͕Ոɾ༑ਓ͔ΒΑ͘ࢥΘΕ ͳ͚ΕɺίΞνʔϜͷओཁϝϯόʔ͍ͣΕୀࣾΛߟ͑Δ ͔͠Εͳ͍ɻͦΕͬͯ3FBDUʹؔ͋Δʁ͔Β'BDFCPPLʹۈɺॳظ͔Β3FBDUͷ։ൃʹ ܞΘ͍ͬͯͨ4FCBTUJBO.BSLCÆHF͕7FSDFMʹస৬ɻଞʹ͔Βॴଐ͍ͯͨ͠ɺ+FTUͱ:BSOͷ࡞ऀͰ͋Δ$ISJTUPQI/BLB[BXB͕4USJQFʹస৬͍ͯ͠Δɻ
Ґঢ়ଶཧϥΠϒϥϦ ͲΕ͍͍͑ͷʁ
Θͳ͍$POUFYU"1*ͷΈɺ͘͠VTF3FEVDFSΛΈ߹Θ͕ͤͯΜΔ'MVYΞʔΩςΫνϟແͳηϯͳΒ3FEVYɺͬͱγϯϓϧʹॻ͖͚ͨΕ;VTUBOE"UPNΞʔΩςΫνϟձࣾϒϥϯυͳΒ3FDPJMɺॻ͖͢͞ͳΒ+PUBJΫΤϦΩϟογϡͱͯ͠ѻ͏ଟػೳ͕͍͍ͳΒ5BO4UBDL2VFSZɺγϯϓϧ͕͍͍ͳΒ483
3FBDU ͷΘ͔Βͳ͕͞গ͠ͰཧͰ͖ͨ Ͱ͠ΐ͏͔ʁ͜Ε͚ͩෆ࣮֬ੑΛ๊͑ͳ͕ΒΑ͘͜͜ ·ͰීٴͰ͖ͨͷͩͱࢥ͍·͕͢ɺٯʹ ͜ͷෆ࣮֬ੑ͕Ͳ͔͜Ͱ3FBDUͷڧ͞ʹ ͭͳ͕͍ͬͯΔͷ͔͠Ε·ͤΜɻΑ͘Θ͔Βͳ͍3FBDUͷมԽʹɺࠓޙ Ί͛ͣʹཱ͔͍͖ͪͬͯ·͠ΐ͏ɻ૯ධ
͓·͚ใऩूͲ͏ͯ͠Δʁ
ͦͷिͷ3FBDUʹ·ͭΘΔτϐοΫΛ·ͱΊͯڭ͑ͯ͘ΕΔαΠτɻ5XJUUFSͰൃ৴͍ͯ͠ΔͷͰɺࢲͦͪΒΛνΣοΫ͍ͯ͠ΔɻIUUQTUIJTXFFLJOSFBDUDPN!TFCBTUJFOMPSCFSIUUQTUXJUUFSDPNJDPNNVOJUJFT
+BWB4DSJQUϥΠδϯάελʔ(JU)VCͷελʔ֫ಘʹΑΔ+4քͷτϨϯυΛຖ·ͱΊ͍ͯΔϞόΠϧ൛$ISPNFτοϓϖʔδʹϢʔβʔ͕͖ͦ͏ͳهࣄΛूΊ͖ͯͯ͘ΕΔͷͰɺ ;ͩΜ͔Βͦ͏͍͏هࣄΛݟ͍ͯΕ࠷৽ใΛڭ͑ͯ͘ΕΔͦͷଞ4UBUFPG+BWB4DSJQUੈքதͷ։ൃऀ͔ΒΞϯέʔτΛͱͬͯ+4քͷτϨϯυΛʹճ ·ͱΊ͍ͯΔOQNUSFOETOQNͷμϯϩʔυΛάϥϑͰࢹ֮ԽɺൺֱͰ͖ΔαΠτ