Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エンジニアからみたAtomic Designとコンポーネント指向開発
Search
Lang-8
April 19, 2019
Programming
0
1.8k
エンジニアからみたAtomic Designとコンポーネント指向開発
Lang-8
April 19, 2019
Tweet
Share
More Decks by Lang-8
See All by Lang-8
株式会社Lang-8 会社案内資料 / We are hiring 2022
lang8
2
45k
株式会社Lang-8 会社案内資料 / We are hiring 2023
lang8
0
810
Lang-8_12th_Anniversary
lang8
3
1.2k
Lang-8会社案内資料 / We are hiring
lang8
14
410k
OSSを作って公開した話
lang8
1
1.8k
個人開発のススメ
lang8
0
1.8k
メイプルストーリーMの課金ポイントまとめ
lang8
0
200
悲劇のエース スタルヒン
lang8
1
1.7k
Taiwan (weird) Superstition
lang8
0
1.8k
Other Decks in Programming
See All in Programming
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
360
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
Software Architecture
hschwentner
6
2.3k
AkarengaLT vol.38
hashimoto_kei
1
120
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
310
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
260
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
510
理論と実務のギャップを超える
eycjur
0
180
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
110
Developer Joy - The New Paradigm
hollycummins
1
360
EMこそClaude Codeでコード調査しよう
shibayu36
0
370
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
14k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Building an army of robots
kneath
305
46k
Documentation Writing (for coders)
carmenintech
75
5.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Six Lessons from altMBA
skipperchong
29
4k
Statistics for Hackers
jakevdp
799
220k
Transcript
ΤϯδχΞ͔ΒΈͨAtomic Designͱ ίϯϙʔωϯτࢦ։ൃ ࠇాֶਓ - Manato Kuroda
ࣗݾհ
ࠇాֶਓ - Manato Kuroda Rails Developer Frontend / Design /
React.js / Vue.js / Angular / Functional Programming ... Black Mirror / Into to Wild / The weeknd / Ոܥ ϥʔϝϯ / ਂಛٸ / ͷͷ͚ඣ ...
͓͢Δ͜ͱ • Atomic Designͬͯͳʹ • ίϯϙʔωϯτࢦ։ൃͬͯͳʹ • Atomic Design &
ίϯϙʔωϯτࢦ։ൃͬͯΈͨΒͲ͏ͩͬͨͷ
Atomic Designͬͯͳʹ
Web։ൃͷݱͰى͖ͯͨ
“ͳΜ͔ͩ࠷ۙɺUIͷόά͕ଟ͍ͳ͊”
“͜ͷϘλϯͱ͜ͷϘλϯݟͨಉ͚ͩ͡Ͳɺ࣮͕ඍົʹҧ ͏Μ”
ͳʹ͕͓͖͔ͯͨ
• σβΠφʔಉ࢜ͰUIίϯϙʔωϯτͷύλʔϯτϯϚ φ͕ඍົʹҧ͏ • ΤϯδχΞಉ࢜ͰUIίϯϙʔωϯτΛॏෳ࣮ͨ͠Γɺ ׂͷํ͕ҧ͏
Ͳ͏ͳΔ͔ʁ
• UIͷҰ؏ੑ͕ࣦΘΕΔ • σβΠϯͱ࣮ʹ༨ܭʹ͕͔͔࣌ؒΔ • ಉ͡Α͏ͳίʔυ͕େྔੜ࢈
ղܾ͢ΔͨΊʹɺతΛܾΊΔ
• ෳͷσβΠφʔ & ΤϯδχΞ͕͍ͯҰ؏ੑͷ͋ΔσβΠϯΛఏڙ͢Δ • ຖճ࣮͢ΔͷͰͳ͘ɺ࠶ར༻ੑͷ͋ΔUIΛ࡞࣮ͬͯεϐʔτΛ͋͛ Δ Ұ؏ੑͷ͋ΔUIɺσβΠϯΛఏڙ͢Δ
Atomic Design
Atomic Designͱখ͍͞UIίϯϙʔωϯτΛΈ߹ΘͤͯΑΓ େ͖ͳίϯϙʔωϯτΛ࡞͍ͬͯͨ͘ΊͷσβΠϯɾϑϨʔϜ ϫʔΫ
5ͭͷߏཁૉ͔ΒͳΔ
None
• Atoms ◦ ButtonɺFontͱ͔͜ΕҎ্ׂͰ͖ͳ͍࠷খ୯Ґ • Molecules ◦ 2ͭҎ্ͷAtoms͔Βߏ͞ΕΔίϯϙʔωϯτ • Organisms
◦ AtomsͱMolecules͔Βߏ͞ΕɺͦΕࣗମͰ݁͢ΔίϯςϯπΛఏڙ • Templates ◦ ϖʔδͷܗɻ۩ମతͳίϯςϯπͨͳ͍ • Pages ◦ TemplatesʹίϯςϯπΛ͋ͯΊͨͷ
None
None
None
త
• Ұ؏ੑͷ͋ΔUIΛఏڙ͢Δ • UIίϯϙʔωϯτͷཻͷڞ௨ೝࣝΛ͢Δ ◦ ڞ௨ೝࣝΛͭ͜ͱͰίϛϡχέʔγϣϯ͕ԁʹ
ίϯϙʔωϯτࢦ։ൃͬͯͳʹ
ίϯϙʔωϯτࢦͱ
ϓϩάϥϜͷ෦ΛΈ߹ΘͤͯιϑτΣΞΛ։ൃ͢ΔελΠϧ
ͳͥίϯϙʔϯωϯτࢦͰ։ൃ͢Δͷ͔
• ίϯϙʔωϯτ୯ҐͰςετͰ͖Δ • ෆ۩߹ͷϦεΫɾϙΠϯτΛݮΒ͢͜ͱ͕Ͱ͖Δ • ϝϯςφϯε͕͘͢͠ͳΔ • ղܾ͢Δ͕খ͘͞ͳΔ
ίϯϙʔωϯτઃܭͷجຊ
• ΧϓηϧԽ͞Ε͍ͯΔ • ஔ͖͑Մೳ • ࠶ར༻ੑ͕͋Δ • ίϯϙʔωϯτͱผͷίϯϙʔωϯτΛΈ߹ΘͤΔ͜ ͱ͕Ͱ͖Δ
Atomic Design & ίϯϙʔωϯτ ࢦ։ൃͬͯΈͨΒͲ͏ͩͬͨ ͷ
Ͳ͏͔ͬͨ
• React.js • Flow ◦ ܕΛఆٛͯ͠ɺ͢PropsΛ໌֬ʹ • CSS in JS
◦ Styled-componentͰ҆શͳείʔϓཧ • Atomic Design ◦ AtomɺMoleculeɺOrganism·ͰͰ͚Δ • StoryBook ◦ Sample
Α͔ͬͨ͜ͱ
• มߋʹڧ͍UIίϯϙʔωϯτΛ࡞Εͨ • ৽نը໘ͷ࣮εϐʔυ্͕͕ͬͨ • ςετ͕͍͢͠ͷͰϝϯςφϒϧʹͳͬͨ • cssΒͳͯ͘αΫοͱ៉ྷͳUI࡞ΕΔΑ͏ʹͳͬͨ
ͭΒ͔ͬͨ͜ͱ
• ύλʔϯ͕૿͑ग़͢ͱɺؔ৺ͷ͕͘͠ͳΔ ◦ ୯ҰͷݪଇΛकΔ͜ͱ (Single Responsibility Principle) • ModulesͱOrganisms૪ •
มͳ࣮ʹ͢Δͱ٧Ή • σʔλΛड͚͢ωετߏ͕ਂ͘ͳΔ (Reactͷ͓)
Atomic DesignΛݫີʹकΔඞཁͳ͍
“ڞ௨ೝࣝΛͭ͜ͱͰίϛϡχέʔγϣϯΛԁ ʹɻࣗͨͪͰΞϨϯδͯ͠Α͍”
·ͱΊ
៉ྷͳUIΛఏڙ͢Ε Ϣʔβʔhappy