デザイン編 Hatena Engineer Seminar #19

Transcript

1. Hatena Engineer Seminar #19 id: σβΠϯฤ ΧΫϤϜͷ೥Λݟਾٕ͑ͨज़ takuwolog 2022.03.30
2. id:takuwolog ҏ౻
   ୓ ϊϕϧνʔϜϦʔυσβΠφʔ
3. σβΠφʔ͕ΤϯδχΞͱ
   ڠۀͯ͠ίϯϙʔωϯτࢦ޲Ͱ 3FBDUҠߦͨ͠࿩ ࠓճͷ͓࿩
4. ࿩ͷલఏ • ΧΫϤϜαϙʔλʔζύεϙʔτͷຊ֨తͳ։ൃ͕8݄͔Βελʔ τ • ͜ͷ։ൃ͔ΒReactҠߦΛ։࢝͠·ͨ͠ ◦ ಉ͡λΠϛϯάͰσβΠϯγεςϜͷߏங΋։࢝ • σβΠφʔ͸ۀ຿ͰHTMLͱCSSΛॻ͍͍ͯ·͢ ◦ Ϣʔβʔͷ໨΍खʹ৮ΕΔσβΠϯΛ࠷ޙ·Ͱ࢓্͛Δ͜ͱ͕ ໨త • σβΠφʔ͸Reactʹ৮Δͷ͸΄΅ॳΊͯͰ͢
5. ४උ͢Δ ڞ௨ೝࣝΛἧ͑Δ
6. ϖʔδ͔Βίϯϙʔωϯτ΁ globalNav (header) footer sidebar heroHeader main globalNav (header) footer sidebar heroHeader main
7. ͳͥڠۀͯ͠ίϯϙʔωϯτΛ࡞Δͷ͔ ίϯϙʔωϯτʹݟͨ໨ͱৼΔ෣͍ʹؔ͢Δ໾ׂ͕͋Δ৔߹ ͸ɺΤϯδχΞ͚ͩͰܾΊΕͳ͍ͷͰσβΠφʔ΋Ұॹʹ ͳͬͯߟ͍͑ͯ͘ɻ Ұॹʹͳͬͯߟ͍͑ͯ͘தͰϕετͳίϯϙʔωϯτͷ࢟Λ ໛ࡧ͢Δɻ
8. ίϯϙʔωϯτͷ࢖͍ํΛ໌֬ʹ͢Δ ίϯϙʔωϯτ͕େ͖͘ͳΓ͗͢ͳ͍Α͏ʹɺ·ͨ͸૿ ͑͗͢ͳ͍Α͏ʹɺԿΛ͢Δίϯϙʔωϯτͳͷ͔ɺ νʔϜͰೝࣝΛἧ͑Δɻ
9. UI Organisms etc… Ұ൪খ͍͞୯Ґ υϝΠϯʹґଘ͠ͳ͍ υϝΠϯݻ༗ͷ ػೳ΍σβΠϯ Icon, TemplateͳͲ ίϯϙʔωϯτͷ୯Ґ
10. ڠۀ͢Δ ίϯϙʔωϯτ։ൃͷ
    ϫʔΫϑϩʔ
11. 
    σβΠϯϞοΫ͔Β
    ίϯϙʔωϯτΛ෼ׂ͢Δ
12. ϖʔδ͔Βίϯϙʔωϯτʹ
13. ϖʔδ୯ҐͷϞοΫ
14. ίϯϙʔωϯτʹ෼ׂ
15. UI Organisms άϧʔϐϯά͢Δ
16. ໋໊ɾґଘؔ܎
17. variantΛग़͓ͯ͘͠
18. σβΠϯπʔϧ্ͰίϯϙʔωϯτԽͯ͠λεΫʹ͢Δ
19. 
    ૬ஊɺ࣮૷ɺڞ༗
