Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

993e327bc2e3a33b8fbecd94dd1c05b0?s=47 Lang-8
April 19, 2019

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

993e327bc2e3a33b8fbecd94dd1c05b0?s=128

Lang-8

April 19, 2019
Tweet

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