エンジニアからみたAtomic Designとコンポーネント指向開発

Transcript

1. ΤϯδχΞ͔ΒΈͨAtomic Designͱ ίϯϙʔωϯτࢦ޲։ൃ ࠇాֶਓ - Manato Kuroda

2. ࣗݾ঺հ

3. ࠇాֶਓ - Manato Kuroda Rails Developer Frontend / Design /

   React.js / Vue.js / Angular / Functional Programming ... Black Mirror / Into to Wild / The weeknd / Ոܥ ϥʔϝϯ / ਂ໷ಛٸ / ΋ͷͷ͚ඣ ...

4. ͓࿩͢Δ͜ͱ • Atomic Designͬͯͳʹ • ίϯϙʔωϯτࢦ޲։ൃͬͯͳʹ • Atomic Design &

   ίϯϙʔωϯτࢦ޲։ൃ΍ͬͯΈͨΒͲ͏ͩͬͨͷ

5. Atomic Designͬͯͳʹ

6. Web։ൃͷݱ৔Ͱى͖ͯͨ໰୊

7. “ͳΜ͔ͩ࠷ۙɺUIͷόά͕ଟ͍ͳ͊”

8. “͜ͷϘλϯͱ͜ͷϘλϯݟͨ໨ಉ͚ͩ͡Ͳɺ࣮૷͕ඍົʹҧ ͏΍Μ”

9. ͳʹ͕͓͖͔ͯͨ

10. • σβΠφʔಉ࢜ͰUIίϯϙʔωϯτͷύλʔϯ΍τϯϚ φ͕ඍົʹҧ͏ • ΤϯδχΞಉ࢜ͰUIίϯϙʔωϯτΛॏෳ࣮૷ͨ͠Γɺ ෼ׂͷ࢓ํ͕ҧ͏

11. Ͳ͏ͳΔ͔ʁ

12. • UIͷҰ؏ੑ͕ࣦΘΕΔ • σβΠϯͱ࣮૷ʹ༨ܭʹ͕͔͔࣌ؒΔ • ಉ͡Α͏ͳίʔυ͕େྔੜ࢈

13. ղܾ͢ΔͨΊʹɺ໨తΛܾΊΔ

14. • ෳ਺ͷσβΠφʔ & ΤϯδχΞ͕͍ͯ΋Ұ؏ੑͷ͋ΔσβΠϯΛఏڙ͢Δ • ຖճ࣮૷͢ΔͷͰ͸ͳ͘ɺ࠶ར༻ੑͷ͋ΔUIΛ࡞࣮ͬͯ૷εϐʔτΛ͋͛ Δ Ұ؏ੑͷ͋ΔUIɺσβΠϯΛఏڙ͢Δ

15. Atomic Design

16. Atomic Designͱ͸খ͍͞UIίϯϙʔωϯτΛ૊Έ߹ΘͤͯΑΓ େ͖ͳίϯϙʔωϯτΛ࡞͍ͬͯͨ͘ΊͷσβΠϯɾϑϨʔϜ ϫʔΫ

17. 5ͭͷߏ੒ཁૉ͔ΒͳΔ

18. None

19. • Atoms ◦ ButtonɺFontͱ͔͜ΕҎ্෼ׂͰ͖ͳ͍࠷খ୯Ґ • Molecules ◦ 2ͭҎ্ͷAtoms͔Βߏ੒͞ΕΔίϯϙʔωϯτ • Organisms

    ◦ AtomsͱMolecules͔Βߏ੒͞ΕɺͦΕࣗମͰ׬݁͢ΔίϯςϯπΛఏڙ • Templates ◦ ϖʔδͷ਽ܗɻ۩ମతͳίϯςϯπ͸΋ͨͳ͍ • Pages ◦ TemplatesʹίϯςϯπΛ͋ͯ͸Ίͨ΋ͷ
20. None
21. None
22. None

23. ໨త

24. • Ұ؏ੑͷ͋ΔUIΛఏڙ͢Δ • UIίϯϙʔωϯτͷཻ౓ͷڞ௨ೝࣝΛ͢Δ ◦ ڞ௨ೝࣝΛ΋ͭ͜ͱͰίϛϡχέʔγϣϯ͕ԁ׈ʹ

25. ίϯϙʔωϯτࢦ޲։ൃͬͯͳʹ

26. ίϯϙʔωϯτࢦ޲ͱ͸

27. ϓϩάϥϜͷ෦඼Λ૊Έ߹Θͤͯιϑτ΢ΣΞΛ։ൃ͢ΔελΠϧ

28. ͳͥίϯϙʔϯωϯτࢦ޲Ͱ։ൃ͢Δͷ͔

29. • ίϯϙʔωϯτ୯ҐͰςετͰ͖Δ • ෆ۩߹ͷϦεΫɾϙΠϯτΛݮΒ͢͜ͱ͕Ͱ͖Δ • ϝϯςφϯε͕͠΍͘͢ͳΔ • ղܾ͢Δ໰୊͕খ͘͞ͳΔ

30. ίϯϙʔωϯτઃܭͷجຊ

31. • ΧϓηϧԽ͞Ε͍ͯΔ • ஔ͖׵͑Մೳ • ࠶ར༻ੑ͕͋Δ • ίϯϙʔωϯτͱผͷίϯϙʔωϯτΛ૊Έ߹ΘͤΔ͜ ͱ͕Ͱ͖Δ

32. Atomic Design & ίϯϙʔωϯτ ࢦ޲։ൃ΍ͬͯΈͨΒͲ͏ͩͬͨ ͷ

33. Ͳ͏΍͔ͬͨ

34. • React.js • Flow ◦ ܕΛఆٛͯ͠ɺ౉͢PropsΛ໌֬ʹ • CSS in JS

    ◦ Styled-componentͰ҆શͳείʔϓ؅ཧ • Atomic Design ◦ AtomɺMoleculeɺOrganism·ͰͰ෼͚Δ • StoryBook ◦ Sample

35. Α͔ͬͨ͜ͱ

36. • มߋʹڧ͍UIίϯϙʔωϯτΛ࡞Εͨ • ৽نը໘ͷ࣮૷εϐʔυ্͕͕ͬͨ • ςετ͕͠΍͍͢ͷͰϝϯςφϒϧʹͳͬͨ • css஌Βͳͯ͘΋αΫοͱ៉ྷͳUI࡞ΕΔΑ͏ʹͳͬͨ

37. ͭΒ͔ͬͨ͜ͱ

38. • ύλʔϯ͕૿͑ग़͢ͱɺؔ৺ͷ෼཭͕೉͘͠ͳΔ ◦ ୯Ұ੹೚ͷݪଇΛकΔ͜ͱ (Single Responsibility Principle) • ModulesͱOrganisms࿦૪ •

    มͳ࣮૷ʹ͢Δͱ٧Ή • σʔλΛड͚౉͢ωετߏ଄͕ਂ͘ͳΔ (Reactͷ͓࿩)

39. Atomic DesignΛݫີʹकΔඞཁ͸ͳ͍

40. “ڞ௨ೝࣝΛ΋ͭ͜ͱͰίϛϡχέʔγϣϯΛԁ ׈ʹɻࣗ෼ͨͪͰΞϨϯδͯ͠΋Α͍”

41. ·ͱΊ

42. ៉ྷͳUIΛఏڙ͢Ε͹ Ϣʔβʔ΋happy