デザイン編 Hatena Engineer Seminar #19

by takuwolog

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Λॻ͍ͯͦ͜ʹελΠϧΛ౰͍ͯͯ͘ ● طଘͷίϯϙʔωϯτΛ֦ு͢Δ ○ σβΠϯʹؔ͢ΔProps΍VariantΛ૿΍͢ σβΠφʔ͚ͩͰͰ͖Δ͜ͱΛ૿΍ͯ͠଎౓ͱޮ཰Λ্͛ͨ

Slide 27

Slide 27 text

ΤϯδχΞʹσβΠφʔྖҬΛ΍ͬͯ΋Β͏ ● ίϯϙʔωϯτ͕ἧͬͯ͘ΔͱͦΕΛ૊Έ߹Θͤͯը໘Λ࡞Δ ͜ͱ͕Ͱ͖Δ ○ σβΠϯͷ࠷ऴௐ੔͚ͩσβΠφʔ͕ೖΔ ○ ࠷ऴௐ੔͚ͩͳͷͰ0͔Β࡞ΔΑΓ଎͍ ྟػԠมʹཱͪճΔ͜ͱͰϦιʔεΛ࠷େݶʹ׆͔͢

Slide 28

Slide 28 text

ӽڥͷ৺ߏ͑ ● ·ͣ͸ͱΓ͋͑ͣ΍ͬͯΈΔ ● ඼࣭͸lint΍VRTɺϨϏϡʔͳͲͰ୲อ͢Δ ● ৺ཧత҆શੑ͸σΠϦʔεΫϥϜͳͲͰ౎౓૬ஊ ্ख͍ͬͯ͘Δ৔߹͸ײँ͢Δɺͦͯ͠๙Ί߹͏ʂ

Slide 29

Slide 29 text

·ͱΊ

Slide 30

Slide 30 text

● ڞ௨ೝࣝΛἧ͑ͯҰॹʹ࡞ۀͰ͖ΔΑ͏ʹ ● ϞοΫ͔ΒίϯϙʔωϯτͷઃܭਤΛ࡞Δ ● ஌ݟΛਂΊͯɺঢ়گʹԠͯ͡ӽڥͯ͠ΈΔ ΤϯδχΞͱڠۀͯ͠ίϯϙʔωϯτࢦ޲ͰReact Ҡߦ͢ΔͨΊʹ