20. ࠔͬͨΒૉૣ͘૬ஊ • ϖΞϓϩ • ͨ͘͞Μ࣭໰ͯ͠ɺҙݟΛग़ ͠߹ͬͯɺ஌ݟΛͨΊΔ • ϨϏϡʔ΋૬ஊͷ৔
21. • ໨Ͱݟͳ͕Βίϯϙʔωϯτ Λ࡞͍͚ͬͯΔͷͰσβΠ φʔϏϦςΟ͕ߴ͍ ◦ σβΠϯϨϏϡʔ΋ḿΔ • ͋Δఔ౓·Ͱ࡞ۀͯ͠ɺ࠷ऴ ௐ੔͸࣮ࡍͷը໘Λ࡞Γͳ͕ ΒਐΊͨ StotybookͰ֬ೝ͠ͳ͕ΒਐΊΔ
22. ػೳͱݟͨ໨ͷ෼཭ σβΠϯͷ౎߹Ͱى͜ΔίϯϙʔωϯτͷංେԽΛ཈͑Δ <Link> <LinkAppearance variant=’underline’ hoverVariant=’blue’>ϦϯΫ</LinkAppearance> </Link> <Link> <a> <ButtonAppearance variant=’initial’>Ϙλϯ</ButtonAppearance> </a> </Link> LinkAppearanceͷvariants: ButtonAppearanceͷvariants:
23. νʔϜͰڞ༗͢Δ • ৽͍ܾ͠·Γࣄ͸จॻԽ͢Δ • ෳ਺ਓͰಉ࣌ਐߦͰ࡞ۀͯ͠ΔͷͰɺࣗ෼ͷ஌Βͳ͍ͱ͜ΖͰ༷ʑͳ͜ ͱ͕ى͜Δ ◦ ஌Β͵ؒʹศརͳίϯϙʔωϯτ͕ര஀͢Δ͜ͱ΋͋Δ ◦ ίϯϙʔωϯτͷ࢖͍ํ͸Storybookʹॻ͍͓ͯ͘ • ࡞ͬͨίϯϙʔωϯτΛνʔϜʹ঺հ͢Δ ◦ ϓϩδΣΫτΛ੝Γ্͛Δ׆ಈ
24. 
    ঢ়گʹԠͯ͡
    ৬छΛӽڥͯ͠։ൃ͢Δ
25. σβΠφʔ ΤϯδχΞ ঢ়گʹΑͬͯɺσβΠφʔͷख͕଍Γͳ͍ɺ ·ͨ͸ΤϯδχΞͷख͕଍Γͳ͍͜ͱ͕͋Δɻ ͜Ε·Ͱͷ஌ݟΛ׆͔ͯ͠ӽڥͯ͠ΈΔɻ
26. σβΠφʔ͕ΤϯδχΞྖҬʹೖͬͯΈΔ • ίϯϙʔωϯτΛ৽نͰ࡞Δ ◦ ίʔυҰൃͰ৽نͰίϯϙʔωϯτͷ਽ܗ͕࡞Εͨ ◦ ੩తͳDOMΛॻ͍ͯͦ͜ʹελΠϧΛ౰͍ͯͯ͘ • طଘͷίϯϙʔωϯτΛ֦ு͢Δ ◦ σβΠϯʹؔ͢ΔProps΍VariantΛ૿΍͢ σβΠφʔ͚ͩͰͰ͖Δ͜ͱΛ૿΍ͯ͠଎౓ͱޮ཰Λ্͛ͨ
27. ΤϯδχΞʹσβΠφʔྖҬΛ΍ͬͯ΋Β͏ • ίϯϙʔωϯτ͕ἧͬͯ͘ΔͱͦΕΛ૊Έ߹Θͤͯը໘Λ࡞Δ ͜ͱ͕Ͱ͖Δ ◦ σβΠϯͷ࠷ऴௐ੔͚ͩσβΠφʔ͕ೖΔ ◦ ࠷ऴௐ੔͚ͩͳͷͰ0͔Β࡞ΔΑΓ଎͍ ྟػԠมʹཱͪճΔ͜ͱͰϦιʔεΛ࠷େݶʹ׆͔͢
28. ӽڥͷ৺ߏ͑ • ·ͣ͸ͱΓ͋͑ͣ΍ͬͯΈΔ • ඼࣭͸lint΍VRTɺϨϏϡʔͳͲͰ୲อ͢Δ • ৺ཧత҆શੑ͸σΠϦʔεΫϥϜͳͲͰ౎౓૬ஊ ্ख͍ͬͯ͘Δ৔߹͸ײँ͢Δɺͦͯ͠๙Ί߹͏ʂ
29. ·ͱΊ
30. • ڞ௨ೝࣝΛἧ͑ͯҰॹʹ࡞ۀͰ͖ΔΑ͏ʹ • ϞοΫ͔ΒίϯϙʔωϯτͷઃܭਤΛ࡞Δ • ஌ݟΛਂΊͯɺঢ়گʹԠͯ͡ӽڥͯ͠ΈΔ ΤϯδχΞͱڠۀͯ͠ίϯϙʔωϯτࢦ޲ͰReact Ҡߦ͢ΔͨΊʹ