Reactのミニマム理解 〜UI = f(data)(state)+sideEffect〜

Transcript

1. ґా
   ܒ༎ 3FBDUͷϛχϚϜ 6*
   
   G EBUB TUBUF TJEF& ff FDU
2. 
   ֶशͷΠϯηϯςΟϒ
   
   3FBDUͷಛ௃
   
   3FBDUʹΑΔ6*هड़ͷίϯηϓτ લஔ͖ᶃ
   👉 લஔ͖ᶄ
   👉 ຊ୊
   👉
3. 
   ֶशͷΠϯηϯςΟϒ
    ٕज़ऀ໘
    ૊৫໘
4. ٕज़ऀࢹ఺
   
   ᶃ
   ݱੈ୅ͷΞϓϦ։ൃͰ࢖༻཰͕ߴ͘धཁ༗Γ 
 ɹɹɹɹɹ
   
   
   ᶄ
   ࣍ੈ୅ٕज़΋ύϥμΠϜ͸ड͚ܧ͍Ͱ͍Δ એݴతɾϦΞΫςΟϒɾؔ਺ίϯϙʔωϯτ
   
   Πϛϡʔλϒϧ Javascript/Typescript (6*ϓϩάϥϛϯά 
 ύϥμΠϜ ϓϩάϥϛϯά 
 ݴޠ )5.-ੜ੒৔ॴ
   ύϑΥʔϚϯε 
 ୲อͷ࢓ֻ͚ WebAssembly(ͳΜͰ΋) αʔόαΠυ Τοδ खଓత / ϛϡʔλϒϧ ΫϥΠΞϯτ Ծ૝DOMͰղܾ ίϯύΠϧ࣌ʹղܾ 3FBDU #MB[PS $ ɺZFX 3VTU 'SFTIɺ2XJL 3FBDU TWFMUFɺTPMJE
5. ૊৫ࢹ఺
   
   ᶃ
   ଞࣾαʔϏε΁ͷ69໘Ͱͷڝ૪ྗྼޙ๷ࢭ
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   ᶄ
   ։ൃੜ࢈ੑ΍࠾༻໘Ͱͷྼޙ๷ࢭ 㾎
   ߴΠϯλϥΫςΟϒ
   㾎
   αΫαΫૢ࡞ 6TFS
   &YQFSJFODF %FWFMPQFS
   &YQFSJFODF 㾎
   σϦόϦʔ଎౓6Q
   㾎
   Ϟμϯٕज़ελοΫͱ͍͏ 

   
   ΠϯηϯςΟϒ
   㾎
   ։ൃਓޱ͕ଟ͍
6. 
   3FBDUͷಛ௃
    ҰൠʹΑ͘ݴΘΕΔ̏ཁૉ
    ຊ೔ϑΥʔΧε͢Δൣғ
7. 3FBDUͷಛ௃͸͜ͷΑ͏ͳ̏ཁૉͰޠΒΕΔ એݴత6* 
 એݴత4UBUF Ծ૝%0. 
   มԽͷ݁ՌͷΈॻ͚͹ྑ͍
   
   6*ϩδοΫͱঢ়ଶͷ෼཭ 
   ঢ়ଶભҠ͕͋Δͱɺதؒతද 

   ݱͰ͋ΔԾ૝%0.ͷΈߋ৽
   
   ߋ৽લޙͷԾ૝%0.ͷൺֱ 

   Ͱࠩ෼ݕ஌ɺ࠷খίετͰ 

   ࣮%0.Λߋ৽
   $PNQPOFOUCBFTE 
   ը໘্ͷίϯϙʔωϯτΛ 

   ୯Ґͱͯ͠ίʔυ෼ׂ
   
   ߏ଄ͱঢ়ଶͱৼΔ෣͍ͱ 

   ελΠϧΛΧϓηϧԽ
8. ̏ཁૉ͕ἧͬͯߴΠϯλϥΫςΟϒɾߴύϑΥʔϚϯεɾ 
 ߴੜ࢈ੑΛ࣮ݱ͍ͯ͠Δ એݴత6* 
 એݴత4UBUF Ծ૝%0. $PNQPOFOUCBFTE ࠩ෼ߋ৽ʹΑΔએݴతهड़ͱ 
 ࣮ߦ଎౓ͷཱ྆ ౎౓θϩ͔Βએݴͨ͠Ϗϡʔ ͷ׬੒ܥΛߏங ίϯϙʔωϯτ ͸શͯ+4ͷؔ਺ ͱͯ͠ఆٛ ίϯϙʔωϯτ ֊૚ؔ܎Λએݴ తʹهड़ ίϯϙʔωϯτ ͷϝϞϦܰྔͳ ࣸ૾͕Ծ૝%0. มߋ͢΂͖ίϯϙ ʔωϯτͷΈΛߋ ৽͢Δ
