Introduce Atomic Design with small rework

6d74b5edd1571a5cf7ecfec9c694f26b?s=47 kenshir0f
December 10, 2018

Introduce Atomic Design with small rework

https://note.mu/fjkn/n/n9c8f8921b13c

2018年12月10日(月)のアトミックデザインを考える会でお話しした「手戻りが少ないアトミックデザイン」の登壇資料です。

6d74b5edd1571a5cf7ecfec9c694f26b?s=128

kenshir0f

December 10, 2018
Tweet

Transcript

  1. Cookpad Inc. 2018.12.10 AtomicDesignΛߟ͑Δձ ख໭Γ͕গͳ͍ΞτϛοΫσβΠϯͷಋೖ ౻Ҫݠ࢜࿕

  2. Cookpad Inc. All Rights Reserved. ౻Ҫݠ࢜࿕ kenshir0f ΫοΫύουגࣜձࣾ Komercoࣄۀ෦σβΠφʔ ࣗݾ঺հ

  3. Cookpad Inc. All Rights Reserved.

  4. Cookpad Inc. All Rights Reserved. ৽نࣄۀͰΞτϛοΫσβΠϯΛಋೖ͓ͨ͠࿩ ͜Ε͔Β࿩͢͜ͱ

  5. Cookpad Inc. All Rights Reserved. ։ൃॳظͷࠒ ϒϥϯσΟϯάɺମݧઃܭɺ6*ɺΨΠυϥΠϯ࡞੒ͳͲฒߦ͍ͯͨ͠ͷͰ͕࣌ؒ଍Γͳ͍ σβΠφʔ1 iOSΤϯδχΞ4 ΞϓϦ2

  6. Cookpad Inc. All Rights Reserved. ͜ͷͱ͖ײ͍ͯͨ͜͡ͱ σβΠϯσʔλΛΩϨΠʹ؅ཧͯ͠ޮ཰Λ্͍͛ͨʜ

  7. ΞτϛοΫσβΠϯ͞ΜɺͳΜͱ͔ͯ͘͠Εʜ

  8. Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯʹظ଴͍ͯͨ͜͠ͱ 1. σβΠϯσʔλͷ؅ཧָ͕ʹͳΔ 2. ࢖͍ճ͢ίϯϙʔωϯτͷमਖ਼ɾద༻ָ͕ʹͳΔ

    3. ͦͷ݁ՌɺσβΠϯ͢Δεϐʔυ্͕͕Δ
  9. ಋೖͯ͠Έͨͱ͖ͷֶͼΛ͝঺հ͠·͢ɻ

  10. Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯಋೖͷϙΠϯτ 1. ֮ޛΛ΋ͭ 2. λΠϛϯάͱྔ

    3. ᐆດ͞Λڐ༰͢Δ ಋೖલ ಋೖத ಋೖޙ
  11. Cookpad Inc. All Rights Reserved. 1. ֮ޛΛ΋ͭ 2. λΠϛϯάͱྔ 3.

    ᐆດ͞Λڐ༰͢Δ ΞτϛοΫσβΠϯಋೖͷϙΠϯτ ಋೖલ ಋೖத ಋೖޙ
  12. ୈ1࿩ΞτϛοΫσβΠϯΛಋೖ͢Δ֮ޛʁ ʙಋೖલʙ

  13. Cookpad Inc. All Rights Reserved. ಋೖ͢Δલͷ๻ Atomic DesignΠέͯΔʂ ͳʹΑΓ໊લΧοί͍͍ʂ ؅ཧ͠΍͍͢σβΠϯߏஙγεςϜʂ

    ࢖͍ճͤͯޮ཰తʂ
  14. Cookpad Inc. All Rights Reserved. ͱɺࢥ͍ͬͯͨ࣌ظ͕๻ʹ΋͋Γ·ͨ͠ʜ

  15. Cookpad Inc. All Rights Reserved. ࣮ࡍʹಋೖͯ͠Έͨ͋ͱ ΊͬͪΌ஍ຯʙʙʙʙ ͱ͸͍͑΍ͬͺޮ཰ੑ͸্͕ͬͨ ॳճͷߏஙʹ͕͔͔࣌ؒΔ ఆظతʹϝϯςφϯεඞཁɺ͚ͬ͜͏ਏ͍

  16. Cookpad Inc. All Rights Reserved. ͳʹ͕஍ຯͳͷʁ ੔ཧ੔಴͕ࢥͬͯͨΑΓ͔͔࣌ؒΔʜ

  17. Cookpad Inc. All Rights Reserved. ίϯϙʔωϯτ੔ཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ੔ཧ੔಴

    ੔ཧ੔಴ σβΠϯ σβΠϯͱ੔ཧΛ܁Γฦ͠ɺ͔ͭఆظతʹ΍Δඞཁ͕͋Δ t
  18. Cookpad Inc. All Rights Reserved. ίϯϙʔωϯτ੔ཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ੔ཧ੔಴

    ੔ཧ੔಴ σβΠϯ σβΠϯͱ੔ཧΛ܁Γฦ͠ɺ͔ͭఆظతʹ΍Δඞཁ͕͋Δ t σβΠϯ͍ͯ͠ͳ͍͠ਐ௙͸ࢭ·ͬͯ͠·͏
  19. Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯ͢ΔͳΒʜ 1. ա౓ͳظ଴͸ͤͣʹ΍͍ͬͯ͜͏ʂ 3. ਐ௙͕ࢭ·Δ͜ͱΛ༧Ί఻͑Α͏ʂ

    2. ఆظతͳ੔ཧ੔಴͕଴͍ͬͯΔʂ ͱɺ౰࣌ͷࣗ෼ʹݴ͍͔ͨͬͨʜ
  20. ୈ2࿩ಋೖͷλΠϛϯάͱྔ͸৻ॏʹʂ ʙಋೖதʙ

  21. Cookpad Inc. All Rights Reserved. ཧ૝ͷίϯϙʔωϯτ੔ཧͷλΠϛϯά ʜ σβΠϯ σβΠϯ ੔ཧ੔಴

    ੔ཧ੔಴ σβΠϯ t
  22. Cookpad Inc. All Rights Reserved. ݱ࣮͸ͦΜͳʹ؁͘ͳ͔ͬͨʜ ࣦഊஊ

  23. Cookpad Inc. All Rights Reserved. ࣦഊ1ಋೖλΠϛϯά͕஗͔ͬͨ σβΠϯ ੔ཧ੔಴ σβΠϯ ौ͍ͬͨͤͰ͔ͳΓ͔͔࣌ؒͬͨ

    ʜ ։ൃελʔτ ΞτϛοΫσβΠϯ஌Δ ΞτϛοΫσβΠϯಋೖ ಋೖΛߟ͑Δ
  24. Cookpad Inc. All Rights Reserved. σβΠϯ ੔ཧ੔಴ ͜͜ͰऴΘΕ͹·ͩ·͠

  25. Cookpad Inc. All Rights Reserved. ࣦഊ2ίϯϙʔωϯτԽΛ΍Γ͗ͨ͢ʜ σβΠϯ ੔ཧ੔಴ ͦΜͳʹ࢖ΘΕ͍ͯͳ͍σβΠϯ΋ ෆඞཁʹίϯϙʔωϯτԽͯ͠͠·ͬͨ

  26. Cookpad Inc. All Rights Reserved. ౰࣌ͷࣗ෼ʹݴ͍͍ͨ ΄ͱΜͲͷσβΠϯ͸มߋ͔࡟আ͞ΕΔ͔Β ݫີʹ࡞Βͳͯ͘େৎ෉

  27. Cookpad Inc. All Rights Reserved. ಋೖ࣌ͷϙΠϯτ 1. ಋೖͷλΠϛϯά͸৻ॏʹʂ 2. ద౓ʹΞτϛοΫσβΠϯΛద༻͠Α͏ʂ

    ૣ͗ͯ͢΋μϝͩ͠ɺ஗͗͢Δͱޙ͕େม ؤுͬͯ࡞ͬͨίϯϙʔωϯτ͸͍͍ͩͨ࢖ΘΕͳ͍
  28. ୈ3࿩ᐆດ͞Λڐ༰͠Α͏ʂ ʙಋೖޙʙ

  29. Cookpad Inc. All Rights Reserved. Α͘ฉ͔ΕΔ࣭໰ Q. ίϯϙʔωϯτͷཻ౓͸Ͳ͏ͯ͠·͔͢ʁ

  30. Cookpad Inc. All Rights Reserved. Α͘ฉ͔ΕΔ࣭໰ Q. ίϯϙʔωϯτͷཻ౓͸Ͳ͏ͯ͠·͔͢ʁ A.σβΠφʔͱΤϯδχΞͰ࿩͠߹ܾͬͯΊͯ·͢ɻ

  31. Cookpad Inc. All Rights Reserved. Α͘ฉ͔ΕΔ࣭໰ ͞ΒʹɺϑΣʔζʹΑͬͯมߋ͍ͯ͠·͢ɻ Q. ίϯϙʔωϯτͷཻ౓͸Ͳ͏ͯ͠·͔͢ʁ A.σβΠφʔͱΤϯδχΞͰ࿩͠߹ܾͬͯΊͯ·͢ɻ

  32. Cookpad Inc. All Rights Reserved. ໰୊Ͱ͢ʂ ͜ͷϘλϯ͸Atoms? Molecules? ૹ৴͢Δ

  33. Cookpad Inc. All Rights Reserved. ໰୊Ͱ͢ʂ ͜ͷϘλϯ͸Atoms? Molecules? ૹ৴͢Δ σβΠφʔ

    جຊతͳϘλϯͳͷͰAtoms͔ͳʂ
  34. Cookpad Inc. All Rights Reserved. ໰୊Ͱ͢ʂ ͜ͷϘλϯ͸Atoms? Molecules? ૹ৴͢Δ σβΠφʔ

    ΤϯδχΞ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ onClickͰσʔλΛૹ৴͍ͨ͠ͷͰ Form಺Ͱ࢖͏ʹͨ͠SubmitButtonͱͯ͠ Molecules͔ͳʁ
  35. Cookpad Inc. All Rights Reserved. ໰୊Ͱ͢ʂ ͜ͷϘλϯ͸Atoms? Molecules? ૹ৴͢Δ جຊతͳϘλϯͳͷͰAtoms͔ͳʂ

    σβΠφʔͱΤϯδχΞͰࢹ఺͕ҧ͏ ·ͣ͸͜ͷࠩΛཧղ͢Δ σβΠφʔ ΤϯδχΞ onClickͰσʔλΛૹ৴͍ͨ͠ͷͰ Form಺Ͱ࢖͏ʹͨ͠SubmitButtonͱͯ͠ Molecules͔ͳʁ
  36. Cookpad Inc. All Rights Reserved. ϑΣʔζʹΑͬͯঃʑʹมΘΔ͜ͱΛڐ༰͢Δ ૹ৴͢Δ 2. ImageUploadForm 3.

    SubmitButton 4. Button 1. UserProfileImageUploadForm ৽نࣄۀ͸εϐʔυ༏ઌͳͷͰޙ͔Βந৅Խ͍ͯ͘͠ (Organisms) (Molecules) (Atoms) (Atoms) ࢖ΘΕͳ͍ػೳʹͳΔՄೳੑ͕͋ΔͷͰແཧʹϨΠϠʔΛԼ͛ͳ͍
  37. Cookpad Inc. All Rights Reserved. ͜ͷߟ͑ํ͕େࣄ ΄ͱΜͲͷσβΠϯ͸มߋ͔࡟আ͞ΕΔ͔Β ݫີʹ࡞Βͳͯ͘େৎ෉

  38. ݫີ͞ʹͩ͜ΘΒͣɺ·ͣ͸લʹਐ΋͏ʂ

  39. Cookpad Inc. All Rights Reserved. ΞτϛοΫσβΠϯಋೖͷ·ͱΊ 1. ֮ޛΛ΋ͱ͏ʂ 2. λΠϛϯάͱྔʹ஫ҙʂ

    3. ᐆດ͞Λڐ༰͠Α͏ʂ ಋೖલ ಋೖத ಋೖޙ
  40. Α͍ΞτϛοΫσβΠϯϥΠϑΛʂ Thank you!