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