【初学者】Reactにおけるスタイリング方法をまとめてみた

# はじめに
はじめまして！りかと申します。
現在、RUNTEQにてプログラミングを学習しています。

12月に開催される「RUNTEQ祭」というイベントに向け、チーム開発を行いました。
その中で`React`を使用した際に、スタイリング方法が複数あることを知ったため、それぞれの概要・メリット・デメリットを調べてみました。

【チーム開発】2人協力型のホラー×謎解きゲーム「[MISERY](https://misery-seven.vercel.app/)」

https://misery-seven.vercel.app/

※一部音声が流れます

# 注意点
::: note warn
私はプログラミング学習中で、初学者です。
内容に誤りがある場合がございます。
もし間違いがあればご指摘いただけますと幸いです。
:::

# 目次
- インラインスタイル
- CSS Modules
- CSS in JS
- Tailwind CSS
- UIコンポーネントライブラリ

## インラインスタイル
インラインスタイルは、スタイルを`JavaScript`オブジェクトとして定義し、コンポーネントの`style`属性に適用します。

```jsx
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`を別ファイルで管理し、モジュールのようにインポートするだけでスタイルを適用できます。

https://github.com/css-modules/css-modules

```App.module.css
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}
```
```App.js
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`を書く方法です。

https://styled-components.com/

```jsx
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`特有のクラス名が用意されており、それらのクラスを組み合わせてスタイルを構築します。

https://tailwindcss.com/

```jsx
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の例：

https://mui.com/

![ca7d77f449f5be295842b4b71acc4d62.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467801/94b196ec-fd02-7938-468b-21ff40b33e5e.gif)

ライブラリをインストールし、コードをペーストするだけでスタイリングをすることができます。
また、ライブラリごとにデザインが統一されているので、デザインを一から考える必要がなく、自然な見た目の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`を使用している方が多いように見えました。

プロジェクトの要件やチームの方針に応じて、適切な方法を選択できるよう、それぞれのメリット・デメリットを把握して活用できたらいいなと感じました。

最後まで読んでくださりありがとうございました！