エンジニアからみた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ͭͷߏ੒ཁૉ͔ΒͳΔ
19. • Atoms ◦ ButtonɺFontͱ͔͜ΕҎ্෼ׂͰ͖ͳ͍࠷খ୯Ґ • Molecules ◦ 2ͭҎ্ͷAtoms͔Βߏ੒͞ΕΔίϯϙʔωϯτ • Organisms ◦ AtomsͱMolecules͔Βߏ੒͞ΕɺͦΕࣗମͰ׬݁͢ΔίϯςϯπΛఏڙ • Templates ◦ ϖʔδͷ਽ܗɻ۩ମతͳίϯςϯπ͸΋ͨͳ͍ • Pages ◦ TemplatesʹίϯςϯπΛ͋ͯ͸Ίͨ΋ͷ
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