状態管理ライブラリZustandの導入から運用まで

Slide 1

Slide 1 text

ঢ়ଶ؅ཧϥΠϒϥϦ;VTUBOEͷಋೖ͔Βӡ༻·Ͱ EBJLJ!LUJLVSJTV$ZCP[V*OD

Slide 2

Slide 2 text

EBJLJ ● αΠϘ΢ζגࣜձࣾ৽ଔ ● 8FCϑϩϯτΤϯυΤϯδχΞ ● 𝕏 ɿ!LUJLVSJTV

Slide 3

Slide 3 text

αΠϘ΢ζͷओྗ੡඼LJOUPOF αΠϘ΢ζΤϯδχΞ࠾༻ϐον<> <>IUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF

Slide 4

Slide 4 text

LJOUPOFͷϑΥʔϜͷঢ়ଶ؅ཧʹ;VTUBOEΛ࢖͍ͬͯΔ LJOUPOFͰ࡞੒ͨ͠ΞϓϦʹσʔλΛ௥Ճ͢Δը໘ ίίʹ;VTUBOE͕ʂ

Slide 5

Slide 5 text

ΞδΣϯμ ● ঢ়ଶ؅ཧʹ;VTUBOEΛ࠾༻ͨ͠എܠ ● ͬ͘͟Γ;VTUBOE ● ;VTUBOEΛಋೖͯ͠Έ࣮ͯࡍͲ͏͔ ● ;VTUBOEW΁ͷظ଴

Slide 6

Slide 6 text

ঢ়ଶ؅ཧʹ;VTUBOEΛ࠾༻ͨ͠എܠ

Slide 7

Slide 7 text

࠶ϨϯμϦϯά࠷దԽ΁ͷ՝୊ײ

Slide 8

Slide 8 text

࠶ϨϯμϦϯά࠷దԽ΁ͷ՝୊ײ ● ΋ͱ΋ͱ͸3FBDUͷVTF4UBUF΍VTF3FEVDFSͰঢ়ଶ؅ཧΛ͍ͯͨ͠ ● ϑΥʔϜͷঢ়ଶΛͭͷΦϒδΣΫτͱͯ͠؅ཧ͓ͯ͠Γɺಛผ੍ޚ ͠ͳ͚Ε͹ͭͷJOQVUͷ஋Λߋ৽͢Δ͚ͩͰϑΥʔϜશମ͕࠶Ϩϯ μϦϯά͞ΕΔ ○ ϑΥʔϜશମͷ༨෼ͳϨϯμϦϯάΛආ͚ΔͨΊʹ࣮૷͕ෳࡶԽ ͢Δ ˠൺֱత༰қʹ࠶ϨϯμϦϯάͷ੍ޚ͕Մೳͳঢ়ଶ؅ཧϥΠϒϥϦͷಋೖ ʹࢸͬͨ

Slide 9

Slide 9 text

ϥΠϒϥϦબఆͷ۩ମతͳཁ݅ ● ঢ়ଶ؅ཧʹಛԽ͍ͯ͠Δ ○ طଘίʔυͱาௐΛ߹ΘͤΔඞཁ͕͋Δ ● όϯυϧαΠζ͕খ͘͞ґଘύοέʔδ͕গͳ͍ ○ LJOUPOF͸େن໛ͳϓϩμΫτͷͨΊɺྦྷੵతʹେ͖ͳӨڹΛ༩ ͑Δ ● ͋Δఔ౓ͷγΣΞͷߴ͞ͱܧଓతͳ։ൃ͕ೝΊΒΕΔ

Slide 10

Slide 10 text

ঢ়ଶ؅ཧϥΠϒϥϦͷҟͳΔΞϓϩʔν

Slide 11

Slide 11 text

τοϓμ΢ϯతͳΞϓϩʔνɿ;VTUBOEɺ3FEVY SPPU DPNQPOFOU DPNQPOFOU DPNQPOFOU DPNQPOFOU ● 4JOHMF4UPSF ● தԝूݖతʹ؅ཧ͞Εͨ4UPSFΛ֤ DPNQPOFOUͰݺͼग़ͯ͠࢖༻͢Δ 4UPSF

Slide 12

Slide 12 text

ϘτϜΞοϓతͳΞϓϩʔνɿ+PUBJɺ3FDPJM SPPU DPNQPOFOU DPNQPOFOU DPNQPOFOU DPNQPOFOU "UPN ● "UPNͱݺ͹ΕΔখ͞ͳঢ়ଶ୯ҐΛج ຊͱ͢Δ ● ֤"UPN͸ಠཱ͓ͯ͠ΓɺඞཁʹԠ͡ ͯ૊Έ߹ΘͤΔ͜ͱ͕Ͱ͖Δ ○ ࠷খ୯Ґ͔Β࢝Ίͯঃʑʹେ͖ͳ ߏ଄Λ࡞Γ্͛ΔϘτϜΞοϓత ͳߟ͑ํ "UPN

Slide 13

Slide 13 text

ϥΠϒϥϦൺֱͷҰ෦ ● ;VTUBOEˠ࠾༻ ○ ଞͷJOQVUͷ஋ʹԠͯ͡ผͷJOQVUͷ஋͕࠶ܭࢉ͞ΕΔ͜ͱ͕͋ Γɺ·ͱΊͯঢ়ଶ؅ཧͰ͖Δτοϓμ΢ϯͷΞϓϩʔν͕ద͢Δ ● +PUBJ ○ ࠓճͷཁ݅Ͱ͸͏·͘4UBUFΛϘτϜΞοϓʹ෼ׂ͢Δͷ͕೉͍͠ ● 3FEVYUPPMLJU ○ SFBDUSFEVYͱ!SFEVYKTUPPMLJUͷґଘ͕૿͑Δ ○ 1SPWJEFSΛ௥Ճ͢ΔͷͰɺطଘͷςετίʔυΛมߋ͢Δඞཁ͕ ͋Δ

Slide 14

Slide 14 text

ͬ͘͟Γ;VTUBOE

Slide 15

Slide 15 text

;VTUBOEͱ͸ʁ ● ʮγϯϓϧͰܰྔͳγϯάϧετΞͷঢ়ଶ؅ཧϥΠϒϥϦʯ ● ϝΠϯͷ+4ίʔυ͸਺ेߦ΄Ͳ ● όϯυϧαΠζLCఔ౓ʢNJOJGJFEʣ *OUSPEVDUJPO;VTUBOEɿIUUQT[VTUBOEEPDTQNOEST

Slide 16

Slide 16 text

;VTUBOEͰͷ4UPSFఆٛ DSFBUFͱ͍͏ؔ਺͔Βશͯ͸࢝·Δ

Slide 17

Slide 17 text

;VTUBOEͰͷ4UPSFఆٛ ● DSFBUFؔ਺ͷҾ਺ʹɺTFU HFU TUPSF ΛҾ਺ʹऔΔίʔϧόοΫΛ౉͢ ● ໭Γ஋͕4UPSFΛѻ͏ͨΊͷ)PPLʹͳ Δ

Slide 18

Slide 18 text

ίʔϧόοΫ͸ঢ়ଶม਺ʢ4UBUFʣͱͦͷ ߋ৽ؔ਺ʢ"DUJPOʣΛఆٛͨ͠ΦϒδΣ ΫτΛฦ͢ ;VTUBOEͰͷ4UPSFఆٛ

Slide 19

Slide 19 text

ίϯϙʔωϯτͰ4UPSFΛࢀর )PPLΛݺͼग़͠ɺཉ͍͠ 4UBUF·ͨ͸"DUJPOΛબ୒͢ Δʢ4FMFDUPSʣ ड͚औͬͨ4UBUF΍"DUJPOΛ ར༻͢Δ

