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

Utility-first な CSS-in-JS 〜Tailwind CSS と Chakra UI を添えて〜 / Utility-First CSS-in-JS

Utility-first な CSS-in-JS 〜Tailwind CSS と Chakra UI を添えて〜 / Utility-First CSS-in-JS

90dbd6fb1763a4b5f7236b72cba16a58?s=128

Mitsuki Ogasahara

August 25, 2021
Tweet

Transcript

  1. 6UJMJUZ fi STUͳ$44JO+4 ʙ5BJMXJOE$44ͱ$IBLSB6*Λఴ͑ͯʙ +91SFTT5FDI5BML

  2. ࣗݾ঺հ w খּݪΈ͖ͭ!ZBNJU[LZ w औక໾$%0 w ೝఆεΫϥϜϚελʔ w ޷͖ͳ΋ͷ w

    1ZUIPOɺ3FBDUɺΨύΦ
  3. ࣗݾ঺հ झຯͰαʔόʔϨεͳ$.4Λ։ൃ ˞$IBLSB6*Λར༻

  4. ࣗݾ঺հ ˞͍ͣΕ΋DTTJOKTΛར༻͠ɺεϐʔσΟʔʹ։ൃ +9ͷ3FBDU੡ϓϩδΣΫτ

  5. ຊ೔ͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4 ͷັྗΛଟ͘ͷਓʹ஌ͬͯ΄͍͠ʂ

  6. ຊ೔ͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4

  7. 3FBDUʷελΠϧγʔτ 3FBDUͷΞϓϦέʔγϣϯɺ Ͳ͏΍ͬͯελΠϧద༻͢Δ͔ʁ

  8. ύλʔϯ1: ී௨ͷ CSS Λॻ͘ 3FBDU $44

  9. ૉͷ CSS ͷ໰୊఺ DMBTT໊͸άϩʔόϧͳఆٛ 
 ˠ໊લিಥͷةݥੑ هࣄͷUJUMF ϥϯΩϯάͷUJUMF ʺ ͔ͤͬ͘ίϯϙʔωϯτࢤ޲ͰΘ͚ͯ΋ʜ

  10. ༨ஊɿBEM ͳͲͷΞϓϩʔν άϩʔόϧͳ໊લۭؒʹ໋໊نଇΛ࣋ͪࠐΉ BSUJDMF@@UJUMF SBOLJOH@@UJUMF ʺ

  11. ύλʔϯCSS Modules $44 3FBDU DTTΛίϯϙʔωϯτ͝ͱʹ3FBDU͔ΒJNQPSU

  12. CSS Modulesͷग़ྗ݁ՌͷΠϝʔδ $44 )5.- DMBTT໊͸ࣗಈͰϋογϡԽ͞Εɺিಥ͠ͳ͍ <div> <div class="css-16qf5wg">هࣄͷλΠτϧ</div> </div>

  13. ɾྑ͘΋ѱ͘΋$44 ɾελΠϧఆٛ΍DMBTT໊͕ܕ҆શͰͳ͍ ɾ+454ͷม਺ΛຒΊࠐΊͳ͍ $44͸3FBDU5ZQF4DSJQUͰ͸ͳ͍ʂ CSS Modules ํࣜͷ໰୊఺ ˞ճආࡦ͸Ұ෦͋Δ ˠ$44Λ+454্Ͱఆ͍ٛͨ͠

  14. ύλʔϯ3: CSS-in-JS • 1ϑΝΠϧ಺ͰఆٛՄೳ • styled.λά໊Ͱఆٛ • ม਺ຒΊࠐΈ΋Մೳ // Article.tsx

    import styled from '@emotion/styled' import theme from '...' const Title = styled.div({ fontWeight: 'bold', fontSize: 14, color: theme.colors.primary, }) export const Article: React.FC = () => ( <div> <Title>هࣄͷλΠτϧ</Title> {/* ... */} </div> )
  15. $44JO+4ͷग़ྗ݁ՌͷΠϝʔδ $44 )5.- $44.PEVMFTಉ༷ɺDMBTT໊͸ࣗಈͰϋογϡԽ ม਺౳΋ຒΊࠐ·ΕΔ <style> .css-16qf5wg { font-weight: bold;

    font-size: 14px; color: #123456; } </style> <div> <div class="css-16qf5wg">هࣄͷλΠτϧ</div> </div>
  16. ̍ɽάϩʔόϧͳ$44Λॻ͘ ̎ɽ$44.PEVMFTͰJNQPSU͢Δ ̏ɽ$44JO+4 3FBDUΞϓϦέʔγϣϯΛελΠϧ͢Δํ๏ 
 ̏ͭ঺հ ͜͜·Ͱͷ·ͱΊ

  17. ຊ೔ͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4

  18. CSS ͋Δ͋Δ )5.- $44 <div class="title-wrapper"> <div class="title">هࣄͷλΠτϧ</div> <div class="timestamp">12:23</div>

    </div> .title { font-weight: bold; font-size: 14px; } .title-wrapper { display: flex; } ͪΐͬͱσβΠϯௐ੔͢ΔͨΊͷXSBQQFSര஀ʂ
  19. CSS ͷ໰୊ ̍ɽDMBTT໊͕άϩʔόϧม਺Ͱিಥ͠΍͍͢ DMBTT໊Λߟ͑Δͷ͕ຊ࣭తͰͳ͍ɺ͕͔͔࣌ؒΔ ˠDMBTT໊ม਺໊ߟ͑ͣʹελΠϦϯά͠Α͏ʂ

  20. Tailwind CSS ʹΑΔελΠϦϯά ࣗલͰͷDMBTT໊ఆٛɺ$44ͳͲॻ͔ͣελΠϦϯά ˞ެࣜαΠτΑΓ

  21. ຊ೔ͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4

  22. Utility ͱ͸… $44Λॻ͔ͣʹελΠϧ͕ద༻Ͱ͖Δɺ $44ΑΓ΋ศརͳDMBTT໊΍ϓϩύςΟ .md:flex .text-gray-500 1$αΠζͷͱ͖ͷΈ fl FY Ϩεϙϯγϒ

    จࣈ৭ΛʮHSBZʯʹ ςʔϚΧϥʔ .shadow-md ΄Ͳ΄ͲαΠζͷӨ
  23. ຊ೔ͷςʔϚ 6UJMJUZ fi STUͳ$44JO+4

  24. Utility- fi rst ͳϝϦοτ ɾDMBTT໊Λ͍͍ͪͪఆٛ͠ͳͯ͘ྑ͍ ɾϨεϙϯγϒ͕؆୯ʹ࣮ݱͰ͖Δ $44JO+4ͷϝϦοτ ɾ5ZQF4DSJQUͷ࢓૊Έʹ৐ΔͷͰܕ҆શͰɺิ׬͕ޮ͘ ɾม਺ͷຒΊࠐΈͳͲɺ+BWB4DSJQU͕ຒΊࠐΊΔ Utility-

    fi rst ͳ CSS-in-JS ͷϝϦοτ ʮ྆ํʯͷϝϦοτ͕ڗडͰ͖Δʂ ʴ
  25. Chakra UI ͷྫ // Article.tsx import { Box } from

    '@chakra-ui/react' export const Article = (props) => ( <Box {...props}> <Box fontWeight="bold" fontSize={['md', 'lg']} color="gray.300" > هࣄͷλΠτϧ </Box> </Box> ) • ελΠϧΛίϯϙʔωϯτͷpropͰఆٛՄೳ • prop໊΍৭໊ͳͲ͸ܕ҆શͰิ׬͕ޮ͘ • ৭΍αΠζͷςʔϚΛద༻Մೳ • Ϩεϙϯγϒ΋؆୯ʹఆٛ ※ ਌ʹ props Λશ෦౉͢ͱɺࣗલίϯϙʔωϯτ΋ Utility ࢖͑ͯΦεεϝ
  26. ิ଍ 6UJMJUZGSJFOEMZͳ$44JO+4ϥΠϒϥϦ IUUQTUFDIKYQSFTTOFUFOUSZVUJMJUZ fi STUDTTJOKT ˒L ˒L ˒L // Article.tsx

    import { x } from ‘@styled/emotion' export const Article = (props) => ( <x.div {...props}> <x.div fontWeight=“bold" fontSize={{ _: 'md', md: 'lg' }} color=“gray-100" > هࣄͷλΠτϧ </x.div> </x.div> ) // Article.tsx import { Box } from '@chakra-ui/react' export const Article = (props) => ( <Box {...props}> <Box fontWeight="bold" fontSize={['md', 'lg']} color="gray.300" > هࣄͷλΠτϧ </Box> </Box> ) *&࣮࣭ରԠ🙆 *&Ұ෦ରԠ🙆 *&ඇରԠ❌ 6UJMJUZͷΈ 6*ϥΠϒϥϦ 6UJMJUZ 6*ϥΠϒϥϦ 6UJMJUZ // Article.tsx import { Box } from '@material-ui/core' export const Article = (props) => ( <Box {...props}> <Box fontWeight="bold" fontSize={{ xs: 'md', md: 'lg' }} color="text.primary" > هࣄͷλΠτϧ </Box> </Box> )
  27. ༨ஊɿଞͷએݴత UI ϑϨʔϜϫʔΫ @override Widget build(BuildContext context) { return Center(

    child: Text( 'Click me!', style: TextStyle( fontSize: 60.0, fontWeight: FontWeight.bold, ), ), ); } 6UJMJUZ fi STUͳ$44JO+4ͱಉ͡Α͏ͳॻ͖ํ
  28. ·ͱΊ 6UJMJUZ fi STUͳ$44JO+4 Utility- fi rst ͳϝϦοτ ʴ CSS-in-JS

    ͷϝϦοτ ɾ5ZQF4DSJQUͷ࢓૊Έʹ৐ΔͷͰܕ҆શͰɺิ׬͕ޮ͘ ɾม਺ͷຒΊࠐΈͳͲɺ+BWB4DSJQU͕ຒΊࠐΊΔ ɾDMBTT໊ΛఆٛͤͣɺϨεϙϯγϒ΋γϯϓϧʹ࣮ݱ → ੜ࢈ੑߴ͘ίʔυ͕ॻ͚Δ