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

vanilla-extractを使ってみた!with React

vanilla-extractを使ってみた!with React

Azusa Okamoto

April 24, 2022
Tweet

More Decks by Azusa Okamoto

Other Decks in Programming

Transcript

  1. vanilla-extractを使ってみた!

    with React
    2022/04/24_とにかくほめる!マウントなしのLT会
    あずにゃん

    View full-size slide

  2. 自己紹介
    フロントエンドエンジニア。


    言語:

    JavaScript・TypeScript


    FW/ライブラリ:

    Vue.js・React・jQuery @azunyan_eng

    View full-size slide

  3. 今日お話しすること
    1 vanilla-extractとは

    2 主な使い方

    3 つまづいたこと

    4 感想

    5 参考資料

    View full-size slide

  4. 今日お話しすること
    先月、microCMSさんのLT会で

    vanilla-extractを知った!
    見やすそうだし、CSS Modulesだし...

    なんか、良さそう!

    View full-size slide

  5. 今日お話しすること
    styled-componentsやSassを使った業務経験が

    過去にあり。

    View full-size slide

  6. 1 vanilla-extractとは

    2 主な使い方

    3 つまづいたこと

    4 感想

    5 参考資料

    View full-size slide

  7. vanilla-extractとは
    2021年5月リリース。
    CSS Modulesの考え方がベース。
    オブジェクト形式で記述。

    View full-size slide

  8. 1 vanilla-extractとは

    3 つまづいたこと

    4 感想

    5 参考資料
    2 主な使い方

    View full-size slide

  9. 主な使い方
    提供されているAPIと関数を

    組み合わせて利用!

    View full-size slide

  10. Styling API〜style~
    export = ({

    : ,

    :
    });

    const toDoStyle style
    display
    justifyContent
    'flex'
    'space-between'

    View full-size slide

  11. Styling API~globalStyle~
    全体を通して共通化したいスタイルを記述。

    View full-size slide

  12. Styling API~globalStyle~
    globalStyle( , {

    : ,

    : ,

    : ,

    : ,

    : ,

    :
    });
    'body, #root'
    '#FFFFFF'
    '#1A1A1A'
    '0'
    'flex'
    'column'
    '100vh'

    backgroundColor
    color
    margin
    display
    flexDirection
    minHeight

    View full-size slide

  13. Styling API~globalStyle~
    import ;
    "./styles/global.css"

    View full-size slide

  14. Styling API~createTheme~
    同じcss.tsファイル内でのみ使える変数を

    作成!

    View full-size slide

  15. Styling API~createTheme~
    export
    export
    , = ({

    : {

    :
    }

    });


    = ({

    : . .
    });
    const
    const
    [themeClass vars]
    alertBtn
    vars
    createTheme
    style
    background
    alert
    backgroundColor background alert

    'red'

    View full-size slide

  16. Styling API~createTheme~
    < = >

    = >

    全て削除する

    div
    button =>
    button
    div
    className
    onClick className
    { }
    { } { }
    themeClass
    alertBtn
    < =
    >

    >
    () ()
    handleDeleteAll

    View full-size slide

  17. Styling API~createGlobalTheme~
    共通で使える変数を作成!

    View full-size slide

  18. Styling API~createGlobalTheme~
    export = ( , {

    : {

    : ,

    :
    },

    : {

    :
    },

    : {

    :
    },

    : {

    : ,

    : ,

    :
    }

    });
    const globalTheme createGlobalTheme ':root'
    '#1A1A1A'
    '#7FFF7F'

    '#FFFFFF'

    '#7FFF7F'

    '0.5rem'
    '1.5rem'
    '2.5rem'

    background
    main
    success
    font
    color
    color
    success
    size
    xs
    s
    m

    View full-size slide

  19. Styling API~createGlobalTheme~
    export = ({

    : ,

    : . . ,

    : . .
    });
    const footerStyle
    globalTheme
    globalTheme
    style
    marginTop
    backgroundColor background main
    color font color

    'auto'

    View full-size slide

  20. Sprinkles API
    ユーティリティクラスを作成!

    conditionsを使ってレスポンシブ対応も!

    View full-size slide

  21. Sprinkles API
    const = ({

    : {

    : { : },

    : { : }

    },

    : ,

    : {

    : [ , ],

    : [ ],

    : [ , ],

    : [ , ],

    : . ,

    : .
    }

    });
    responsiveStyle
    globalTheme
    globalTheme
    defineProperties
    conditions
    desktop
    mobile
    defaultCondition
    properties
    display
    justifyContent
    textAlign
    width
    paddingLeft size
    paddingRight size

    '@media' 'screen and (min-width: 1024px)'
    '@media' 'screen and (max-width: 1023px)'
    'desktop'
    'flex' 'block'
    'center'
    'center' 'left'
    '50%' '100%'

    View full-size slide

  22. Sprinkles API
    export = (

    );
    const sprinkles
    responsiveStyle

    createSprinkles

    View full-size slide

  23. Sprinkles API
    < >

    < />

    < />

    < = , >

    < />

    < />

    >

    >
    div
    div
    div
    div
    Form
    DeleteAllBtn
    ToDos
    DoneToDos
    className display: justifyContent:
    { 'flex' 'center' }
    sprinkles( )
    { }

    View full-size slide

  24. 1 vanilla-extractとは

    2 主な使い方

    4 感想

    5 参考資料
    3 つまづいたこと

    View full-size slide

  25. つまづいたこと
    そもそも、vanilla-extract自体を

    適用するのに手間取った!

    View full-size slide

  26. つまづいたこと〜原因〜
    create-react-appをサポートしていなかった...。
    ※公式からのサポート状況に関する言及は特になし。

    ※公式のGitHub Issueでは、サポートしていないとの回答が。

    ※Cracoを一緒に使うことで利用できるようになるとの回答も。

    View full-size slide

  27. つまづいたこと〜原因〜
    Craco導入したらいけるかな〜??
    Webpack等の構成を

    上書きできる!

    eject不要!

    View full-size slide

  28. つまづいたこと〜原因〜
    ダメだった...。

    View full-size slide

  29. つまづいたこと〜解決〜
    create-react-appに頼らない!

    面倒くさがらずに、Webpackのinstall、
    webpack.config.jsの作成もやりましょう!

    View full-size slide

  30. 1 vanilla-extractとは

    2 主な使い方

    3 つまづいたこと

    5 参考資料
    4 感想

    View full-size slide

  31. 感想
    CSS Modulesの方が好みなので、使い勝手が良いと感
    じた!
    styled-componentsとは異なり、オブジェクト形式だ
    と書きやすい!見やすい!
    定義元に簡単に移動できるのは助かる!

    View full-size slide

  32. 1 vanilla-extractとは

    2 主な使い方

    3 つまづいたこと

    4 感想

    5 参考資料

    View full-size slide

  33. 参考資料
    vanilla-extract公式ドキュメント


    CSS in JSとしてVanilla-Extractを選んだ話と技術選定
    の記録の残し方


    vanilla-extract を試す


    vanilla-extractを使ってみた感想

    View full-size slide

  34. 参考資料
    create-react-app公式ドキュメント


    Craco公式GitHubリポジトリ


    styled-components公式ドキュメント

    View full-size slide

  35. ご清聴ありがとうございました!

    View full-size slide