Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactのトレンドよくわからん
Search
Yuka O’oka
December 03, 2022
Technology
15
8.8k
Reactのトレンドよくわからん
PWA Conference 2022 でのセッションの資料です。
https://conf2022.pwanight.jp/
Yuka O’oka
December 03, 2022
Tweet
Share
More Decks by Yuka O’oka
See All by Yuka O’oka
とある個人開発 PWA の SEO 奮戦記
oukayuka
8
2.6k
Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 / Recompose Funeral March
oukayuka
3
5.4k
(Ruby使いのための)Scalaで学ぶ関数型プログラミング
oukayuka
0
230
Other Decks in Technology
See All in Technology
SmartHR プロダクトエンジニア求人ガイド 2024上期
smarthr
0
130
Automate your changelogs! Release Drafter
onenashev
PRO
2
410
GitHub composite actions
hkusu
1
120
OCI Data Science Service 製品概要
oracle4engineer
PRO
0
110
Skaffoldを用いたGKEアプリケーションの CD(Continuous Development)
kojake_300
1
120
二刀流でWinActorを活用してみた話
tamai_63
0
120
最速思考でバクラク品質を! スタートアップのリアルな課題とQAの実践
nakanao
1
440
『LeanとDevOpsの科学』をきちんと解読する 〜Four Keys だけじゃ絶対もったいなくなる話〜
bonotake
27
6.6k
庁舎DX推進ガイドブック
senryakuka
0
1.7k
UIからの自動テスト事例
tomasagi
8
3.3k
マルチテナントの実現におけるDB設計とRLS / Utilizing RSL in multi-tenancy
soudai
20
5k
S3成長記録@Storage-JAWS#3
p0n
0
130
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
The Language of Interfaces
destraynor
150
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
Music & Morning Musume
bryan
39
5.4k
Clear Off the Table
cherdarchuk
82
310k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
A designer walks into a library…
pauljervisheath
199
23k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
What the flash - Photography Introduction
edds
64
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Transcript
ReactͷτϨϯυ Α͘Θ͔ΒΜ େԬ༝Ղʢ͘ΔΈׂΓॻʣ
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ͷܕఆ͕ٛ%F fi OJUFMZ 5ZQFEʹΑΔඇެࣜͳͷΛ͏͔͠ͳ͍ ͦͷ͍ͤͰϢʔβʔ͕ඃΔඃ ͔ͳΓଟ͘ͷݱͰ5ZQF4DSJQU͕ΘΕͯ ͍ΔͷʹɺެࣜυΩϡϝϯτͷઆ໌͕ +BWB4DSJQUͷΈ
Ґ .FUB͕ग़͢ पลϓϩμΫτ͕ऑ͍
'MVYʻʻʻʻʻɹ3FEVY 'MPXʻʻʻʻʻʻʻɹɹ5ZQF4DSJQU 3FMBZʻʻʻʻɹɹ"QPMMP 'MVYΞʔΩςΫνϟঢ়ଶཧϥΠϒϥϦ ܕνΣοΧʔ (SBQI2-ΫϥΠΞϯτ 3FDPJM͚ͬ͜͏ඍົʜ ͜Ε·Ͱͷઓ
ͱͱίΞϝϯόʔ͕࡞ऀͰ3FBDUͷ४ެࣜπʔϧνΣʔϯ ͱݴ͑Δ$SFBUF3FBDU"QQ͕์ஔঢ়ଶɻ .FUBࣾʹৗۈͷ୲ऀ͕͓ΒͣɺϓϩδΣΫτ͢Ͱʹ ʮϝϯςφϯεϞʔυʯͱͷ͜ͱɻ $SFBUF3FBDU"QQśƂŦ
Ґ ϝλϑϨʔϜϫʔΫ ͏͖ʁ
/FYUKT ඈͿௗΛམͱ͍͢ͷ7FSDFMࣾɻ443ɾ44(ɾ*43ʹରԠɻ ϑΝΠϧϕʔεͷϧʔςΟϯάɺը૾ͷ࠷దԽͳͲͷػೳΛแɻ 3FNJY 3FBDU3PVUFSͷ࡞ऀਓ͕։ൃ͢Δ৽ਐؾӶͷϑϨʔϜϫʔΫɻ 443ઐ༻ͰɺαʔόͷڍಈΛࡉ੍͔͘ޚͰ͖Δɻ 3FEXPPE+4ɺ#MJU[KT 3BJMTʹ৮ൃ͞Εͨɺ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
None
3FBDU ͷΘ͔Βͳ͕͞গ͠ͰཧͰ͖ͨ Ͱ͠ΐ͏͔ʁ ͜Ε͚ͩෆ࣮֬ੑΛ๊͑ͳ͕ΒΑ͘͜͜ ·ͰීٴͰ͖ͨͷͩͱࢥ͍·͕͢ɺٯʹ ͜ͷෆ࣮֬ੑ͕Ͳ͔͜Ͱ3FBDUͷڧ͞ʹ
ͭͳ͕͍ͬͯΔͷ͔͠Ε·ͤΜɻ Α͘Θ͔Βͳ͍3FBDUͷมԽʹɺࠓޙ Ί͛ͣʹཱ͔͍͖ͪͬͯ·͠ΐ͏ɻ ૯ධ
͓·͚ ใऩूͲ͏ͯ͠Δʁ
ͦͷिͷ3FBDUʹ·ͭΘΔτϐοΫΛ·ͱΊͯڭ͑ͯ͘ ΕΔαΠτɻ5XJUUFSͰൃ৴͍ͯ͠ΔͷͰɺࢲͦͪΒ ΛνΣοΫ͍ͯ͠Δɻ IUUQTUIJTXFFLJOSFBDUDPN !TFCBTUJFOMPSCFS IUUQTUXJUUFSDPNJDPNNVOJUJFT
+BWB4DSJQUϥΠδϯάελʔ (JU)VCͷελʔ֫ಘʹΑΔ+4քͷτϨϯυΛຖ·ͱΊ͍ͯΔ ϞόΠϧ൛$ISPNF τοϓϖʔδʹϢʔβʔ͕͖ͦ͏ͳهࣄΛूΊ͖ͯͯ͘ΕΔͷͰɺ ;ͩΜ͔Βͦ͏͍͏هࣄΛݟ͍ͯΕ࠷৽ใΛڭ͑ͯ͘ΕΔ ͦͷଞ 4UBUFPG+BWB4DSJQU ੈքதͷ։ൃऀ͔ΒΞϯέʔτΛͱͬͯ+4քͷτϨϯυΛʹճ
·ͱΊ͍ͯΔ OQNUSFOET OQNͷμϯϩʔυΛάϥϑͰࢹ֮ԽɺൺֱͰ͖ΔαΠτ