Slide 20

Slide 20 text

5ZQF4DSJQUͰͷར༻ํ๏ 4UBUFͱ"DUJPOͷܕΛ༻ҙ͢ Δ DSFBUFؔ਺ͷܕҾ਺ʹ౉͢

Slide 21

Slide 21 text

࣮ࡍͷӡ༻ํ๏ɾ޻෉఺ͳͲ

Slide 22

Slide 22 text

● ঢ়ଶߋ৽͕ෳࡶ ● ϑΥʔϜશମΛͭͷΦϒδΣΫτͱͯ͠ ѻ͍ͬͯΔͨΊɺ·͞ʹ͜Μͳײ͡ʹͳ Δ ී௨ʹॻ͘ͱωετͨ͠ΦϒδΣΫτͷঢ়ଶૢ࡞େม ωετͨ͠ΦϒδΣΫτ

Slide 23

Slide 23 text

޻෉఺ɿ*NNFSΛ࢖༻ͨ͠Πϛϡʔλϒϧͳঢ়ଶૢ࡞ ˔ DSFBUFؔ਺ʹ*NNFSϛυϧ΢ΣΞΛڬΈࠐ Ή͚ͩͰ࢖͑Δ ˔ ࣗ࡞ͨ͠ϛυϧ΢ΣΞ΋ࠩ͠ࠐΉ͜ͱ͕Ͱ͖ ΔͨΊɺଞͷϥΠϒϥϦʹม͕͑ޮ͘ ˔ ؆ܿʹॻ͚Δ ˔ ࣮ࡍʹ͸Πϛϡʔλϒϧͳߋ৽͕ߦΘΕΔ

