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

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આʁ

7. None

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ͦͷ΋ͷ͸
 σβΠϯ͢ΔਓͷͨΊͷπʔϧ • ΤϯδχΞͷͨΊͷπʔϧͰ͸ͳ͍ • ݱ৔ʹΑͬͯ͸ࢗ͞Βͳ͍͜ͱ΋͋Δ •

    ͳΜ໊͔͍͍લ͕΄͍͠ʢখฒײ