はじめに
はじめまして!りかと申します。
現在、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
を使用している方が多いように見えました。
プロジェクトの要件やチームの方針に応じて、適切な方法を選択できるよう、それぞれのメリット・デメリットを把握して活用できたらいいなと感じました。
最後まで読んでくださりありがとうございました!