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

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

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

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

July 31, 2019
Tweet

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%FTJHO5SFOET

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

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

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

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

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

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

    • ݟ௨͕͠ѱ͘ͳͬͨΒ੾Γग़ͯ͠෼ׂ • ϖʔδίϯϙʔωϯτʹ̍ͭίϯϙʔωϯτڬΉͷ͸ׂͱศར
  16. Appendix:私のディレクトリ分け • ೰ΈͲ͜Ζ • ڞ௨ͳ΍ͭͱີ݁߹ͳ΍ͭ͸෼͚Δʁ • ̎૚͘Β͍͸ωετͨ͠΄͏͕෼͚΍͍͢ʁ

  17. まとめ • Atomic Designͦͷ΋ͷ͸
 σβΠϯ͢ΔਓͷͨΊͷπʔϧ • ΤϯδχΞͷͨΊͷπʔϧͰ͸ͳ͍ • ݱ৔ʹΑͬͯ͸ࢗ͞Βͳ͍͜ͱ΋͋Δ •

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