Web開発ログ | エンジニアに役立つ情報 | 開発の中での気づきを発信

高卒Devlog

TSLab【第4回 React定例会】React with CSS

thumbnail

こんにちは! RYOTAです!

当記事をご覧くださりありがとうございます!

当記事はTSLab・React定例会のレポート記事になります!

はじめに

私が運営しているTSLabの第4回・React勉強会の実施ログとなります。
第4回のテーマは【React with CSS】
フロントエンドのカオスの一つ、CSS周りについて触れて頂きます。
今回もカルキチさんに講師をして頂きました!ありがとうございます!
@karukichi_yah Twitter

実施内容

今回の勉強会ではReactにおいてのCSSの種類や選定基準についてお話をいただきました。
下記ドキュメントに詳しく記載がされているので、当記事では簡単なサマリーのみ記載をさせて頂きます。
気になる方は下記のドキュメントをご参照ください。
※2022年5月時点の情報となります。
※個人の見解が多く含まれるのでご注意ください。
https://github.com/Yota-K/react-study/blob/main/doc/%E7%AC%AC4%E5%9B%9E/React%E3%81%AECSS%E9%81%B8%E5%AE%9A%20Part1.md

サマリー

それぞれの区分や種類について下記に抜粋をしております。
詳しく知りたい方は上記のドキュメントをご参照ください。

CSSの大まかな区分

  • PureCSS
  • CSS Modules
  • CSS in JS
  • CSS Framework

CSS in JSの種類

GitHub - styled-components/styled-components: Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - GitHub - styled-components/styled-components: Visual primitives for the component age... GitHub
GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition 👩‍🎤 CSS-in-JS library designed for high performance style composition - GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition GitHub
GitHub - callstack/linaria: Zero-runtime CSS in JS library Zero-runtime CSS in JS library. Contribute to callstack/linaria development by creating an account on GitHub. GitHub
GitHub - vanilla-extract-css/vanilla-extract: Zero-runtime Stylesheets-in-TypeScript Zero-runtime Stylesheets-in-TypeScript. Contribute to vanilla-extract-css/vanilla-extract development by creating an account on GitHub. GitHub
※その他にも多くのライブラリが存在しますが、主要な一部のライブラリのみを挙げております。

記述の種類

  • テンプレートリテラルスタイル
  • コンポーネントスタイル
  • オブジェクトスタイル

選定基準

https://github.com/Yota-K/react-study/blob/main/doc/%E7%AC%AC4%E5%9B%9E/React%E3%81%AECSS%E9%81%B8%E5%AE%9A%20Part1.md#%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

さいごに

React勉強会シリーズ第四弾終了!
カルキチさん今回も本当にありがとうございました…!!!
CSSは種類が多く、開発メンバーの傾向や、既に使われている技術に依存する形で技術選定されることが多いと思いますが、今回の勉強会である程度の基準が出来たのではないでしょうか...?
あとは実際にご自身の手で触れて、技術選定の際の基準を作って頂ければ幸いです!
次回の勉強会ですが「Reactの状態管理ライブラリ」について触れていく予定です!
ご興味がある方は私のTwitterをフォローの上、ご連絡いただければと思います♪
以上。最後までご覧くださりありがとうございました!