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

Transcript

1. vanilla-extractを使ってみた！ with React 2022/04/24_とにかくほめる！マウントなしのLT会 あずにゃん
2. 自己紹介 フロントエンドエンジニア。 言語： JavaScript・TypeScript FW/ライブラリ： Vue.js・React・jQuery @azunyan_eng
3. 今日お話しすること 1 vanilla-extractとは 2 主な使い方 3 つまづいたこと 4 感想 5 参考資料
4. 今日お話しすること 先月、microCMSさんのLT会で vanilla-extractを知った！ 見やすそうだし、CSS Modulesだし... なんか、良さそう！
5. 今日お話しすること styled-componentsやSassを使った業務経験が 過去にあり。
6. 1 vanilla-extractとは 2 主な使い方 3 つまづいたこと 4 感想 5 参考資料
7. vanilla-extractとは 2021年5月リリース。 CSS Modulesの考え方がベース。 オブジェクト形式で記述。
8. 1 vanilla-extractとは 3 つまづいたこと 4 感想 5 参考資料 2 主な使い方
9. 主な使い方 提供されているAPIと関数を 組み合わせて利用！
10. Styling API〜style~ export = ({ : , : }); const toDoStyle style display justifyContent 'flex' 'space-between'
11. Styling API~globalStyle~ 全体を通して共通化したいスタイルを記述。
12. Styling API~globalStyle~ globalStyle( , { : , : , : , : , : , : }); 'body, #root' '#FFFFFF' '#1A1A1A' '0' 'flex' 'column' '100vh' backgroundColor color margin display flexDirection minHeight
13. Styling API~globalStyle~ import ; "./styles/global.css"
14. Styling API~createTheme~ 同じcss.tsファイル内でのみ使える変数を 作成！
15. Styling API~createTheme~ export export , = ({ : { : } }); = ({ : . . }); const const [themeClass vars] alertBtn vars createTheme style background alert backgroundColor background alert 'red'
16. Styling API~createTheme~ < = > = > 全て削除する div button => button div className onClick className { } { } { } themeClass alertBtn < = </ > </ > () () handleDeleteAll
17. Styling API~createGlobalTheme~ 共通で使える変数を作成！
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
19. Styling API~createGlobalTheme~ export = ({ : , : . . , : . . }); const footerStyle globalTheme globalTheme style marginTop backgroundColor background main color font color 'auto'
20. Sprinkles API ユーティリティクラスを作成！ conditionsを使ってレスポンシブ対応も！
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%'
22. Sprinkles API export = ( ); const sprinkles responsiveStyle createSprinkles
23. Sprinkles API < > < /> < /> < = , > < /> < /> </ > </ > div div div div Form DeleteAllBtn ToDos DoneToDos className display: justifyContent: { 'flex' 'center' } sprinkles( ) { }
24. 1 vanilla-extractとは 2 主な使い方 4 感想 5 参考資料 3 つまづいたこと
25. つまづいたこと そもそも、vanilla-extract自体を 適用するのに手間取った！
26. つまづいたこと〜原因〜 create-react-appをサポートしていなかった...。 ※公式からのサポート状況に関する言及は特になし。 ※公式のGitHub Issueでは、サポートしていないとの回答が。 ※Cracoを一緒に使うことで利用できるようになるとの回答も。
27. つまづいたこと〜原因〜 Craco導入したらいけるかな〜？？ Webpack等の構成を 上書きできる！ eject不要！
28. つまづいたこと〜原因〜 ダメだった...。
29. つまづいたこと〜解決〜 create-react-appに頼らない！ 面倒くさがらずに、Webpackのinstall、 webpack.config.jsの作成もやりましょう！
30. 1 vanilla-extractとは 2 主な使い方 3 つまづいたこと 5 参考資料 4 感想
31. 感想 CSS Modulesの方が好みなので、使い勝手が良いと感 じた！ styled-componentsとは異なり、オブジェクト形式だ と書きやすい！見やすい！ 定義元に簡単に移動できるのは助かる！
32. 1 vanilla-extractとは 2 主な使い方 3 つまづいたこと 4 感想 5 参考資料
33. 参考資料 vanilla-extract公式ドキュメント CSS in JSとしてVanilla-Extractを選んだ話と技術選定 の記録の残し方 vanilla-extract を試す vanilla-extractを使ってみた感想
34. 参考資料 create-react-app公式ドキュメント Craco公式GitHubリポジトリ styled-components公式ドキュメント
35. ご清聴ありがとうございました！