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

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

ࣗݾ঺հ w খּݪΈ͖ͭ!ZBNJU[LZ w औక໾$%0 w ೝఆεΫϥϜϚελʔ w ޷͖ͳ΋ͷ w
1ZUIPOɺ3FBDUɺΨύΦ

ࣗݾ঺հ झຯͰαʔόʔϨεͳ$.4Λ։ൃ ˞$IBLSB6*Λར༻

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

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

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

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

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

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

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

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

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

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

ύλʔϯ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> )

$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>

̍ɽάϩʔόϧͳ$44Λॻ͘ ̎ɽ$44.PEVMFTͰJNQPSU͢Δ ̏ɽ$44JO+4 3FBDUΞϓϦέʔγϣϯΛελΠϧ͢Δํ๏   ̏ͭ঺հ ͜͜·Ͱͷ·ͱΊ

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ര஀ʂ

CSS ͷ໰୊ ̍ɽDMBTT໊͕άϩʔόϧม਺Ͱিಥ͠΍͍͢ DMBTT໊Λߟ͑Δͷ͕ຊ࣭తͰͳ͍ɺ͕͔͔࣌ؒΔ ˠDMBTT໊ม਺໊ߟ͑ͣʹελΠϦϯά͠Α͏ʂ

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

Utility ͱ͸… $44Λॻ͔ͣʹελΠϧ͕ద༻Ͱ͖Δɺ $44ΑΓ΋ศརͳDMBTT໊΍ϓϩύςΟ .md:flex .text-gray-500 1$αΠζͷͱ͖ͷΈ fl FY Ϩεϙϯγϒ
จࣈ৭ΛʮHSBZʯʹ ςʔϚΧϥʔ .shadow-md ΄Ͳ΄ͲαΠζͷӨ

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

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 ࢖͑ͯΦεεϝ

ิ଍ 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> )

༨ஊɿଞͷએݴత 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ͱಉ͡Α͏ͳॻ͖ํ

·ͱΊ 6UJMJUZ fi STUͳ$44JO+4 Utility- fi rst ͳϝϦοτ ʴ CSS-in-JS
ͷϝϦοτ ɾ5ZQF4DSJQUͷ࢓૊Έʹ৐ΔͷͰܕ҆શͰɺิ׬͕ޮ͘ ɾม਺ͷຒΊࠐΈͳͲɺ+BWB4DSJQU͕ຒΊࠐΊΔ ɾDMBTT໊ΛఆٛͤͣɺϨεϙϯγϒ΋γϯϓϧʹ࣮ݱ → ੜ࢈ੑߴ͘ίʔυ͕ॻ͚Δ

Utility-first な CSS-in-JS 〜Tailwind CSS と Chakr...

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

Mitsuki Ogasahara

More Decks by Mitsuki Ogasahara

Other Decks in Technology

Featured

Transcript

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

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

ࣗݾ঺հ झຯͰαʔόʔϨεͳ$.4Λ։ൃ ˞$IBLSB6*Λར༻

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

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

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

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

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

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

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

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

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

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

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

$44JO+4ͷग़ྗ݁ՌͷΠϝʔδ $44 )5.- $44.PEVMFTಉ༷ɺDMBTT໊͸ࣗಈͰϋογϡԽ ม਺౳΋ຒΊࠐ·ΕΔ <style> .css-16qf5wg { font-weight: bold;

̍ɽάϩʔόϧͳ$44Λॻ͘ ̎ɽ$44.PEVMFTͰJNQPSU͢Δ ̏ɽ$44JO+4 3FBDUΞϓϦέʔγϣϯΛελΠϧ͢Δํ๏   ̏ͭ঺հ ͜͜·Ͱͷ·ͱΊ

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

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

CSS ͷ໰୊ ̍ɽDMBTT໊͕άϩʔόϧม਺Ͱিಥ͠΍͍͢ DMBTT໊Λߟ͑Δͷ͕ຊ࣭తͰͳ͍ɺ͕͔͔࣌ؒΔ ˠDMBTT໊ม਺໊ߟ͑ͣʹελΠϦϯά͠Α͏ʂ

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

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

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

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

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

Chakra UI ͷྫ // Article.tsx import { Box } from

ิ଍ 6UJMJUZGSJFOEMZͳ$44JO+4ϥΠϒϥϦ IUUQTUFDIKYQSFTTOFUFOUSZVUJMJUZ fi STUDTTJOKT ˒L ˒L ˒L // Article.tsx

༨ஊɿଞͷએݴత UI ϑϨʔϜϫʔΫ @override Widget build(BuildContext context) { return Center(

·ͱΊ 6UJMJUZ fi STUͳ$44JO+4 Utility- fi rst ͳϝϦοτ ʴ CSS-in-JS