Atomic Designと刺さらない現場/Atomic Design and it fit to Project or not

by 果物リン

Slide 1

Slide 1 text

Atomic Designと刺さらない現場 Ռ෺Ϧϯ@FruitRiin גࣜձࣾΏΊΈ 2019/07/31 Roppongi.vue #2

Slide 2

Slide 2 text

Atomic Design࢖ͬͯ·͔͢ʁ

Slide 3

Slide 3 text

Atomic Design  ͏·͍ͬͯ͘·͔͢ʁ

Slide 4

Slide 4 text

自己紹介 • Ռ෺Ϧϯ@FruitRiin • גࣜձࣾΏΊΈ • ϑϩϯτΤϯυΤϯδχΞ • ϦʔυΤϯδχΞΒ͍͠ • Vue͸͍͍ͧ • Ionic/Vue΋࠷ۙਪ͠

Slide 5

Slide 5 text

Atomic Designといえば Α͘ݟΔ΍ͭ

Slide 6

Slide 6 text

ϞμϯϑϩϯτΤϯυઃܭ ʹ͍͍ͩͨAtomic Designઆʁ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Atomic Designとは • σβΠϯΛݪࢠ͔Β૊ΈཱͯΔ • ڞ௨Ͱ࢖͑Δ෼ࢠɾ༗ػମͱͯ͠࠶ར༻͕ಛ௃ • શମͱͯ͠ͷ౷ҰײΛੜΈग़͢  σβΠϯγεςϜͷͻͱͭ

Slide 9

Slide 9 text

デザインシステム？ “σβΠϯγεςϜͱ͸ɺσβΠϯͷݪଇɺ֓೦ɺΨΠυɺίϯ ϙʔωϯτͳͲɺσβΠϯʹؔ͢Δ͋ΒΏΔϧʔϧΛఆΊͨ΋ͷ ͷ͜ͱΛݴ͍·͢ɻ” “ελΠϧΨΠυ΍ίϯϙʔωϯτϥΠϒϥϦʢύλʔϯϥΠϒϥ Ϧʣ͸σβΠϯελΠϧͷҰ෦ʹ͋ͨΓ·͢ɻ” σβΠϯγεςϜΛਖ਼͘͠ཧղ͠Α͏ɻ࡞Γํɾࢀߟࣄྫͷ·ͱΊ  ʕʕ8FC%FTJHO5SFOET

Slide 10

Slide 10 text

デザインシステムのメリット • Ұ؏ͨ͠σβΠϯΛ࡞ΕΔΑ͏ʹͳΔ • νʔϜͰͷσβΠϯ੍࡞ΛεϜʔζʹ • σβΠφʔҎ֎ͷਓͱڞ௨ೝࣝΛ࣋ͭ

Slide 11

Slide 11 text

ຊདྷɺΤϯδχΞͷͨΊͷ΋ͷͰ͸ͳ͍ ʢΤϯδχΞʹͱͬͯ࢖͍΍͍͢΋ͷͰ͸͋Δʣ

Slide 12

Slide 12 text

࣮͸Atomic DesignͷݪஶͰ͸… • ࣮૷ʢσʔλ΍ϩδοΫͷ੹຿ʣʹ͸৮Ε͍ͯͳ͍ • ͨ·ͨ·ίϯϙʔωϯτͱ૬ੑ͕ྑ͔͚ͬͨͩ

Slide 13

Slide 13 text

刺さる現場 • ܧଓ։ൃɺن໛͕େ͖͍ • σβΠφʔ͞Μͱͷ  ڞ௨ݴޠͱͯ͠Atomic Design͕ػೳ͢Δ • σβΠφʔ͞Μ͕  ίʔυΛར༻ͯ͠σβΠϯ͢Δ

Slide 14

Slide 14 text

刺さらない現場 • ܧଓ͠ͳ͍ɺن໛͕খ͍͞ • σβΠφʔͱΤϯδχΞͷڑ཭͕ԕ͍ • σβΠφʔ͕Atomic DesignΛ࠾༻ͯ͠ͳ͍

Slide 15

Slide 15 text

刺さらない時どうすべきか？ • Atomic DesignΛ࠾༻͠ͳ͍ • ࣗ෼ͰίϯϙʔωϯτΛ෼͚Δ • ࢖͍ճ͞ͳ͍ͱ͖͸ີʹͭͬͯ͘΋ྑͦ͞͏ • ࢖͍·Θͨ͘͠ͳͬͨΒ੾Γग़ͭͭ͠෼ׂ • ݟ௨͕͠ѱ͘ͳͬͨΒ੾Γग़ͯ͠෼ׂ • ϖʔδίϯϙʔωϯτʹ̍ͭίϯϙʔωϯτڬΉͷ͸ׂͱศར

Slide 16

Slide 16 text

Appendix:私のディレクトリ分け • ೰ΈͲ͜Ζ • ڞ௨ͳ΍ͭͱີ݁߹ͳ΍ͭ͸෼͚Δʁ • ̎૚͘Β͍͸ωετͨ͠΄͏͕෼͚΍͍͢ʁ

Slide 17

Slide 17 text

まとめ • Atomic Designͦͷ΋ͷ͸  σβΠϯ͢ΔਓͷͨΊͷπʔϧ • ΤϯδχΞͷͨΊͷπʔϧͰ͸ͳ͍ • ݱ৔ʹΑͬͯ͸ࢗ͞Βͳ͍͜ͱ΋͋Δ • ͳΜ໊͔͍͍લ͕΄͍͠ʢখฒײ