9. એݴత6* 
 એݴత4UBUF Ծ૝%0. $PNQPOFOUCBFTE ຊࢿྉͰઆ໌Λ໨ࢦ͢ൣғ ຊࢿྉͰ͸ɺཪͷ࢓૊Έ͸࠷௿ݶʹɺ୯ҰͷίϯϙʔωϯτΛ૝ఆͨ͠ 
 ϑΝʔετεςοϓͷ֓೦ཧղΛ໨ࢦ͢
10. 
    3FBDUʹΑΔ6*هड़ͷίϯηϓτ
     *OQVU
    ˠ
    ७ਮؔ਺
    ˠ
    6*
     ঢ়ଶΛͲ͏͔࣋ͭ
     ෭࡞༻ΛͲ͏͔࣋ͭ
11. 6*
    
    G EBUB TUBUF
    TJEF&GGFDU
    
    ˞
    ਺ࣜͱͯ͠ਖ਼͍͠දݱ͔͸Θ͔ͳ͍ͷͰΠϝʔδͰ
12. JO PVU 1SPDFTT 6*
    
    ' EBUB
13. 1SPQT 
 ʢҾ਺ʣ %0. 
 จॻߏ଄ ίϯϙʔωϯτ 
 ؔ਺ 
 +BWBTDSJQUؔ਺ 6*
    
    ' EBUB +49Λɺ)5.-ͱ ಉ͡ɺ%0.ͷҰͭ ͷ࣮૷ͱͯ͠ଊ͑ Δɻ ίʔυྫ Ҿ਺ɿ 
 HSFFUJOH ؔ਺ɿ 
 $PNQPOFOU ໭Γ஋ɿ 
 EJW
    DMBTT/BNFl0OF 
 ഑Լͷ+49ཁૉ 1SPQT͸ཁ͸Ҿ਺ 
 3FBDUίϯϙʔωϯτʹ౉͢΋ ͷΛͦ͏ݴ͍ͬͯΔ͚ͩ
14. 1SPQT 
 ʢҾ਺ʣ Ծ૝ %0.Λฦ͢ ؔ਺ 
 ίϯϙʔωϯτ 
 ؔ਺ 
 +BWBTDSJQUؔ਺ ิ଍ɿɹ+49͸3FBDUDSFBUF&MFNFOU ͷߏจ౶ҥ +49΋࣮ࡍʹ͸ 3FBDU&MFNFOUΛ ฦؔ͢਺ɺͰ͋Δ
    
15. 3FBDUͷϧʔτ ΦϒδΣΫτ EJW
    JElSPPUz 
 EJW ิ଍ɿ
    3FBDUϓϩδΣΫτͷॳظߏ଄͓ΑͼॳճϨϯμʔͷ 
 ͬ͘͟ΓྲྀΕ 3FBDU 
 &MFNFOU *OEFYIUNM *OEFYKT "QQKT छʑͷίϯϙʔωϯτ 
 πϦʔ͕ͿΒԼ͕Δ DSFBUF3PPU SPPU&MFNFOU SPPUSFOEFS 3FBDU&MFNFOU
16. +49 ७ਮؔ਺ 6*
    
    G TUBUF 4UBUF ७ਮؔ਺͸ɺม਺Λ࣋ͨͳ͍ɻ 
 ҰํͰɺݱ࣮ʹදݱ͠ͳ͚Ε͹ͳΒͳ ͍ঢ়ଶΛ؅ཧ͢Δඞཁ͕͋Δɻ 
 FY
    ϑΥʔϜʹೖྗ͞Εͨจࣈɺ νΣοΫϘοΫεͷબ୒ঢ়ଶɺϩάΠ ϯதͷϢʔβ৘ใʜ
17. +49 ७ਮؔ਺ 6*
    
    ' TUBUF 4UBUF IPPLT"1*܈ͷɺVTF4UBUF ͱ͍ ͏"1*͕૊ΈࠐΈɻ 
 ˠ
    ঢ়ଶετΞ͓Αͼͦͷߋ৽ΞΫ γϣϯͱίϯϙʔωϯτΛඥ͚ͮ Δɻ ίʔυྫ UFYU4UBUF +49
