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
   

   View Slide

2. Atomic Design࢖ͬͯ·͔͢ʁ
   

   View Slide

3. Atomic Design

   ͏·͍ͬͯ͘·͔͢ʁ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. View Slide

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

   σβΠϯγεςϜͷͻͱͭ
   

   View Slide

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

   ʕʕ8FC%FTJHO5SFOET
   

   View Slide

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

    View Slide

11. ຊདྷɺΤϯδχΞͷͨΊͷ΋ͷͰ͸ͳ͍
    ʢΤϯδχΞʹͱͬͯ࢖͍΍͍͢΋ͷͰ͸͋Δʣ
    

    View Slide

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

    View Slide

13. 刺さる現場
    • ܧଓ։ൃɺن໛͕େ͖͍
    • σβΠφʔ͞Μͱͷ

    ڞ௨ݴޠͱͯ͠Atomic Design͕ػೳ͢Δ
    • σβΠφʔ͞Μ͕

    ίʔυΛར༻ͯ͠σβΠϯ͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. まとめ
    • Atomic Designͦͷ΋ͷ͸

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

    View Slide