Slide 24

Slide 24 text

޻෉఺ɿ4UPSFఆٛϑΝΠϧʹ4FMFDUPSΛूੵ ● 4FMFDUPS΋4UPSFఆٛϑΝΠϧ ʹूੵ͠ɺίϯϙʔωϯτଆͰ͸ ͦΕΛݺͿ͚ͩʹ͢Δ ● Ծʹ4UPSFͷ࣮૷΍ঢ়ଶ؅ཧϥΠ ϒϥϦΛมߋ͢Δ͜ͱʹͳͬͨͱ ͯ͠΋ɺݺͼग़͠αΠυͰͷ٧Ί ସ͑ϩδοΫ͕࠷௿ݶͰࡁΉ

Slide 25

Slide 25 text

޻෉఺ɿঢ়ଶͷఆٛͱߋ৽Ҏ֎ͷॲཧ͸ͳΔ΂͘ॻ͔ͳ͍ ݱࡏͷ4UBUFΛऔಘͯ͠ܭࢉ Λߦ͏"DUJPO

Slide 26

Slide 26 text

޻෉఺ɿঢ়ଶͷఆٛͱऔಘɾߋ৽Ҏ֎ͷॲཧ͸ͳΔ΂͘ॻ͔ͳ͍ ● ϏδωεϩδοΫ͸ؔ਺ʹ੾Γग़ ͢ ● ूੵ͢Δؔ܎ͰϑΝΠϧ͕ංେԽ ͠΍͍ͨ͢Ίɺ4UPSFϑΝΠϧͷ ੹຿Λ੍ݶ

Slide 27

Slide 27 text

༨ஊɿ4MJDFT1BUUFSO ● ؔ৺͝ͱʹ4UBUFͱ"DUJPOͷ૊Έ Λ4MJDFͱͯ͠෼ׂ͢Δ ● 4MJDF͸ಠཱͨؔ͠਺ͱͯ͠ఆٛ ● 4MJDFΛ૊Έ߹ΘͤͯετΞΛ࡞ ੒͢Δ

Slide 28

Slide 28 text

༨ஊɿ3FEVYMJLFQBUUFSOT ● ΠϕϯτʹΑͬͯঢ়ଶͷߋ৽ॲ ཧΛग़͠෼͚ΔSFEVDFSΛ࡞੒ ● EJTQBUDIͱ͍͏"DUJPOΛఆٛ ● ݺͼग़͠ଆͰ͸EJTQBUDIʹΠ ϕϯτͷ৘ใΛ౉͢

Slide 29

Slide 29 text

ಋೖͯ͠Έͯخ͍͠ͱ͜Ζɺඍົͳͱ͜Ζ

Slide 30

Slide 30 text

