Vue.js+AtomicDesign - Speaker Deck

Vue.js+AtomicDesign

by KeitaroOkamura

Slide 1

Slide 1 text

7VFKT"UPNJD%FTJHO 'VLVPLB+4

Slide 2

Slide 2 text

,FJUBSP0LBNVSB ΧϥϏφςΫϊϩδʔגࣜձࣾ 'SPOUFOE&OHJOFFS ϑϩϯτΤϯυΤϯδχΞ೥ੜ ࣗݾ঺հ @karaagekeitaroo

Slide 3

Slide 3 text

ɾ"UPNJD%FTJHOʹ͍ͭͯ ɾίϯϙʔωϯτઃܭʢ7VF7VFYʣʹ͍ͭͯ ɾ࣮૷ʹ͓͚ΔϧʔϧΛߟ͑ͯΈͨ ࠓ೔͢Δ࿩

Slide 4

Slide 4 text

Έͳ͞Μ7VFKT࢖͍ͬͯ·͔͢ʁ

Slide 5

Slide 5 text

ΧϯϑΝϨϯε͕։࠵͞Ε·͢ʢ೔ຊॳʣ

Slide 6

Slide 6 text

7VFKTͱ͸ʁ ɾ7VFKT͸ϢʔβʔΠϯλʔϑΣΠεΛߏங ͢ΔͨΊͷ1SPHSFTTJWF'SBNFXPSL ɾίϯϙʔωϯτࢦ޲ʢ8FC$PNQPOFOUͷ ࢓༷ʹԊͬͯઃܭ͞Ε͍ͯΔʣ

Slide 7

Slide 7 text

ίϯϙʔωϯτͷཻ౓͕ࣗ༝Ͱॊೈͳ෼ɺ ઃܭͰ೰Ή͜ͱͬͯ͋Γ·ͤΜ͔ʁ

Slide 8

Slide 8 text

ͦ͜Ͱ"UPNJD%FTJHO

Slide 9

Slide 9 text

͢΂ͯͷཁૉΛʮ"UPNʢݪࢠʣʯ͔Β࢝·Δ ̑ͭͷཁૉʹ෼ղͯ͠ɺ૊Έ߹Θ͍ͤͯ͘σβ Πϯख๏ͷ͜ͱ "UPNJD%FTJHOʢΞτϛοΫσβΠϯʣͱ͸ʁ

Slide 10

Slide 10 text

ίϯϙʔωϯτͷཻ౓ͷࢦ਑ ⁞"UPNTʢΞτϜɾ෼ࢠʣ    .PMFDVMFTʢϞϧΩϡʔϧɾ෼ࢠʣ ⁠0SHBOJTNTʢΦϧΨχζϜɾੜ෺ʣ ⁡5FNQMBUFTʢςϯϓϨʔτʣ ⁢1BHFTʢϖʔδʣ

Slide 11

Slide 11 text

⁞"UPNTʢΞτϜɾ෼ࢠʣ "UPNT͸ͦͷ໊લͷ௨Γɺػೳతʹ͜Ε Ҏ্෼ׂͰ͖ͳ͍ίϯϙʔωϯτ

Slide 12

Slide 12 text

⁞"UPNTʢΞτϜɾ෼ࢠʣ ྫͱͯ͠͸ɺϑΥʔϜͰ͍͏ͱ ʮϥϕϧʯʮೖྗ෦෼ʯʮϘλϯʯͷ֤ཁ ૉ͕"UPNTͱͳΓ·͢

Slide 13

Slide 13 text

 .PMFDVMFTʢϞϧΩϡʔϧɾ෼ࢠʣ ͭҎ্ͷ"UPNT͔Β૊Έ߹Θͤͯ࡞Β Εͨίϯϙʔωϯτ .PMFDVMFTͷ୯Ґ͸ʮͭͷ͜ͱ͕͏·͘ Ͱ͖Δ͜ͱʯ͕ਪ঑͞Ε͍ͯΔ

Slide 14

Slide 14 text

 .PMFDVMFTʢϞϧΩϡʔϧɾ෼ࢠʣ ྫͱͯ͠͸ɺ ʮςΩετϘοΫεʯʮϘλϯʯʮೖ ྗϑΥʔϜʯͳͲ

