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

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@@ 
 αΠϘ΢ζגࣜձࣾ
   %FTJHO
   5FDIOPMPHJTU
2. ࣗݾ঺հ w 4BLJUP
   !@@TBLJUP@@
   w αΠϘ΢ζגࣜձࣾ
   w %FTJHO
   5FDIOPMPHJTU
   w LJOUPOF
   
   %FTJHO
   5FBN
   ॴଐ
   w ϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜ ௨শɿ.BOUMF
   νʔϜ ͷϓϩμ ΫτΦʔφʔ
3. ΞδΣϯμ w νʔϜͱσβΠϯγεςϜ
   w 6*ϥΠϒϥϦͷ࣮૷ͱ഑෍
   w ࣮ྫ
   w ·ͱΊ
4. νʔϜͱσβΠϯγεςϜ
5. ϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜ w σβΠϯ
   d
   ࣮૷·Ͱ֞ࠜΛ࣋ͨͣʹ׆ಈ͢ Δ
   %FTJHO
   5FDIOPMPHJTU
   ͕ओମͷνʔϜ
   w ͦΕͧΕ͕ΤϯδχΞϦϯάɺσβΠϯɺ BZ
   Λ࣠ʹڧΈΛ͍࣋ͬͯΔ
   w LJOUPOF
   ஌͕ࣝ͋Δ
   2"ɺ෭ۀͱͯ͠σβΠ φʔɺϑϩϯτΤϯυઐ೚΋ॴଐ
6. σβΠϯγεςϜ͸खஈ w ʮLJOUPOF
   ͷϢʔβʔମݧΛ࠷ߴʹ͢Δʯͱ͍͏໨ඪ
   w Ұ؏ੑͷ͋ΔϢʔβʔମݧ΍σβΠϯͷ඼࣭ΛϢʔβʔʹఏڙͰ͖Δ͜ͱ
   w ֤ΞϓϦέʔγϣϯ։ൃνʔϜ͕ओମతʹ඼࣭ͷߴ͍ΞϓϦέʔγϣϯΛ 
 ૉૣ͘։ൃͰ͖ΔΑ͏ʹͳΔ͜ͱΛ໨ࢦ͢
   w ্هͷ໨ඪΛ࣮ݱ͢ΔͨΊͷखஈͱͯ͠σβΠϯγεςϜΛߏங͍ͯ͠Δ
7. ͜ͷࢿྉͷຊ୊ w ࠓճ͸ʮ6*ϥΠϒϥϦʯͱʮυΩϡϝϯτʯʹ͍͕ͭͯຊ୊
8. 6*ϥΠϒϥϦͷ࣮૷ͱ഑෍
9. 6*
   ϥΠϒϥϦΛߏங͍ͯ͠Δཧ༝ w ϓϩμΫτɺٕज़ɺσβΠϯΛ֤νʔϜʹ഑෍͢ΔͨΊ
   w ϓϩμΫτͷཧ૝ɺཁ๬ɺෆ۩߹
   w Ϣʔβʔମݧ
   w σβΠϯݪଇɺ
   %FTJHO
   5PLFOɺίϯϙʔωϯτͷ࢓༷
   w ٕज़ɺσβΠϯͷมԽ
   w ϒϥ΢β΍)5.- $44ʜ
   w ֤νʔϜ͔Β͕͋ͬͨ՝୊ͳͲΛ
   4MBDL
   ΍
   *TTVF
   Ͱऩू͠ɺଞͷνʔϜ΁࠶഑෍͢Δ
10. 6*
    ϥΠϒϥϦͷߏ੒ٕज़ͱ഑෍ w 3FBDU
    ίϯϙʔωϯτΛ
    4USPZCPPL
    ্Ͱ֬ೝͭͭ͠։ൃ
    w 4UPSZCPPL
    ͱ
    DISPNBUJD
    Λ࢖ͬͯςετͷ֬ೝ
    w WJTVBM
    SFHSFTTJPO
    UFTUJOH
    w *OUFSBDUJPO
    UFTUT
