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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. ૉͷ CSS ͷ໰୊఺
   DMBTT໊͸άϩʔόϧͳఆٛ
   

   ˠ໊લিಥͷةݥੑ
   هࣄͷUJUMF ϥϯΩϯάͷUJUMF
   ʺ
   ͔ͤͬ͘ίϯϙʔωϯτࢤ޲ͰΘ͚ͯ΋ʜ
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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 = () => (
    
    
    
    
    
    هࣄͷλΠτϧ
    
    
    {/* ... */}
    
    
    
    
    
    )
    

    View Slide

15. $44JO+4ͷग़ྗ݁ՌͷΠϝʔδ
    $44 )5.-
    $44.PEVMFTಉ༷ɺDMBTT໊͸ࣗಈͰϋογϡԽ
    ม਺౳΋ຒΊࠐ·ΕΔ
    <br/><br/><br/>.css-16qf5wg {<br/><br/><br/>font-weight: bold;<br/><br/><br/>font-size: 14px;<br/><br/><br/>color: #123456;<br/><br/><br/>}<br/><br/><br/>
    
    
    
    هࣄͷλΠτϧ
    
    
    
    

    View Slide

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

    ̏ͭ঺հ
    ͜͜·Ͱͷ·ͱΊ
    

    View Slide

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

    View Slide

18. CSS ͋Δ͋Δ
    )5.- $44
    
    
    
    هࣄͷλΠτϧ
    
    
    12:23
    
    
    
    .title {
    
    
    font-weight: bold;
    
    
    font-size: 14px;
    
    
    }
    
    
    .title-wrapper {
    
    
    display: flex;
    
    
    }
    ͪΐͬͱσβΠϯௐ੔͢ΔͨΊͷXSBQQFSര஀ʂ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. ิ଍
    6UJMJUZGSJFOEMZͳ$44JO+4ϥΠϒϥϦ
    IUUQTUFDIKYQSFTTOFUFOUSZVUJMJUZ
    fi
    STUDTTJOKT
    ˒L ˒L
    ˒L
    // Article.tsx
    
    
    import { x } from ‘@styled/emotion'
    
    
    export const Article = (props) => (
    
    
    
    
    
    
    
    fontWeight=“bold"
    
    
    fontSize={{ _: 'md', md: 'lg' }}
    
    
    color=“gray-100"
    
    
    >
    
    
    هࣄͷλΠτϧ
    
    
    
    
    
    
    
    
    )
    // Article.tsx
    
    
    import { Box } from '@chakra-ui/react'
    
    
    export const Article = (props) => (
    
    
    
    
    
    
    
    fontWeight="bold"
    
    
    fontSize={['md', 'lg']}
    
    
    color="gray.300"
    
    
    >
    
    
    هࣄͷλΠτϧ
    
    
    
    
    
    
    
    
    )
    *&࣮࣭ରԠ🙆 *&Ұ෦ରԠ🙆
    *&ඇରԠ❌
    6UJMJUZͷΈ 6*ϥΠϒϥϦ6UJMJUZ 6*ϥΠϒϥϦ6UJMJUZ
    // Article.tsx
    
    
    import { Box } from '@material-ui/core'
    
    
    export const Article = (props) => (
    
    
    
    
    
    
    
    fontWeight="bold"
    
    
    fontSize={{ xs: 'md', md: 'lg' }}
    
    
    color="text.primary"
    
    
    >
    
    
    هࣄͷλΠτϧ
    
    
    
    
    
    
    
    
    )
    

    View Slide

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ͱಉ͡Α͏ͳॻ͖ํ
    

    View Slide

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

    View Slide