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のミニマム理解 〜UI = f(data)(state)+sideEffect〜
Search
Yoda Keisuke
February 18, 2024
5
150
Reactのミニマム理解 〜UI = f(data)(state)+sideEffect〜
Yoda Keisuke
February 18, 2024
Tweet
Share
More Decks by Yoda Keisuke
See All by Yoda Keisuke
Expertise as a Service via MCP
yodakeisuke
1
320
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
290
Agent Rules as Domain Parser
yodakeisuke
1
1.2k
.mdc駆動ナレッジマネジメント/.mdc-driven knowledge management
yodakeisuke
32
21k
インフラ高級言語としてのAWS CDK〜"設定"より1段階ハイレベルな抽象化〜
yodakeisuke
1
94
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Invisible Side of Design
smashingmag
301
51k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Bash Introduction
62gerente
614
210k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Gamification - CAS2011
davidbonilla
81
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How STYLIGHT went responsive
nonsquared
100
5.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Transcript
ґాܒ༎ 3FBDUͷϛχϚϜ 6*G EBUB TUBUF TJEF& ff FDU
ֶशͷΠϯηϯςΟϒ 3FBDUͷಛ 3FBDUʹΑΔ6*هड़ͷίϯηϓτ લஔ͖ᶃ👉 લஔ͖ᶄ👉 ຊ👉
ֶशͷΠϯηϯςΟϒ ٕज़ऀ໘ ৫໘
ٕज़ऀࢹᶃݱੈͷΞϓϦ։ൃͰ༻͕ߴ͘धཁ༗Γ ɹɹɹɹɹᶄ࣍ੈٕज़ύϥμΠϜड͚ܧ͍Ͱ͍Δ એݴతɾϦΞΫςΟϒɾؔίϯϙʔωϯτ Πϛϡʔλϒϧ Javascript/Typescript (6*ϓϩάϥϛϯά ύϥμΠϜ ϓϩάϥϛϯά
ݴޠ )5.-ੜॴ ύϑΥʔϚϯε ୲อͷֻ͚ WebAssembly(ͳΜͰ) αʔόαΠυ Τοδ खଓత / ϛϡʔλϒϧ ΫϥΠΞϯτ ԾDOMͰղܾ ίϯύΠϧ࣌ʹղܾ 3FBDU #MB[PS $ ɺZFX 3VTU 'SFTIɺ2XJL 3FBDU TWFMUFɺTPMJE
৫ࢹᶃଞࣾαʔϏεͷ69໘Ͱͷڝ૪ྗྼޙࢭ ᶄ։ൃੜ࢈ੑ࠾༻໘Ͱͷྼޙࢭ 㾎ߴΠϯλϥΫςΟϒ 㾎αΫαΫૢ࡞ 6TFS&YQFSJFODF %FWFMPQFS&YQFSJFODF 㾎σϦόϦʔ6Q 㾎Ϟμϯٕज़ελοΫͱ͍͏ ΠϯηϯςΟϒ
㾎։ൃਓޱ͕ଟ͍
3FBDUͷಛ ҰൠʹΑ͘ݴΘΕΔ̏ཁૉ ຊϑΥʔΧε͢Δൣғ
3FBDUͷಛ͜ͷΑ͏ͳ̏ཁૉͰޠΒΕΔ એݴత6* એݴత4UBUF Ծ%0. มԽͷ݁ՌͷΈॻ͚ྑ͍ 6*ϩδοΫͱঢ়ଶͷ
ঢ়ଶભҠ͕͋Δͱɺதؒతද ݱͰ͋ΔԾ%0.ͷΈߋ৽ ߋ৽લޙͷԾ%0.ͷൺֱ Ͱࠩݕɺ࠷খίετͰ ࣮%0.Λߋ৽ $PNQPOFOUCBFTE ը໘্ͷίϯϙʔωϯτΛ ୯Ґͱͯ͠ίʔυׂ ߏͱঢ়ଶͱৼΔ͍ͱ ελΠϧΛΧϓηϧԽ
̏ཁૉ͕ἧͬͯߴΠϯλϥΫςΟϒɾߴύϑΥʔϚϯεɾ ߴੜ࢈ੑΛ࣮ݱ͍ͯ͠Δ એݴత6* એݴత4UBUF Ծ%0. $PNQPOFOUCBFTE ࠩߋ৽ʹΑΔએݴతهड़ͱ
࣮ߦͷཱ྆ θϩ͔Βએݴͨ͠Ϗϡʔ ͷܥΛߏங ίϯϙʔωϯτ શͯ+4ͷؔ ͱͯ͠ఆٛ ίϯϙʔωϯτ ֊ؔΛએݴ తʹهड़ ίϯϙʔωϯτ ͷϝϞϦܰྔͳ ࣸ૾͕Ծ%0. มߋ͖͢ίϯϙ ʔωϯτͷΈΛߋ ৽͢Δ
એݴత6* એݴత4UBUF Ծ%0. $PNQPOFOUCBFTE ຊࢿྉͰઆ໌Λࢦ͢ൣғ ຊࢿྉͰɺཪͷΈ࠷ݶʹɺ୯ҰͷίϯϙʔωϯτΛఆͨ͠ ϑΝʔετεςοϓͷ֓೦ཧղΛࢦ͢
3FBDUʹΑΔ6*هड़ͷίϯηϓτ *OQVUˠ७ਮؔˠ6* ঢ়ଶΛͲ͏͔࣋ͭ ෭࡞༻ΛͲ͏͔࣋ͭ
6*G EBUB TUBUF TJEF&GGFDU ˞ࣜͱͯ͠ਖ਼͍͠දݱ͔Θ͔ͳ͍ͷͰΠϝʔδͰ
JO PVU 1SPDFTT 6*' EBUB
1SPQT ʢҾʣ %0. จॻߏ ίϯϙʔωϯτ ؔ
+BWBTDSJQUؔ 6*' EBUB +49Λɺ)5.-ͱ ಉ͡ɺ%0.ͷҰͭ ͷ࣮ͱͯ͠ଊ͑ Δɻ ίʔυྫ Ҿɿ HSFFUJOH ؔɿ $PNQPOFOU Γɿ EJWDMBTT/BNFl0OF Լͷ+49ཁૉ 1SPQTཁҾ 3FBDUίϯϙʔωϯτʹ͢ ͷΛͦ͏ݴ͍ͬͯΔ͚ͩ
1SPQT ʢҾʣ Ծ %0.Λฦ͢ ؔ ίϯϙʔωϯτ ؔ
+BWBTDSJQUؔ ิɿɹ+493FBDUDSFBUF&MFNFOU ͷߏจҥ +49࣮ࡍʹ 3FBDU&MFNFOUΛ ฦؔ͢ɺͰ͋Δ
3FBDUͷϧʔτ ΦϒδΣΫτ EJWJElSPPUz EJW ิɿ3FBDUϓϩδΣΫτͷॳظߏ͓ΑͼॳճϨϯμʔͷ ͬ͘͟ΓྲྀΕ 3FBDU
&MFNFOU *OEFYIUNM *OEFYKT "QQKT छʑͷίϯϙʔωϯτ πϦʔ͕ͿΒԼ͕Δ DSFBUF3PPU SPPU&MFNFOU SPPUSFOEFS 3FBDU&MFNFOU
+49 ७ਮؔ 6*G TUBUF 4UBUF ७ਮؔɺมΛ࣋ͨͳ͍ɻ ҰํͰɺݱ࣮ʹදݱ͠ͳ͚ΕͳΒͳ ͍ঢ়ଶΛཧ͢Δඞཁ͕͋Δɻ
FY ϑΥʔϜʹೖྗ͞Εͨจࣈɺ νΣοΫϘοΫεͷબঢ়ଶɺϩάΠ ϯதͷϢʔβใʜ
+49 ७ਮؔ 6*' TUBUF 4UBUF IPPLT"1*܈ͷɺVTF4UBUF ͱ͍ ͏"1*͕ΈࠐΈɻ ˠঢ়ଶετΞ͓Αͼͦͷߋ৽ΞΫ
γϣϯͱίϯϙʔωϯτΛඥ͚ͮ Δɻ ίʔυྫ UFYU4UBUF +49
4UPSF TUBUF Ϗϡʔ ίϯϙʔωϯτ 6*' EBUB TUBUF "DUJPO
TFU4UBUF ΠϕϯτϦεφʔ ʹొ͞Εͨߋ৽ ͕࣮ؔߦ ίϯϙʔωϯτؔͱ ผྖҬʹετΞ͞Ε ͍ͯΔঢ়ଶΛߋ৽ ߋ৽ޙͷTUBUFͰɺ ίϯϙʔωϯτ͕ؔ ࠶࣮ߦ͞ΕΔ TUBUF͓Αͼߋ৽ؔɺϝϞϦ্ͷͲ͔ͬʹอଘ͞Ε͍ͯ Δɻ ࡶ͕ͩͦΕ3FBDU͕͍ͬͯΕྑ͍ࣄ
G lॳظঢ়ଶz ͷੈքઢ ঢ়ଶભҠʹ͍ɺεφοϓγϣοτͱͯ͠ͷ6*͕ഁغੜ͞Ε͍ͯΔɻ ʢৗʹଘࡏ͢ΔԿ͔ɺͷ෦ঢ়ଶ͕มԽ͍ͯ͘͠ͱ͍͏Θ͚Ͱͳ͍ʣ G l͜Μͪʹz ͷੈքઢ G lຊΤϥʔϩʔʜz
ͷੈքઢ
1SPQT +49 ७ਮؔ 6*' EBUB TUBUF TJEF&GGFDU TJEF& ff
FDU ݱ࣮ʹɺ6* +49 ΛϦλʔϯ͢Δͱ͍͏ओతҎ֎ ʹɺ෭తͷͨΊͷखଓతͳίʔυͷඞཁ͕͋Δɻ FY νϟοτΞϓϦΛఆ͠ɺαʔόଆͱίωΫγϣ ϯΛுΔॲཧͳͲ ίϯϙʔωϯτͷඳըͱڞʹɺ MJTUFO͢Δඞཁ͕͋Δɻ
1SPQT +49 ७ਮؔ 6*' EBUB TUBUF TJEF&GGFDU TJEF& ff
FDU IPPLT"1*܈ͷɺVTF& ff FDU ͱ͍͏"1*͕Έࠐ Έɻ ˠݱ࣮ੈքʹͳΜΒ͔ͷ෭࡞༻Λٴ΅͢ίʔυΛॻ ͚Δɻ ίʔυྫ
1SPQT Ҿ +49 จॻߏ 6*' EBUB TUBUF
TJEF&GGFDU TJEF& ff FDU ࠩݕग़ɾࠩߋ ৽Λܦ࣮ͯࡍͷ )5.-ʹʜ ίϯϙʔωϯτ ؔ 4UBUF
ิɿϛχϚϜҎ্ͷ෦ͷνϥݟͤ
ΤϥʔɺϩʔσΟϯά੍ޚɺόοΫΤϯυαʔϏε͔Βͷσʔ λऔಘ
1SPQ T +49 TJEF & ff FDU ίϯϙʔω ϯτ
4UBUF VTF& ff FDU Θͳ͍͕ɺαʔό σʔλऔಘϚϯτ࣌ʹ࣮ߦ VTF4UBUF Θͳ͍͕ɺαʔό σʔλίϯϙʔωϯτ͕࣋ͭzঢ়ଶz Τϥʔڥք ϩʔσΟϯάڥք $PNQPOFOUCBTFE࠶ͼ
ॳճʹɺԼͷؔΛશ࣮ͯߦ͠SFOEFS ͦͷޙɺϢʔβΠϯλϥΫγϣϯʹΑΓɺ͜͜ ͷ4UBUF͔QSPQT͕มԽͨ͠ͱ͢Δɻ ˠ͜ͷίϯϙʔωϯτͱͦͷԼͷίϯϙʔωϯ τؔΛ࠶࣮ߦ͢Δ Ծ%0.͓Α ͼ3FOFSͷྲྀΕ ࠶ͼ
Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ
Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Ծ%0.πϦʔ چ ৽ ϦΞϧ%0.πϦʔ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ 3FBDU͕৽͍͠ 3FBDU&MFNFOUΛ ࡞ 3FBDU%0.͕ ࠩݕʴ%0.ߋ৽
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