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

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

Lang-8
April 19, 2019

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

Lang-8

April 19, 2019
Tweet

More Decks by Lang-8

Other Decks in Programming

Transcript

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

    React.js / Vue.js / Angular / Functional Programming ... Black Mirror / Into to Wild / The weeknd / Ոܥ ϥʔϝϯ / ਂ໷ಛٸ / ΋ͷͷ͚ඣ ...
  2. • Atoms ◦ ButtonɺFontͱ͔͜ΕҎ্෼ׂͰ͖ͳ͍࠷খ୯Ґ • Molecules ◦ 2ͭҎ্ͷAtoms͔Βߏ੒͞ΕΔίϯϙʔωϯτ • Organisms

    ◦ AtomsͱMolecules͔Βߏ੒͞ΕɺͦΕࣗମͰ׬݁͢ΔίϯςϯπΛఏڙ • Templates ◦ ϖʔδͷ਽ܗɻ۩ମతͳίϯςϯπ͸΋ͨͳ͍ • Pages ◦ TemplatesʹίϯςϯπΛ͋ͯ͸Ίͨ΋ͷ
  3. • React.js • Flow ◦ ܕΛఆٛͯ͠ɺ౉͢PropsΛ໌֬ʹ • CSS in JS

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