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

Transcript

1. 6UJMJUZ fi STU
   ͳ
   $44JO+4 ʙ5BJMXJOE
   $44
   ͱ
   $IBLSB
   6*
   Λఴ͑ͯʙ 
   +9
   1SFTT
   5FDI
   5BML

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

   1ZUIPOɺ3FBDUɺΨύΦ

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

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
    ͸
    3FBDU
    5ZQF4DSJQU
    Ͱ͸ͳ͍ʂ 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
    ໊ΛఆٛͤͣɺϨεϙϯγϒ΋γϯϓϧʹ࣮ݱ → ੜ࢈ੑߴ͘ίʔυ͕ॻ͚Δ