Introduce Atomic Design with small rework

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!