Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザイン編 Hatena Engineer Seminar #19

7ee8ca88aa7f99cafd91a79f9734668c?s=47 takuwolog
April 01, 2022

デザイン編 Hatena Engineer Seminar #19

7ee8ca88aa7f99cafd91a79f9734668c?s=128

takuwolog

April 01, 2022
Tweet

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 Ҡߦ͢ΔͨΊʹ