デザインシステムにフロントエンドのプラクティスを詰め込んで再配布する

JSConf JP 2022
https://jsconf.jp/2022/talk/pack-front-end-practices-into-the-design-system-and-redistribute

Twitter
https://twitter.com/__sakito__

Transcript

1. σβΠϯγεςϜʹϑϩϯτΤϯυͷ
   ϓϥΫςΟεΛ٧ΊࠐΜͰ࠶഑෍͢Δ
   +4$POG+1
   

   

   !@@TBLJUP@@
   

   αΠϘ΢ζגࣜձࣾ%FTJHO5FDIOPMPHJTU
   

   View Slide

2. ࣗݾ঺հ
   w 4BLJUP !@@TBLJUP@@
   
   w αΠϘ΢ζגࣜձࣾ
   w %FTJHO5FDIOPMPHJTU
   w LJOUPOF%FTJHO5FBNॴଐ
   w ϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜ ௨শɿ.BOUMFνʔϜ
   ͷϓϩμ
   ΫτΦʔφʔ
   

   View Slide

3. ΞδΣϯμ
   w νʔϜͱσβΠϯγεςϜ
   w 6*ϥΠϒϥϦͷ࣮૷ͱ഑෍
   w ࣮ྫ
   w ·ͱΊ
   

   View Slide

4. νʔϜͱσβΠϯγεςϜ
   

   View Slide

5. ϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜ
   w σβΠϯd࣮૷·Ͱ֞ࠜΛ࣋ͨͣʹ׆ಈ͢
   Δ%FTJHO5FDIOPMPHJTU͕ओମͷνʔϜ
   w ͦΕͧΕ͕ΤϯδχΞϦϯάɺσβΠϯɺ
   BZΛ࣠ʹڧΈΛ͍࣋ͬͯΔ
   w LJOUPOF஌͕ࣝ͋Δ2"ɺ෭ۀͱͯ͠σβΠ
   φʔɺϑϩϯτΤϯυઐ೚΋ॴଐ
   

   View Slide

6. σβΠϯγεςϜ͸खஈ
   w ʮLJOUPOFͷϢʔβʔମݧΛ࠷ߴʹ͢Δʯͱ͍͏໨ඪ
   w Ұ؏ੑͷ͋ΔϢʔβʔମݧ΍σβΠϯͷ඼࣭ΛϢʔβʔʹఏڙͰ͖Δ͜ͱ
   w ֤ΞϓϦέʔγϣϯ։ൃνʔϜ͕ओମతʹ඼࣭ͷߴ͍ΞϓϦέʔγϣϯΛ
   

   ૉૣ͘։ൃͰ͖ΔΑ͏ʹͳΔ͜ͱΛ໨ࢦ͢
   w ্هͷ໨ඪΛ࣮ݱ͢ΔͨΊͷखஈͱͯ͠σβΠϯγεςϜΛߏங͍ͯ͠Δ
   

   View Slide

7. ͜ͷࢿྉͷຊ୊
   w ࠓճ͸ʮ6*ϥΠϒϥϦʯͱʮυΩϡϝϯτʯʹ͍͕ͭͯຊ୊
   

   View Slide

8. 6*ϥΠϒϥϦͷ࣮૷ͱ഑෍
   

   View Slide

9. 6*ϥΠϒϥϦΛߏங͍ͯ͠Δཧ༝
   w ϓϩμΫτɺٕज़ɺσβΠϯΛ֤νʔϜʹ഑෍͢ΔͨΊ
   w ϓϩμΫτͷཧ૝ɺཁ๬ɺෆ۩߹
   w Ϣʔβʔମݧ
   w σβΠϯݪଇɺ%FTJHO5PLFOɺίϯϙʔωϯτͷ࢓༷
   w ٕज़ɺσβΠϯͷมԽ
   w ϒϥ΢β΍)5.- $44ʜ
   w ֤νʔϜ͔Β͕͋ͬͨ՝୊ͳͲΛ4MBDL΍*TTVFͰऩू͠ɺଞͷνʔϜ΁࠶഑෍͢Δ
   

   View Slide

10. 6*ϥΠϒϥϦͷߏ੒ٕज़ͱ഑෍
    w 3FBDUίϯϙʔωϯτΛ4USPZCPPL্Ͱ֬ೝͭͭ͠։ൃ
    w 4UPSZCPPLͱDISPNBUJDΛ࢖ͬͯςετͷ֬ೝ
    w WJTVBMSFHSFTTJPOUFTUJOH
    w *OUFSBDUJPOUFTUT
    

    View Slide

