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

コンポーネント設計の話といえばAtomic Design一強な印象だけど、
Atomic Design、うまくいってますか？

Transcript

1. Atomic Designと 刺さらない現場 Ռ෺Ϧϯ@FruitRiin גࣜձࣾΏΊΈ 2019/07/31 Roppongi.vue #2
2. Atomic Design࢖ͬͯ·͔͢ʁ
3. Atomic Design
 ͏·͍ͬͯ͘·͔͢ʁ
4. 自己紹介 • Ռ෺Ϧϯ@FruitRiin • גࣜձࣾΏΊΈ • ϑϩϯτΤϯυΤϯδχΞ • ϦʔυΤϯδχΞΒ͍͠ • Vue͸͍͍ͧ • Ionic/Vue΋࠷ۙਪ͠
5. Atomic Designといえば Α͘ݟΔ΍ͭ
6. ϞμϯϑϩϯτΤϯυઃܭ ʹ͍͍ͩͨAtomic Designઆʁ
8. Atomic Designとは • σβΠϯΛݪࢠ͔Β૊ΈཱͯΔ • ڞ௨Ͱ࢖͑Δ෼ࢠɾ༗ػମͱͯ͠࠶ར༻͕ಛ௃ • શମͱͯ͠ͷ౷ҰײΛੜΈग़͢
 σβΠϯγεςϜͷͻͱͭ
9. デザインシステム？ “σβΠϯγεςϜͱ͸ɺσβΠϯͷݪଇɺ֓೦ɺΨΠυɺίϯ ϙʔωϯτͳͲɺσβΠϯʹؔ͢Δ͋ΒΏΔϧʔϧΛఆΊͨ΋ͷ ͷ͜ͱΛݴ͍·͢ɻ” “ελΠϧΨΠυ΍ίϯϙʔωϯτϥΠϒϥϦʢύλʔϯϥΠϒϥ Ϧʣ͸σβΠϯελΠϧͷҰ෦ʹ͋ͨΓ·͢ɻ” σβΠϯγεςϜΛਖ਼͘͠ཧղ͠Α͏ɻ࡞Γํɾࢀߟࣄྫͷ·ͱΊ
 ʕʕ8FC
   %FTJHO
   5SFOET
10. デザインシステムのメリット • Ұ؏ͨ͠σβΠϯΛ࡞ΕΔΑ͏ʹͳΔ • νʔϜͰͷσβΠϯ੍࡞ΛεϜʔζʹ • σβΠφʔҎ֎ͷਓͱڞ௨ೝࣝΛ࣋ͭ
11. ຊདྷɺΤϯδχΞͷͨΊͷ΋ͷͰ͸ͳ͍ ʢΤϯδχΞʹͱͬͯ࢖͍΍͍͢΋ͷͰ͸͋Δʣ
12. ࣮͸Atomic DesignͷݪஶͰ͸… • ࣮૷ʢσʔλ΍ϩδοΫͷ੹຿ʣʹ͸৮Ε͍ͯͳ͍ • ͨ·ͨ·ίϯϙʔωϯτͱ૬ੑ͕ྑ͔͚ͬͨͩ
13. 刺さる現場 • ܧଓ։ൃɺن໛͕େ͖͍ • σβΠφʔ͞Μͱͷ
 ڞ௨ݴޠͱͯ͠Atomic Design͕ػೳ͢Δ • σβΠφʔ͞Μ͕
 ίʔυΛར༻ͯ͠σβΠϯ͢Δ
14. 刺さらない現場 • ܧଓ͠ͳ͍ɺن໛͕খ͍͞ • σβΠφʔͱΤϯδχΞͷڑ཭͕ԕ͍ • σβΠφʔ͕Atomic DesignΛ࠾༻ͯ͠ͳ͍
15. 刺さらない時どうすべきか？ • Atomic DesignΛ࠾༻͠ͳ͍ • ࣗ෼ͰίϯϙʔωϯτΛ෼͚Δ • ࢖͍ճ͞ͳ͍ͱ͖͸ີʹͭͬͯ͘΋ྑͦ͞͏ • ࢖͍·Θͨ͘͠ͳͬͨΒ੾Γग़ͭͭ͠෼ׂ • ݟ௨͕͠ѱ͘ͳͬͨΒ੾Γग़ͯ͠෼ׂ • ϖʔδίϯϙʔωϯτʹ̍ͭίϯϙʔωϯτڬΉͷ͸ׂͱศར
16. Appendix:私のディレクトリ分け • ೰ΈͲ͜Ζ • ڞ௨ͳ΍ͭͱີ݁߹ͳ΍ͭ͸෼͚Δʁ • ̎૚͘Β͍͸ωετͨ͠΄͏͕෼͚΍͍͢ʁ
17. まとめ • Atomic Designͦͷ΋ͷ͸
 σβΠϯ͢ΔਓͷͨΊͷπʔϧ • ΤϯδχΞͷͨΊͷπʔϧͰ͸ͳ͍ • ݱ৔ʹΑͬͯ͸ࢗ͞Βͳ͍͜ͱ΋͋Δ • ͳΜ໊͔͍͍લ͕΄͍͠ʢখฒײ