خ͍͠ͱ͜Ζ ● 1SPWJEFSແ͠ͰطଘͷίʔυʹಋೖͰ͖ΔͨΊɺطଘίʔυ΍ςε τ΁ͷมߋ͕࠷খݶͰɺ)PPLͷςετ΋༰қʹͰ͖Δ ● ঢ়ଶ؅ཧʹඞཁͳॲཧΛҰׅͰએݴͰ͖Δ ○ ੾Γ཭ͦ͏ͱࢥͬͨ࣌ʹ੾Γ཭ͤΔ ○ FTMJOUQMVHJOTUSJDUEFQFOEFODJFT౳ͱ૊Έ߹Θͤͯɺ JNQPSUͰ͖ΔϞδϡʔϧͷ੍ݶͳͲ΋؆୯ ● ϛυϧ΢ΣΞͰػೳΛ֦ுͰ͖Δ ○ ґଘϥΠϒϥϦΛ཈͑ΔɾίϯτϩʔϧͰ͖Δ

Slide 31

Slide 31 text

ඍົͳͱ͜Ζɿܕਪ࿦ ● ͦͷ··ར༻͢Δͱ5ZQF4DSJQUͷܕఆٛΛશͯॻ͘ඞཁ͕͋Δ

Slide 32

Slide 32 text

༨ஊɿܕਪ࿦Λޮ͔ͤΔํ๏΋͋Γ·͢ ● DPNCJOFϛυϧ΢ΣΞΛ࢖༻͢Δ ○ ଞͷϛυϧ΢ΣΞͱͷซ༻͕೉͍͠ ○ ಛఆͷ৔߹ʹܕ҆શͰͳ͍<> ● [VTUBOETMJDFT [VTUBOEWBMUJP [VTUBOEYTͳͲͷϥΠϒϥϦΛ ซ༻͢Δ ○ ॻ͖৺஍͕มΘΔ͜ͱͱɺґଘΛۃྗݮΒ͍ͨ͜͠ͱ͔Β࢖༻͠ ͍ͯͳ͍ ○ ؤுͬͯॻ͍ͨΒྑ͍࿩Ͱ͸͋ΔͷͰɺɺ <>IUUQT[VTUBOEEPDTQNOESTHVJEFTUZQFTDSJQUUZQFTDSJQUHVJEF

Slide 33

Slide 33 text

● 4UBUFͱ"DUJPOΛͭͷΦϒδΣΫτͱͯ͠એݴ͢ΔͨΊɺܕΤϥʔ ͕4UPSFશମʹٴͿ͜ͱ͕͋Δ ● 4UPSFϑΝΠϧ͕େ͖͘ͳΔͱݪҼͷಛఆ͕ࠔ೉ʹͳΓ΍͍͢ ○ ࠓճͷཁ݅Ͱ͸4UPSFͷ෼ׂ͕೉͘͠ڐ༰͢Δ͔͠ͳ͍ ඍົͳͱ͜ΖɿܕΤϥʔ

Slide 34

Slide 34 text

;VTUBOEW΁ͷظ଴

Slide 35

Slide 35 text

W΁ͷظ଴ ● ಛʹػೳ͕૿͑ΔΘ͚Ͱ͸ͳ͍ʢ#SFBLJOH͕͋Δʣ ○ FTɺ3FBDUҎલͷαϙʔτΛ΍ΊΔͳͲ ● όϯυϧαΠζ͕খ͘͞ͳΔ ○ ݹ͍ػೳΛ࡟ͬͯεϦϜԽ ○ LCˠLC΄ͲʢNJOJGJFEʣ ○ *NNFSΛซ༻͢Δؔ܎ͰαΠζ͕Ћ͞ΕΔͨΊຊମ͕খ͍͞ͱ خ͍͠ IUUQTHJUIVCDPNQNOEST[VTUBOESFMFBTFTUBHWSD

Slide 36

Slide 36 text

·ͱΊ

Slide 37

Slide 37 text

·ͱΊ ● 4UPSFͷ෼ׂ͕೉͘͠τοϓμ΢ϯͷΞϓϩʔν͕దͨ͠ͷͰ ;VTUBOEΛબΜͩ ● ঢ়ଶ؅ཧʹඞཁͳॲཧΛҰׅͰએݴͰ͖Δ ● جຊDSFBUFؔ਺͚ͩͳͷͰɺ͍ΖΜͳύλʔϯͰཁ݅ʹ߹Θ ͤͨ࢖͍ํ͕Ͱ͖Δ ● 5ZQF4DSJQUͰ࢖͏৔߹͸޻෉͕ඞཁ͔΋ ● དྷΔWͰ͸͞Βʹܰྔʹͳͬͯخ͍͠