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

Mitsuki Ogasahara

August 25, 2021
Tweet

More Decks by Mitsuki Ogasahara

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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



    هࣄͷλΠτϧ



    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

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

    View full-size slide

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

    View full-size slide

  18. CSS ͋Δ͋Δ
    )5.- $44



    هࣄͷλΠτϧ


    12:23



    .title {


    font-weight: bold;


    font-size: 14px;


    }


    .title-wrapper {


    display: flex;


    }
    ͪΐͬͱσβΠϯௐ੔͢ΔͨΊͷXSBQQFSര஀ʂ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    จࣈ৭ΛʮHSBZʯʹ ςʔϚΧϥʔ

    .shadow-md
    ΄Ͳ΄ͲαΠζͷӨ

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide