難しく考えない Atomic design （既存への導入はリファクタリングのように）

Atomic design（アトミック・デザイン）の基礎を簡単に紹介した際のスライド

Transcript

1. ೉͘͠ߟ͑͗͢ͳ͍
   "UPNJD
   %FTJHO dϦϑΝΫλϦϯάతʹ࣮ࢪͯ͠͸͍͔͕ʁd "UPNT .PMFDVMFT 0SHBOJTNT 5FNQMBUFT 1BHFT
2. "UPNJD
   %FTJHO "UPNJD
   %FTJHO "UPNJD
   %FTJHO
   ͷ
   ώΤϥϧΩʔ "UPNT ̍ # M P H ˜
   
   :VUP
   )POHP Ϙλϯ ϥϕϧ FUD
   ʜ .PMFDVMFT  ݕࡧจࣈ ݕࡧ ݕࡧػೳ ϒϩάΧʔυ 0SHBOJTNT  FUD
   ʜ ϔομʔ αΠυϝχϡʔ FUD
   ʜ 5FNQMBUFT ̐ ҰཡςϯϓϨʔτ 1BHFT ̑ ࢓ࣄϒϩάҰཡ FUD
   ʜ FUD
   ʜ
3. "UPNT "UPNT ϖʔδΛߏ੒͢Δ࠷খཻ౓ͷ୯Ґ # M P H ˜
   
   :VUP
   )POHP Ϙλϯ ϥϕϧ จࣈ Πϯϓοτ ϩΰ ϩΰը૾ FUD
   ʜ
4. .PMFDVMFT .PMFDVMFT ୯Ұػೳɺ୯Ұ੹೚Λ΋ͬͨ·ͱ·Γ # M P H ˜
   
   :VUP
   )POHP ݕࡧจࣈ ݕࡧ ݕࡧػೳ ϒϩάΧʔυ ˠ
   Πϯϓοτʢ"UPNTʣʴϘλϯʢ"UPNTʣ ˠ
   ը૾ʢ"UPNTʣʴϥϕϧʢ"UPNTʣʴςΩετʢ"UPNTʣ FUD
   ʜ
5. 0SHBOJTNT 0SHBOJTNT ෳ਺ͷ
   "UPNT
   
   .PMFDVMFT
   
   ଞͷ0SHBOJTNT
   Ͱߏ੒͞ΕΔ # M P H ˜
   
   :VUP
   )POHP ϔομʔ αΠυϝχϡʔ ˠ
   Ϙλϯʢ"UPNTʣ
   ɹʴϘλϯʢ"UPNTʣʜ ˠ
   Ϙλϯʢ"UPNTʣ
   ɹʴϋϯόʔΨʔը૾ʢ"UPNTʣ
   ɹʴαΠυϝχϡʔʢ0SHBOJTNTʣ FUD
   ʜ
6. 5FNQMBUFT 5FNQMBUFT ϖʔδͷσβΠϯͷΈΛදݱͨ͠΋ͷ # M P H ˜
   
   :VUP
   )POHP ҰཡςϯϓϨʔτ ը૾ هࣄλΠτϧ ςΩετ ը૾ هࣄλΠτϧ ςΩετ -BCFM FUD
   ʜ ༷ʑͳ
   w "UPNT
   w .PMFDVMFT
   w 0SHBOJTNT
   Ͱߏ੒͞Ε͍ͯΔ
7. 1BHFT 1BHFT ࣮ࡍͷϖʔδ # M P H ˜
   
   :VUP
   )POHP ࢓ࣄҰཡϖʔδ FUD
   ʜ ϓϥΠϕʔτҰཡϖʔδ
8. ʲݱ৔ͷ੠ʳ
   ͸͡Ί͔Β
   ؅ཧͷࢦ਑͕͋Ε͹
   ۤ࿑ͤΜͷͩΑ
   
9. ͖͋ΒΊͳ͍Ͱʜ
10. 5FNQMBUFTˡ1B 5FNQMBUFTˡ1BHFT
    ڞ௨Խ # M P H ˜
    
    :VUP
    )POHP ࢓ࣄҰཡϖʔδ ϓϥΠϕʔτҰཡϖʔδ 1BHFT ̑ ը૾ هࣄλΠτϧ ςΩετ ը૾ هࣄλΠτϧ ςΩετ -BCFM ൈग़ ҰཡςϯϓϨʔτ 5FNQMBUFT ̐ ແཧͳ͘ϦϑΝΫλϦϯά ԣల։ ͻͱͭ
    ڞ௨Խ͕
    ऴΘͬͨΒɺ
    ແཧͳ͘
    σϓϩΠʂ
11. 0SHBOJTNTˡ5F 0SHBOJTNTˡ5FNQMBUFT
    ڞ௨Խ # M P H ˜
    
    :VUP
    )POHP ҰཡςϯϓϨʔτ wࣗݾ঺հ
    wϒϩάهࣄ
    wϓϥΠόγʔϙϦγʔ 5FNQMBUFT ̐ ແཧͳ͘ϦϑΝΫλϦϯά ൈग़ ϔομʔ ԣల։ 0SHBOJTNT  ͻͱͭ
    ڞ௨Խ͕
    ऴΘͬͨΒɺ
    ແཧͳ͘
    σϓϩΠʂ
12. ͨͩͷ
    ڞ௨Խ
    ϦϑΝΫλϦϯά
    ͡Όͳ͍͔
13. "UPNJD
    %FTJHO "UPNJD
    %FTJHO΁ͷొΓํΠϝʔδ "UPNT ̍ # M P H ˜
    
    :VUP
    )POHP Ϙλϯ ϥϕϧ FUD
    ʜ .PMFDVMFT  ݕࡧจࣈ ݕࡧ ݕࡧػೳ ϒϩάΧʔυ 0SHBOJTNT  FUD
    ʜ ϔομʔ αΠυϝχϡʔ FUD
    ʜ 5FNQMBUFT ̐ ҰཡςϯϓϨʔτ 1BHFT ̑ ࢓ࣄϒϩάҰཡ ϓϥΠϕʔτ
    ϒϩάҰཡ FUD
    ʜ ˓˓ϖʔδ ✗✗ϖʔδ ཻ౓Λࡉ͔͍୯Ґ΁ దԠൣғΛ޿͍ͯ͘͘͠
14. .PMFDVMFT ͲͷൣғͰ΋ͬͯ
    ʮ୯Ұػೳʯͱ͢Δʁ
15. 0SHBOJTNT ଞͷ0SHBOJTNTͷแؚ
    ͕ՄೳͰ؅ཧ͕൥ࡶʹ
16. ˜
    
    :VUP
    )POHP νʔϜͰ࿩ͦ͏ʢࡶ
17. ˜
    
    :VUP
    )POHP )1
    5XJUUFS
    2JJUB
    (JU)VC
    :PV5VCF IPOHPEFW
    IOHZVU
    IOHZVU
    IOHZVU
    $IBOOFM
    -JOL 8FC൛͸ͪ͜Β