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
デザイン編 Hatena Engineer Seminar #19
Search
takuwolog
April 01, 2022
Design
3
1.2k
デザイン編 Hatena Engineer Seminar #19
takuwolog
April 01, 2022
Tweet
Share
Other Decks in Design
See All in Design
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
17
5.2k
実務のための マイクロ インタラクション入門
shingo2000
0
310
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.5k
Crafting Blog covers: AI tools vs Human Illustrators. Who is the winner?
strongeron
0
120
Product-Writing
aguringo
5
2.7k
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
ChatGPTを活用したUI勉強会のススメ
abokadotyann
20
12k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
170
231129_FOSS4G-ASIA-2023_kato
hjmkth
0
270
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
340
UXデザイナーというものが アジャイルに入ってみた!
muture
2
2k
リリース1ヶ月後で機能をなくした話
hinofu
1
650
Featured
See All Featured
Statistics for Hackers
jakevdp
789
220k
We Have a Design System, Now What?
morganepeng
42
6.7k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Facilitating Awesome Meetings
lara
39
5.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Code Review Best Practice
trishagee
54
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
A Philosophy of Restraint
colly
195
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Transcript
Hatena Engineer Seminar #19 id: σβΠϯฤ ΧΫϤϜͷΛݟਾٕ͑ͨज़ takuwolog 2022.03.30
id:takuwolog ҏ౻ ϊϕϧνʔϜϦʔυσβΠφʔ
σβΠφʔ͕ΤϯδχΞͱ ڠۀͯ͠ίϯϙʔωϯτࢦͰ 3FBDUҠߦͨ͠ ࠓճͷ͓
ͷલఏ • ΧΫϤϜαϙʔλʔζύεϙʔτͷຊ֨తͳ։ൃ͕8݄͔Βελʔ τ • ͜ͷ։ൃ͔ΒReactҠߦΛ։࢝͠·ͨ͠ ◦ ಉ͡λΠϛϯάͰσβΠϯγεςϜͷߏங։࢝ • σβΠφʔۀͰHTMLͱCSSΛॻ͍͍ͯ·͢
◦ Ϣʔβʔͷखʹ৮ΕΔσβΠϯΛ࠷ޙ·Ͱ্͛Δ͜ͱ͕ త • σβΠφʔReactʹ৮Δͷ΄΅ॳΊͯͰ͢
४උ͢Δ ڞ௨ೝࣝΛἧ͑Δ
ϖʔδ͔Βίϯϙʔωϯτ globalNav (header) footer sidebar heroHeader main globalNav (header) footer
sidebar heroHeader main
ͳͥڠۀͯ͠ίϯϙʔωϯτΛ࡞Δͷ͔ ίϯϙʔωϯτʹݟͨͱৼΔ͍ʹؔ͢Δׂ͕͋Δ߹ ɺΤϯδχΞ͚ͩͰܾΊΕͳ͍ͷͰσβΠφʔҰॹʹ ͳͬͯߟ͍͑ͯ͘ɻ Ұॹʹͳͬͯߟ͍͑ͯ͘தͰϕετͳίϯϙʔωϯτͷ࢟Λ ࡧ͢Δɻ
ίϯϙʔωϯτͷ͍ํΛ໌֬ʹ͢Δ ίϯϙʔωϯτ͕େ͖͘ͳΓ͗͢ͳ͍Α͏ʹɺ·ͨ૿ ͑͗͢ͳ͍Α͏ʹɺԿΛ͢Δίϯϙʔωϯτͳͷ͔ɺ νʔϜͰೝࣝΛἧ͑Δɻ
UI Organisms etc… Ұ൪খ͍͞୯Ґ υϝΠϯʹґଘ͠ͳ͍ υϝΠϯݻ༗ͷ ػೳσβΠϯ Icon, TemplateͳͲ ίϯϙʔωϯτͷ୯Ґ
ڠۀ͢Δ ίϯϙʔωϯτ։ൃͷ ϫʔΫϑϩʔ
σβΠϯϞοΫ͔Β ίϯϙʔωϯτΛׂ͢Δ
ϖʔδ͔Βίϯϙʔωϯτʹ
ϖʔδ୯ҐͷϞοΫ
ίϯϙʔωϯτʹׂ
UI Organisms άϧʔϐϯά͢Δ
໋໊ɾґଘؔ
variantΛग़͓ͯ͘͠
σβΠϯπʔϧ্ͰίϯϙʔωϯτԽͯ͠λεΫʹ͢Δ
૬ஊɺ࣮ɺڞ༗
ࠔͬͨΒૉૣ͘૬ஊ • ϖΞϓϩ • ͨ͘͞Μ࣭ͯ͠ɺҙݟΛग़ ͠߹ͬͯɺݟΛͨΊΔ • ϨϏϡʔ૬ஊͷ
• Ͱݟͳ͕Βίϯϙʔωϯτ Λ࡞͍͚ͬͯΔͷͰσβΠ φʔϏϦςΟ͕ߴ͍ ◦ σβΠϯϨϏϡʔḿΔ • ͋Δఔ·Ͱ࡞ۀͯ͠ɺ࠷ऴ ௐ࣮ࡍͷը໘Λ࡞Γͳ͕ ΒਐΊͨ
StotybookͰ֬ೝ͠ͳ͕ΒਐΊΔ
ػೳͱݟͨͷ σβΠϯͷ߹Ͱى͜ΔίϯϙʔωϯτͷංେԽΛ͑Δ <Link> <LinkAppearance variant=’underline’ hoverVariant=’blue’>ϦϯΫ</LinkAppearance> </Link> <Link> <a> <ButtonAppearance
variant=’initial’>Ϙλϯ</ButtonAppearance> </a> </Link> LinkAppearanceͷvariants: ButtonAppearanceͷvariants:
νʔϜͰڞ༗͢Δ • ৽͍ܾ͠·ΓࣄจॻԽ͢Δ • ෳਓͰಉ࣌ਐߦͰ࡞ۀͯ͠ΔͷͰɺࣗͷΒͳ͍ͱ͜ΖͰ༷ʑͳ͜ ͱ͕ى͜Δ ◦ Β͵ؒʹศརͳίϯϙʔωϯτ͕ര͢Δ͜ͱ͋Δ ◦ ίϯϙʔωϯτͷ͍ํStorybookʹॻ͍͓ͯ͘
• ࡞ͬͨίϯϙʔωϯτΛνʔϜʹհ͢Δ ◦ ϓϩδΣΫτΛΓ্͛Δ׆ಈ
ঢ়گʹԠͯ͡ ৬छΛӽڥͯ͠։ൃ͢Δ
σβΠφʔ ΤϯδχΞ ঢ়گʹΑͬͯɺσβΠφʔͷख͕Γͳ͍ɺ ·ͨΤϯδχΞͷख͕Γͳ͍͜ͱ͕͋Δɻ ͜Ε·ͰͷݟΛ׆͔ͯ͠ӽڥͯ͠ΈΔɻ
σβΠφʔ͕ΤϯδχΞྖҬʹೖͬͯΈΔ • ίϯϙʔωϯτΛ৽نͰ࡞Δ ◦ ίʔυҰൃͰ৽نͰίϯϙʔωϯτͷܗ͕࡞Εͨ ◦ ੩తͳDOMΛॻ͍ͯͦ͜ʹελΠϧΛ͍ͯͯ͘ • طଘͷίϯϙʔωϯτΛ֦ு͢Δ ◦
σβΠϯʹؔ͢ΔPropsVariantΛ૿͢ σβΠφʔ͚ͩͰͰ͖Δ͜ͱΛ૿ͯ͠ͱޮΛ্͛ͨ
ΤϯδχΞʹσβΠφʔྖҬΛͬͯΒ͏ • ίϯϙʔωϯτ͕ἧͬͯ͘ΔͱͦΕΛΈ߹Θͤͯը໘Λ࡞Δ ͜ͱ͕Ͱ͖Δ ◦ σβΠϯͷ࠷ऴௐ͚ͩσβΠφʔ͕ೖΔ ◦ ࠷ऴௐ͚ͩͳͷͰ0͔Β࡞ΔΑΓ͍ ྟػԠมʹཱͪճΔ͜ͱͰϦιʔεΛ࠷େݶʹ׆͔͢
ӽڥͷ৺ߏ͑ • ·ͣͱΓ͋͑ͣͬͯΈΔ • ࣭lintVRTɺϨϏϡʔͳͲͰ୲อ͢Δ • ৺ཧత҆શੑσΠϦʔεΫϥϜͳͲͰ૬ஊ ্ख͍ͬͯ͘Δ߹ײँ͢Δɺͦͯ͠๙Ί߹͏ʂ
·ͱΊ
• ڞ௨ೝࣝΛἧ͑ͯҰॹʹ࡞ۀͰ͖ΔΑ͏ʹ • ϞοΫ͔ΒίϯϙʔωϯτͷઃܭਤΛ࡞Δ • ݟΛਂΊͯɺঢ়گʹԠͯ͡ӽڥͯ͠ΈΔ ΤϯδχΞͱڠۀͯ͠ίϯϙʔωϯτࢦͰReact Ҡߦ͢ΔͨΊʹ