11. υΩϡϝϯτ͕ηοτ
    w ഑෍͍ͯ͠Δίϯϙʔωϯτ͸υΩϡϝϯτ͕ηοτʹ
    ͳ͍ͬͯΔ
    w ίϯϙʔωϯτͷ'JHNBɺ֓ཁɺߏ੒ɺૢ࡞ͷ࢓༷ɺछ
    ྨͳͲʜ
    w ͦ͜ʹࢸΔ·ͰͷഎܠͳͲ΋͋Δ
    w 1SPQT໊΍ίϯϙʔωϯτ໊΋͕͜͜ج४ʹͳ͍ͬͯΔ
    w 4UPSZCPPL%PDTΛར༻͍ͯ͠Δ
    w (JUIVCͰͷ؅ཧ
    w 13ϕʔεͰίϯϙʔωϯτͱڞʹϨϏϡʔ
    w DISPNBUJD্ͰίϯϙʔωϯτͱڞʹݟΕΔ
    

    View Slide

12. ࣮ྫ
    

    View Slide

13. ࣮ྫϦϯΫͷମݧͱσβΠϯͷมߋͷ഑෍
    w ՝୊
    w จࣈྻϦϯΫʹ6OEFSMJOFΛҾ͖͍͕ͨίϯϙʔω
    ϯτʹ1SPQT͕ͳ͔ͬͨͷͰɺ௥Ճͯ͠΄͍͠ͱ͍
    ͏ཁ๬
    w ͦ΋ͦ΋6OEFSMJOFΛҾ͘৔߹ͱͦ͏Ͱͳ͍৔߹
    ͷɺσβΠϯͷҙࢥܾఆϥΠϯ͕ܾ·͍ͬͯͳ͔ͬͨ
    

    w ղܾͨ͜͠ͱ
    w 6OEFSMJOFΛ͕Ҿ͚ΔΑ͏ʹ-JOLίϯϙʔωϯτ
    ʹPQUJPOBMͰ௥Ճ
    w υΩϡϝϯτʹ6OEFSMJOFΛ͚ͭΔ৔߹ͷ؍఺Λ௥
    ه
    

    View Slide

14. ࣮ྫ%JBMPHίϯϙʔωϯτͰൃੜ͢Δಛఆͷෆ۩߹
    w "νʔϜͰݟ͔ͭͬͨ%JBMPHίϯ
    ϙʔωϯτͷෆ۩߹
    w ಛఆͷ৔߹ʹBSJBIJEEFO͕
    CPEZͷࢠཁૉʹ͍ͭͨ··ʹ
    ͳͬͯ͠·͏΋ͷ
    w νʔϜͰݟ͔ͭͬͨෆ۩߹͕ͩɺ
    6*ϥΠϒϥϦଆʹ࣮૷ͨ͜͠ͱͰɺ
    

    ͜ͷमਖ਼ΛଞνʔϜ΋ڗडͰ͖ͨ
    

    View Slide

15. ࣮ྫ͜Ε͔Βߟ͍͑ͯΔ͜ͱ
    w )5.-΍$44ͷมԽΛ6*ϥΠϒϥϦ΍σβΠϯʹऔΓೖΕ͍͍ͯ͘
    w ྫ
    w EJBMPHͷ࢓༷ʹԊͬͨ%JBMPHίϯϙʔωϯτ࣮૷ͱσβΠϯ
    w $44$POUBJOFS2VFSJFTΛ࢖༻֤ͨ͠ίϯϙʔωϯτͷϧʔϧͱৼΔ෣͍
    ͷมԽͷ࢓༷Խ
    w 3FBDUͳͲͷϑϨʔϜϫʔΫͷมԽΛऔΓೖΕ͍ͯ͘
    w ͜ΕΒͷϓϥςΟΫεΛ٧ΊࠐΈɺ֤νʔϜ͕มԽΛऔΓೖΕ͍͚ͯΔΑ͏ʹ͠
    ͍ͯ͘
    

    View Slide

16. ·ͱΊ
    

    View Slide

17. ·ͱΊ
    w 6*ϥΠϒϥϦΛհͯ͠ϓϩμΫτɺٕज़ɺσβΠϯΛ֤νʔϜʹ഑෍͢Δ
    w ֤νʔϜ͔ΒϑΟʔυόοΫΛ΋Β͏ମ੍Λ੔͑Δͷ΋େࣄ
    w 6*ϥΠϒϥϦͷ։ൃ͸ɺϓϩμΫτɺσβΠϯɺϑϩϯτΤϯυ஌ࣝɺ
    BZ஌ࣝͳͲΛ༻͍ͨ૯ྗઓ
    w υΩϡϝϯτ΋ηοτʹ͢Δ͜ͱͰɺίϯϙʔωϯτͷݴޠԽΛ͠ɺมԽ
    ͷྺ࢙Λ௥͑ΔΑ͏ʹ͓ͯ͜͠͏
    

    View Slide

18. ͓ΘΓ
    

    View Slide