はじめに
はじめまして！りかと申します。
現在、RUNTEQにてプログラミングを学習しています。
12月に開催される「RUNTEQ祭」というイベントに向け、チーム開発を行いました。
その中でReactを使用した際に、スタイリング方法が複数あることを知ったため、それぞれの概要・メリット・デメリットを調べてみました。
【チーム開発】2人協力型のホラー×謎解きゲーム「MISERY」
※一部音声が流れます
注意点
私はプログラミング学習中で、初学者です。
内容に誤りがある場合がございます。
もし間違いがあればご指摘いただけますと幸いです。
目次
- インラインスタイル
- CSS Modules
- CSS in JS
- Tailwind CSS
- UIコンポーネントライブラリ
インラインスタイル
インラインスタイルは、スタイルをJavaScriptオブジェクトとして定義し、コンポーネントのstyle属性に適用します。
import React from 'react';
const App = () => {
const buttonStyle = {
backgroundColor: 'blue',
color: 'white',
padding: '10px 20px'
};
return <button style={buttonStyle}>Click me</button>;
};
export default App;
【メリット】
- 外部
CSSファイルが不要 - コンポーネント単位でスタイルを分けられる
【デメリット】
-
CSSの全機能をサポートしていないため、複雑なスタイリング（例：擬似クラスやメディアクエリ）には向かない - コンポーネント内にスタイルを直接記述するため、可読性が低くなることがある
CSS Modules
CSS Modulesは、CSSを別ファイルで管理し、モジュールのようにインポートするだけでスタイルを適用できます。
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}
import React from 'react';
import styles from './App.module.css';
const App = () => {
return <button className={styles.button}>Click me</button>;
};
export default App;
【メリット】
-
CSSのスコープをコンポーネントに限定 - クラス名の衝突を回避
例：ビルド時に「button」というクラス名を「button__3a2fX」のような形に変換することで、異なるコンポーネント間でのクラス名の衝突を回避して、意図しない挙動を防ぐことができる
【デメリット】
-
Webpackなどのビルドツールで設定を行う必要があり、初学者にとっては複雑に感じられる可能性がある
CSS in JS（例：Styled Components）
CSS in JSは、JavaScriptの中にCSSを書く方法です。
import React from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
`;
const App = () => {
return <StyledButton>Click me</StyledButton>;
};
export default App;
【メリット】
- コンポーネント単位でスタイルを分けられる
- 動的なスタイリングが容易
【デメリット】
- コンポーネント内にスタイルを直接記述するため、可読性が低くなることがある
- ランタイムCSS in JSの場合、
JavaScriptによる初期解析とブラウザによる生成されたCSSの再解析が必要なため、パフォーマンス上のオーバーヘッドが生じる可能性がある
CSS in JSライブラリの例：
- Styled Components
- Styled JSX
- Emotion
- vanilla-extract
- Linaria
- Panda CSS など
Tailwind CSS
Tailwind CSSは、CSSのフレームワークの一つです。Tailwind CSS特有のクラス名が用意されており、それらのクラスを組み合わせてスタイルを構築します。
import React from 'react';
const App = () => {
return <button className="bg-blue-500 text-white py-2 px-4">Click me</button>;
};
export default App;
【メリット】
- カスタマイズ性が高い
- 迅速なスタイルの設定が可能
【デメリット】
- 初学者には直感的でない場合あり
- カスタマイズに慣れが必要
UIコンポーネントライブラリ
UIコンポーネントライブラリは、UIを構築する際に役立つツールの集合体です。ボタン、フォーム、メニューバーなどのUIコンポーネントをカスタマイズ可能な形で提供しています。
MUIの例：
ライブラリをインストールし、コードをペーストするだけでスタイリングをすることができます。
また、ライブラリごとにデザインが統一されているので、デザインを一から考える必要がなく、自然な見た目のUIを作ることができます。
【メリット】
- 迅速なスタイルの設定が可能
- 一貫性のあるデザインにより、アプリケーション全体でのデザインの統一感が保たれる
【デメリット】
- 一部のライブラリでは、カスタマイズのオプションが限られており、特定のデザイン要件を満たすのが難しいこともある
UIコンポーネントライブラリの例：
- MUI（Material UI）
- Chakra UI
- Ant Design（AntD）
- Semantic UI React
- React Bootstrap
- Mantine など
まとめ
Reactにおけるスタイリング方法を調べてみましたが、今回取り上げた方法以外にもまだまだたくさんあり、これからも引き続き調べてみたいと思いました！
調べてみた体感では、CSS ModulesとCSS in JSが人気のようでしたが、RUNTEQではTailwind CSSを使用している方が多いように見えました。
プロジェクトの要件やチームの方針に応じて、適切な方法を選択できるよう、それぞれのメリット・デメリットを把握して活用できたらいいなと感じました。
最後まで読んでくださりありがとうございました！