11. υΩϡϝϯτ͕ηοτ w ഑෍͍ͯ͠Δίϯϙʔωϯτ͸υΩϡϝϯτ͕ηοτʹ ͳ͍ͬͯΔ
    w ίϯϙʔωϯτͷ
    'JHNBɺ֓ཁɺߏ੒ɺૢ࡞ͷ࢓༷ɺछ ྨͳͲʜ
    w ͦ͜ʹࢸΔ·ͰͷഎܠͳͲ΋͋Δ
    w 1SPQT
    ໊΍ίϯϙʔωϯτ໊΋͕͜͜ج४ʹͳ͍ͬͯΔ
    w 4UPSZCPPL
    %PDT
    Λར༻͍ͯ͠Δ
    w (JUIVC
    Ͱͷ؅ཧ
    w 13
    ϕʔεͰίϯϙʔωϯτͱڞʹϨϏϡʔ
    w DISPNBUJD
    ্ͰίϯϙʔωϯτͱڞʹݟΕΔ
12. ࣮ྫ
13. ࣮ྫ
    
    ϦϯΫͷମݧͱσβΠϯͷมߋͷ഑෍ w ՝୊
    w จࣈྻϦϯΫʹ
    6OEFSMJOF
    ΛҾ͖͍͕ͨίϯϙʔω ϯτʹ
    1SPQT
    ͕ͳ͔ͬͨͷͰɺ௥Ճͯ͠΄͍͠ͱ͍ ͏ཁ๬
    w ͦ΋ͦ΋
    6OEFSMJOF
    ΛҾ͘৔߹ͱͦ͏Ͱͳ͍৔߹ ͷɺσβΠϯͷҙࢥܾఆϥΠϯ͕ܾ·͍ͬͯͳ͔ͬͨ 
 w ղܾͨ͜͠ͱ
    w 6OEFSMJOF
    Λ͕Ҿ͚ΔΑ͏ʹ
    -JOL
    ίϯϙʔωϯτ ʹ
    PQUJPOBM
    Ͱ௥Ճ
    w υΩϡϝϯτʹ
    6OEFSMJOF
    Λ͚ͭΔ৔߹ͷ؍఺Λ௥ ه
14. ࣮ྫ
    
    %JBMPHίϯϙʔωϯτͰൃੜ͢Δಛఆͷෆ۩߹ w "
    νʔϜͰݟ͔ͭͬͨ
    %JBMPH
    ίϯ ϙʔωϯτͷෆ۩߹
    w ಛఆͷ৔߹ʹ
    BSJBIJEEFO
    ͕
    CPEZ
    ͷࢠཁૉʹ͍ͭͨ··ʹ ͳͬͯ͠·͏΋ͷ
    w νʔϜͰݟ͔ͭͬͨෆ۩߹͕ͩɺ 6*ϥΠϒϥϦଆʹ࣮૷ͨ͜͠ͱͰɺ 
 ͜ͷमਖ਼ΛଞνʔϜ΋ڗडͰ͖ͨ
15. ࣮ྫ
    
    ͜Ε͔Βߟ͍͑ͯΔ͜ͱ w )5.-
    ΍
    $44
    ͷมԽΛ
    6*
    ϥΠϒϥϦ΍σβΠϯʹऔΓೖΕ͍͍ͯ͘
    w ྫ
    w EJBMPH
    ͷ࢓༷ʹԊͬͨ
    %JBMPH
    ίϯϙʔωϯτ࣮૷ͱσβΠϯ
    w $44
    $POUBJOFS
    2VFSJFT
    Λ࢖༻֤ͨ͠ίϯϙʔωϯτͷϧʔϧͱৼΔ෣͍ ͷมԽͷ࢓༷Խ
    w 3FBDU
    ͳͲͷϑϨʔϜϫʔΫͷมԽΛऔΓೖΕ͍ͯ͘
    w ͜ΕΒͷϓϥςΟΫεΛ٧ΊࠐΈɺ֤νʔϜ͕มԽΛऔΓೖΕ͍͚ͯΔΑ͏ʹ͠ ͍ͯ͘
16. ·ͱΊ
17. ·ͱΊ w 6*
    ϥΠϒϥϦΛհͯ͠ϓϩμΫτɺٕज़ɺσβΠϯΛ֤νʔϜʹ഑෍͢Δ
    w ֤νʔϜ͔ΒϑΟʔυόοΫΛ΋Β͏ମ੍Λ੔͑Δͷ΋େࣄ
    w 6*
    ϥΠϒϥϦͷ։ൃ͸ɺϓϩμΫτɺσβΠϯɺϑϩϯτΤϯυ஌ࣝɺ BZ
    ஌ࣝͳͲΛ༻͍ͨ૯ྗઓ
    w υΩϡϝϯτ΋ηοτʹ͢Δ͜ͱͰɺίϯϙʔωϯτͷݴޠԽΛ͠ɺมԽ ͷྺ࢙Λ௥͑ΔΑ͏ʹ͓ͯ͜͠͏
18. ͓ΘΓ