18. 4UPSF 
 TUBUF Ϗϡʔ 
 ίϯϙʔωϯτ 6*
    
    ' EBUB TUBUF "DUJPO 
 TFU4UBUF ΠϕϯτϦεφʔ ʹొ࿥͞Εͨߋ৽ ؔ਺͕࣮ߦ ίϯϙʔωϯτؔ਺ͱ ͸ผྖҬʹετΞ͞Ε ͍ͯΔঢ়ଶΛߋ৽ ߋ৽ޙͷTUBUFͰɺ 
 ίϯϙʔωϯτؔ਺͕ ࠶࣮ߦ͞ΕΔ TUBUF͓Αͼߋ৽ؔ਺͸ɺϝϞϦ্ͷͲ͔ͬʹอଘ͞Ε͍ͯ Δɻ ࡶ͕ͩͦΕ͸3FBDU͕஌͍ͬͯΕ͹ྑ͍ࣄ
19. G lॳظঢ়ଶz ͷੈքઢ ঢ়ଶભҠʹ൐͍ɺεφοϓγϣοτͱͯ͠ͷ6*͕ഁغੜ੒͞Ε͍ͯΔɻ ʢৗʹଘࡏ͢ΔԿ͔ɺͷ಺෦ঢ়ଶ͕มԽ͍ͯ͘͠ͱ͍͏Θ͚Ͱ͸ͳ͍ʣ G l͜Μͪʹ͸z ͷੈքઢ G lຊ౰͸Τϥʔ΍ϩʔʜz ͷੈքઢ
20. 1SPQT +49 ७ਮؔ਺ 6*
    
    ' EBUB TUBUF
    
    TJEF&GGFDU TJEF& ff FDU ݱ࣮ʹ͸ɺ6* +49 ΛϦλʔϯ͢Δͱ͍͏ओ໨తҎ֎ ʹɺ෭໨తͷͨΊͷखଓతͳίʔυͷඞཁ͕͋Δɻ 
 FY
    νϟοτΞϓϦΛ૝ఆ͠ɺαʔόଆͱίωΫγϣ ϯΛுΔॲཧͳͲ ίϯϙʔωϯτͷඳըͱڞʹɺ MJTUFO͢Δඞཁ͕͋Δɻ
21. 1SPQT +49 ७ਮؔ਺ 6*
    
    ' EBUB TUBUF
    
    TJEF&GGFDU TJEF& ff FDU IPPLT"1*܈ͷɺVTF& ff FDU ͱ͍͏"1*͕૊Έࠐ Έɻ 
 ˠ
    ݱ࣮ੈքʹͳΜΒ͔ͷ෭࡞༻Λٴ΅͢ίʔυΛॻ ͚Δɻ ίʔυྫ
22. 1SPQT 
 Ҿ਺ +49 
 จॻߏ଄ 6*
    
    ' EBUB TUBUF
    
    TJEF&GGFDU TJEF& ff FDU ࠩ෼ݕग़ɾࠩ෼ߋ ৽Λܦ࣮ͯࡍͷ )5.-ʹʜ ίϯϙʔωϯτ 
 ؔ਺ 4UBUF
23. ิ଍ɿ
    ϛχϚϜҎ্ͷ෦෼ͷνϥݟͤ
24. ΤϥʔɺϩʔσΟϯά੍ޚɺόοΫΤϯυαʔϏε͔Βͷσʔ λऔಘ
25. 1SPQ T +49 TJEF 
 & ff FDU ίϯϙʔω ϯτ 
 4UBUF VTF& ff FDU ͸࢖Θͳ͍͕ɺαʔό σʔλऔಘ΋Ϛ΢ϯτ࣌ʹ࣮ߦ VTF4UBUF ͸࢖Θͳ͍͕ɺαʔό σʔλ΋ίϯϙʔωϯτ͕࣋ͭzঢ়ଶz Τϥʔڥք ϩʔσΟϯάڥք $PNQPOFOU
    
    CBTFE࠶ͼ
26. ॳճʹɺ഑Լͷؔ਺Λશ࣮ͯߦ͠SFOEFS ͦͷޙɺϢʔβΠϯλϥΫγϣϯ౳ʹΑΓɺ͜͜ ͷ4UBUF͔QSPQT͕มԽͨ͠ͱ͢Δɻ 

    ˠ
    ͜ͷίϯϙʔωϯτͱͦͷ഑Լͷίϯϙʔωϯ τؔ਺Λ࠶࣮ߦ͢Δ Ծ૝%0.͓Α ͼ3FOFSͷྲྀΕ ࠶ͼ
27. Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Ծ૝%0.πϦʔ چ ৽ ϦΞϧ%0.πϦʔ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ Τ ϩ 3FBDU͕৽͍͠ 3FBDU&MFNFOUΛ ࡞੒ 3FBDU%0.͕ 
 ࠩ෼ݕ஌ʴ೔%0.ߋ৽
28. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