Slide 15

Slide 15 text

⁠0SHBOJTNTʢΦϧΨχζϜɾੜ෺ʣ .PMFDVMFTͷ૊Έ߹ΘͤͰ࡞ΒΕͨൺֱ తෳࡶͳίϯϙʔωϯτ ࠷ऴతͳΠϯλʔϑΣʔεʹۙ͘ͳΓɺ࠶ ར༻ੑͷߴ͍ίϯϙʔωϯτʹͳΔ

Slide 16

Slide 16 text

⁠0SHBOJTNTʢΦϧΨχζϜɾੜ෺ʣ ྫͱͯ͠͸ɺʮϔομʔʯ΍ʮϦετʯͳ Ͳ

Slide 17

Slide 17 text

⁡5FNQMBUFTʢςϯϓϨʔτʣ ίϯϙʔωϯτΛϨΠΞ΢τ͠ɺσβΠϯ ͷجຊతͳߏ଄Λ໌֬ʹ͢ΔϖʔδϨϕϧ ͷΦϒδΣΫτ  ݴ͍׵͑ΔͳΒʮϫΠϠʔϑϨʔϜʯ

Slide 18

Slide 18 text

⁢1BHFTʢϖʔδʣ ϧʔλʔʹඞͣඥͮ͘ίϯϙʔωϯτ 5FNQMBUFTʹ࣮ࡍͷίϯςϯπ͕ೖΓ۩ ମతͳ࢟ͱͳͬͨঢ়ଶ͕1BHFTʹͳΓ· ͢

Slide 19

Slide 19 text

2ɿʮσʔλͷྲྀΕʯ͔Βݟͨ ίϯϙʔωϯτઃܭʹ΋࢖͑Δͷʁ

Slide 20

Slide 20 text

"ɿ"UPNJD%FTJHO͸ίϯϙʔωϯτࢦ޲ͷ ߟ͑ํʹ΋Ϛον͠·͢  ʢ͖ͪΜͱ࣮૷্ͷϧʔϧΛઃ͚Ε͹ʂʣ

Slide 21

Slide 21 text

ʮσʔλͷྲྀΕʯͱ͸ʁ ɾঢ়ଶ؅ཧͷ͜ͱ ʢίϯϙʔωϯτؒͰͷσʔλ ड͚౉͠΍Πϕϯτ఻ୡͷ࢓૊ ΈʣΛࢦ͠·͢ ɾ7VFKTͰ͸7VFYΛ.PEFM ͱͯ͠ѻ͍·͢

Slide 22

Slide 22 text

ʮ7VFYʯͱ͸ʁ ɾ7VFY͸7VFKTΞϓϦέʔγϣϯͷͨΊͷ ঢ়ଶ؅ཧύλʔϯϥΠϒϥϦ ɾ7VFY͸4UPSFͱ͍͏ΞϓϦέʔγϣϯͷ ঢ়ଶʢ4UBUFʣΛอ࣋͢ΔίϯςφͰ͢

Slide 23

Slide 23 text

࣮૷্ͷϧʔϧͱͯ͠ ֤ίϯϙʔωϯτͷ໾ׂΛߟ͑ͯΈΔ

Slide 24

Slide 24 text

࣮૷্ͷϧʔϧ ⁞"UPNTʢΞτϜɾ෼ࢠʣ ɾଞͷίϯϙʔωϯτʹґଘ͠ͳ͍ ɾϩδοΫٴͼ4UBUFΛ࣋ͨͳ͍ʢεςʔτϨεʣ ɾσʔλΛ4UPSF͔Βऔಘ͠ͳ͍ ɾ਌ཁૉ͔ΒͷσʔλΛड͚औΓɺ௚઀ඳըཁૉʹ σʔλΛϨϯμϦϯά͢Δ͚ͩ

Slide 25

Slide 25 text

