デザイン編 Hatena Engineer Seminar #19
by
takuwolog
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Hatena Engineer Seminar #19 id: σβΠϯฤ ΧΫϤϜͷΛݟਾٕ͑ͨज़ takuwolog 2022.03.30
Slide 2
Slide 2 text
id:takuwolog ҏ౻ ϊϕϧνʔϜϦʔυσβΠφʔ
Slide 3
Slide 3 text
σβΠφʔ͕ΤϯδχΞͱ ڠۀͯ͠ίϯϙʔωϯτࢦͰ 3FBDUҠߦͨ͠ ࠓճͷ͓
Slide 4
Slide 4 text
ͷલఏ ● ΧΫϤϜαϙʔλʔζύεϙʔτͷຊ֨తͳ։ൃ͕8݄͔Βελʔ τ ● ͜ͷ։ൃ͔ΒReactҠߦΛ։࢝͠·ͨ͠ ○ ಉ͡λΠϛϯάͰσβΠϯγεςϜͷߏங։࢝ ● σβΠφʔۀͰHTMLͱCSSΛॻ͍͍ͯ·͢ ○ Ϣʔβʔͷखʹ৮ΕΔσβΠϯΛ࠷ޙ·Ͱ্͛Δ͜ͱ͕ త ● σβΠφʔReactʹ৮Δͷ΄΅ॳΊͯͰ͢
Slide 5
Slide 5 text
४උ͢Δ ڞ௨ೝࣝΛἧ͑Δ
Slide 6
Slide 6 text
ϖʔδ͔Βίϯϙʔωϯτ globalNav (header) footer sidebar heroHeader main globalNav (header) footer sidebar heroHeader main
Slide 7
Slide 7 text
ͳͥڠۀͯ͠ίϯϙʔωϯτΛ࡞Δͷ͔ ίϯϙʔωϯτʹݟͨͱৼΔ͍ʹؔ͢Δׂ͕͋Δ߹ ɺΤϯδχΞ͚ͩͰܾΊΕͳ͍ͷͰσβΠφʔҰॹʹ ͳͬͯߟ͍͑ͯ͘ɻ Ұॹʹͳͬͯߟ͍͑ͯ͘தͰϕετͳίϯϙʔωϯτͷ࢟Λ ࡧ͢Δɻ
Slide 8
Slide 8 text
ίϯϙʔωϯτͷ͍ํΛ໌֬ʹ͢Δ ίϯϙʔωϯτ͕େ͖͘ͳΓ͗͢ͳ͍Α͏ʹɺ·ͨ૿ ͑͗͢ͳ͍Α͏ʹɺԿΛ͢Δίϯϙʔωϯτͳͷ͔ɺ νʔϜͰೝࣝΛἧ͑Δɻ
Slide 9
Slide 9 text
UI Organisms etc… Ұ൪খ͍͞୯Ґ υϝΠϯʹґଘ͠ͳ͍ υϝΠϯݻ༗ͷ ػೳσβΠϯ Icon, TemplateͳͲ ίϯϙʔωϯτͷ୯Ґ
Slide 10
Slide 10 text
ڠۀ͢Δ ίϯϙʔωϯτ։ൃͷ ϫʔΫϑϩʔ
Slide 11
Slide 11 text
σβΠϯϞοΫ͔Β ίϯϙʔωϯτΛׂ͢Δ
Slide 12
Slide 12 text
ϖʔδ͔Βίϯϙʔωϯτʹ
Slide 13
Slide 13 text
ϖʔδ୯ҐͷϞοΫ
Slide 14
Slide 14 text
ίϯϙʔωϯτʹׂ
Slide 15
Slide 15 text
UI Organisms άϧʔϐϯά͢Δ
Slide 16
Slide 16 text
໋໊ɾґଘؔ
Slide 17
Slide 17 text
variantΛग़͓ͯ͘͠
Slide 18
Slide 18 text
σβΠϯπʔϧ্ͰίϯϙʔωϯτԽͯ͠λεΫʹ͢Δ
Slide 19
Slide 19 text
૬ஊɺ࣮ɺڞ༗
Slide 20
Slide 20 text
ࠔͬͨΒૉૣ͘૬ஊ ● ϖΞϓϩ ● ͨ͘͞Μ࣭ͯ͠ɺҙݟΛग़ ͠߹ͬͯɺݟΛͨΊΔ ● ϨϏϡʔ૬ஊͷ
Slide 21
Slide 21 text
● Ͱݟͳ͕Βίϯϙʔωϯτ Λ࡞͍͚ͬͯΔͷͰσβΠ φʔϏϦςΟ͕ߴ͍ ○ σβΠϯϨϏϡʔḿΔ ● ͋Δఔ·Ͱ࡞ۀͯ͠ɺ࠷ऴ ௐ࣮ࡍͷը໘Λ࡞Γͳ͕ ΒਐΊͨ StotybookͰ֬ೝ͠ͳ͕ΒਐΊΔ
Slide 22
Slide 22 text
ػೳͱݟͨͷ σβΠϯͷ߹Ͱى͜ΔίϯϙʔωϯτͷංେԽΛ͑Δ ϦϯΫ
Ϙλϯ
LinkAppearanceͷvariants: ButtonAppearanceͷvariants:
Slide 23
Slide 23 text
νʔϜͰڞ༗͢Δ ● ৽͍ܾ͠·ΓࣄจॻԽ͢Δ ● ෳਓͰಉ࣌ਐߦͰ࡞ۀͯ͠ΔͷͰɺࣗͷΒͳ͍ͱ͜ΖͰ༷ʑͳ͜ ͱ͕ى͜Δ ○ Β͵ؒʹศརͳίϯϙʔωϯτ͕ര͢Δ͜ͱ͋Δ ○ ίϯϙʔωϯτͷ͍ํStorybookʹॻ͍͓ͯ͘ ● ࡞ͬͨίϯϙʔωϯτΛνʔϜʹհ͢Δ ○ ϓϩδΣΫτΛΓ্͛Δ׆ಈ
Slide 24
Slide 24 text
ঢ়گʹԠͯ͡ ৬छΛӽڥͯ͠։ൃ͢Δ
Slide 25
Slide 25 text
σβΠφʔ ΤϯδχΞ ঢ়گʹΑͬͯɺσβΠφʔͷख͕Γͳ͍ɺ ·ͨΤϯδχΞͷख͕Γͳ͍͜ͱ͕͋Δɻ ͜Ε·ͰͷݟΛ׆͔ͯ͠ӽڥͯ͠ΈΔɻ
Slide 26
Slide 26 text
σβΠφʔ͕ΤϯδχΞྖҬʹೖͬͯΈΔ ● ίϯϙʔωϯτΛ৽نͰ࡞Δ ○ ίʔυҰൃͰ৽نͰίϯϙʔωϯτͷܗ͕࡞Εͨ ○ ੩తͳDOMΛॻ͍ͯͦ͜ʹελΠϧΛ͍ͯͯ͘ ● طଘͷίϯϙʔωϯτΛ֦ு͢Δ ○ σβΠϯʹؔ͢ΔPropsVariantΛ૿͢ σβΠφʔ͚ͩͰͰ͖Δ͜ͱΛ૿ͯ͠ͱޮΛ্͛ͨ
Slide 27
Slide 27 text
ΤϯδχΞʹσβΠφʔྖҬΛͬͯΒ͏ ● ίϯϙʔωϯτ͕ἧͬͯ͘ΔͱͦΕΛΈ߹Θͤͯը໘Λ࡞Δ ͜ͱ͕Ͱ͖Δ ○ σβΠϯͷ࠷ऴௐ͚ͩσβΠφʔ͕ೖΔ ○ ࠷ऴௐ͚ͩͳͷͰ0͔Β࡞ΔΑΓ͍ ྟػԠมʹཱͪճΔ͜ͱͰϦιʔεΛ࠷େݶʹ׆͔͢
Slide 28
Slide 28 text
ӽڥͷ৺ߏ͑ ● ·ͣͱΓ͋͑ͣͬͯΈΔ ● ࣭lintVRTɺϨϏϡʔͳͲͰ୲อ͢Δ ● ৺ཧత҆શੑσΠϦʔεΫϥϜͳͲͰ૬ஊ ্ख͍ͬͯ͘Δ߹ײँ͢Δɺͦͯ͠๙Ί߹͏ʂ
Slide 29
Slide 29 text
·ͱΊ
Slide 30
Slide 30 text
● ڞ௨ೝࣝΛἧ͑ͯҰॹʹ࡞ۀͰ͖ΔΑ͏ʹ ● ϞοΫ͔ΒίϯϙʔωϯτͷઃܭਤΛ࡞Δ ● ݟΛਂΊͯɺঢ়گʹԠͯ͡ӽڥͯ͠ΈΔ ΤϯδχΞͱڠۀͯ͠ίϯϙʔωϯτࢦͰReact Ҡߦ͢ΔͨΊʹ