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
9.1k
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.8k
Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 / Recompose Funeral March
oukayuka
3
5.7k
(Ruby使いのための)Scalaで学ぶ関数型プログラミング
oukayuka
0
270
Other Decks in Technology
See All in Technology
Amazon Q Developer 他⽣成AIと⽐較してみた
takano0131
1
120
Compose MultiplatformにおけるiOSネイティブ実装のベストプラクティス
enomotok
1
210
Reactを段階的に覗いてみる
ytaisei
2
950
日本MySQLユーザ会ができるまで / making MyNA
tmtms
1
350
チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから / How to deal with ADR depends on the characteristics of the team
mh4gf
4
330
RAGの基礎から実践運用まで:AWS BedrockとLangfuseで実現する構築・監視・評価
sonoda_mj
0
420
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
130
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
200
非エンジニアにも伝えるメールセキュリティ / Email security for non-engineers
ykanoh
13
3.8k
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
2
210
Symfony in 2025: Scaling to 0
fabpot
2
170
PHPStan をできる限り高速化してみる
colopl
0
250
Featured
See All Featured
Building Applications with DynamoDB
mza
94
6.3k
Six Lessons from altMBA
skipperchong
27
3.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Why Our Code Smells
bkeepers
PRO
336
57k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The Language of Interfaces
destraynor
157
24k
KATA
mclloyd
29
14k
The Cult of Friendly URLs
andyhume
78
6.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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ͷμϯϩʔυΛάϥϑͰࢹ֮ԽɺൺֱͰ͖ΔαΠτ