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