࣮૷্ͷϧʔϧ  .PMFDVMFTʢϞϧΩϡʔϧɾ෼ࢠʣ ɾ"UPNT΁ͷґଘ0,ʂ͚ͩͲ.PMFDVMFTಉ࢜ͷґ ଘ͸ͳΔ΂͘ආ͚Δ ɾঢ়ଶʹԠͯ͡"UPNTͷϓϩύςΟΛมߋͨ͠Γɺ "UPNTͷදࣔ੾Γସ͑Λߦ͏ ɾ"UPNTͷΠϕϯτϋϯυϦϯάΛߦ͏ ɾσʔλΛ4UPSF͔Βऔಘ͠ͳ͍

Slide 26

Slide 26 text

࣮૷্ͷϧʔϧ ⁠0SHBOJTNTʢΦϧΨχζϜɾੜ෺ʣ ɾ਌ཁૉ͔ΒͷσʔλΛड͚औΔʢগͳ͍৘ใʣ ɾ.PMFDVMFT"UPNT΁ͷґଘ0,ʂ ɾෳ਺ͷ1BHFT͔Β࠶ར༻͞Εͯ΋ྑ͍Α͏ʹ࡞Δ ɾࢠཁૉͷΠϕϯτϋϯυϦϯάɺΠϕϯτͷൃߦ ɾ4UPSF΁ͷΞΫηε0,ʂ

Slide 27

Slide 27 text

࣮૷্ͷϧʔϧ ⁡5FNQMBUFTʢςϯϓϨʔτʣ ɾ5FNQMBUFT͸࣮૷্1BHFTͱҙຯ߹͍͕ ಉ͡ʹͳΔͨΊɺ࢖༻͠ͳ͍͜ͱʹ͠·͠ ͨ

Slide 28

Slide 28 text

࣮૷্ͷϧʔϧ ⁢1BHFTʢϖʔδʣ ɾॳݟ࣌ʹσʔλͷྲྀΕ͕໌֬ʹͳΔΑ͏ʹ͢Δ ɾίϯϙʔωϯτؒͷΠϕϯτόεʹͳΔ ɾը໘಺Ͱڞ௨ͷॲཧΛఆٛ͢Δ ɾը໘શମͰඞཁͳ.PEFM΍4UBUFΛ؅ཧ͢Δ ɾ4UPSFͷΞΫηε0,ʂʢඞཁͰ͋Ε͹ෳ਺ʣ ɾϧʔςΟϯάॲཧΛఆٛ͢Δ

Slide 29

Slide 29 text

"UPNJD%FTJHOͷ͓͔͛Ͱ ཻ౓͕ద౓ʹࡉ͔͘ͳΓɺ ίϯϙʔωϯτͷ໾ׂ͕໌֬ʹ

Slide 30

Slide 30 text

·ͱΊ ɾ"UPNJD%FTJHO͸ϑϨʔϜϫʔΫʹର͢Δ ઃܭख๏΍σβΠϯύλʔϯΛըҰతʹͯ͠ ͘ΕΔ   ɾͦΕʹ߹Θͤͯίϯϙʔωϯτͷʮ໾ׂʯ Λ໌֬ʹ͢Δ࣮૷্ͷϧʔϧ΋ඞཁ

Slide 31

Slide 31 text

ઃܭͯ͠Έͯࢥͬͨ͜ͱ ɾେ͖͞Λج४ʹ͢Δͱ͍͏ίϯηϓτ͕෼͔Γ΍͢ ͔͚ͬͨΕͲɺը໘୯Ґͷઃܭࢥ૝͔Β୤٫͢ΔͷͰɺ ࠷ॳ׳Εͳ͍ ɾ࠷্૚Ͱͦͷը໘ͷ͢΂ͯͷσʔλΛऔ͖ͬͯͯόέ πϦϨʔ͢ΔΑΓɺͦͷίϯϙʔωϯτࣗ਎͕औͬͯ͘ Δܗ΋͋Γͳͷ͔ͳɾɾɾ೰ΈͲ͜ΖʢQSPQESJMMJOH ໰୊ʣ ɾ࠷ऴతʹίϯϙʔωϯτϑΝΠϧͱͯ͠੾Γ෼͚Δͷ ͸ʮ࠶ར༻ʯͰ͖Δ͔Ͳ͏͔ͰܾΊͨ❗

Slide 32

Slide 32 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