[CSS][React] スタイル一覧

# 一覧
## **スタイル手法の分類**

| 分類                    | スタイル手法            | 説明 |
|-------------------------|-----------------------|--------------------------------------------------------|
| **直接適用型**         | インラインスタイル     | `style={{ color: "red" }}` のように直接要素に適用 |
| **内部適用型**         | 内部スタイル          | `<style>` タグや `<style jsx>` を使用 |
| **ファイルインポート型** | 外部CSS              | `.css` ファイルを `import` して適用 |
| **モジュール型**       | CSS Modules          | `.module.css` を `import` し、クラス名を動的に割り当て |
| **CSS-in-JS型**       | Styled JSX          | `next.js` に特化した `styled jsx` |
|                         | styled-components    | `styled.div` などでコンポーネントごとに定義 |
|                         | Emotion             | `styled-components` の代替で、柔軟なスタイル定義が可能 |
|                         | Vanilla Extract     | TypeScript ベースの型安全な `CSS-in-JS` |
| **ユーティリティクラス型** | Tailwind CSS       | クラスを直接組み合わせてスタイル適用 |
| **プリプロセッサ型**     | SASS/SCSS           | 変数やミックスインを使用可能な CSS 拡張 |

## **補足**
- **ライブラリ不要なもの**: インラインスタイル、内部スタイル、外部CSS、CSS Modules は **ブラウザ標準の機能** で動作。
- **ライブラリが必要なもの**: 
  - `CSS-in-JS` 系 → `styled-components`, `Emotion`, `Vanilla Extract`  
  - `ユーティリティクラス型` → `Tailwind CSS`  
  - `プリプロセッサ型` → `SASS/SCSS`

# 詳細
## インラインスタイル
- **メリット**: 
  - 簡単にスタイルを適用でき、動的なスタイル変更が可能。
- **デメリット**: 
  - 冗長になりがちで、CSSの機能制限がある。

~~~jsx:App.js
import InlineStyleComponent from "./InlineStyleComponent";

function App() {
  return <InlineStyleComponent />;
}

export default App;
~~~

~~~jsx:InlineStyleComponent.js
function InlineStyleComponent() {
  return (
    <div style={{ backgroundColor: "lightblue", padding: "20px", borderRadius: "10px" }}>
      <h2 style={{ color: "darkblue" }}>インラインスタイル</h2>
    </div>
  );
}

export default InlineStyleComponent;
~~~

## 内部スタイル
- **メリット**: 
  - HTMLとスタイルが一体化し、修正が簡単。
- **デメリット**: 
  - 再利用性が低く、スタイル競合の可能性がある。

~~~jsx:App.js
import InternalStyleComponent from "./InternalStyleComponent";

function App() {
  return <InternalStyleComponent />;
}

export default App;
~~~

~~~jsx:InternalStyleComponent.js
function InternalStyleComponent() {
  return (
    <>
      <style>
        {`
          .internal-style {
            background-color: lightcoral;
            padding: 20px;
            border-radius: 10px;
          }
          .internal-style h2 {
            color: white;
          }
        `}
      </style>
      <div className="internal-style">
        <h2>内部スタイル</h2>
      </div>
    </>
  );
}

export default InternalStyleComponent;
~~~

## 外部CSS
- **メリット**: 
  - スタイルの再利用が容易で、他のツールとの統合が簡単。
- **デメリット**: 
  - グローバルな影響があり、パフォーマンスに影響を与えることがある。

~~~jsx:App.js
import ExternalCssComponent from "./ExternalCssComponent";
import "./styles.css";

function App() {
  return <ExternalCssComponent />;
}

export default App;
~~~

~~~jsx:ExternalCssComponent.js
function ExternalCssComponent() {
  return (
    <div className="external-style">
      <h2>外部CSS</h2>
    </div>
  );
}

export default ExternalCssComponent;
~~~

~~~jsx:styles.css
.external-style {
  background-color: lightgreen;
  padding: 20px;
  border-radius: 10px;
}

.external-style h2 {
  color: darkgreen;
}
~~~

## CSS Modules
- **メリット**: 
  - 名前の衝突を防ぎ、スタイルの再利用が可能。
- **デメリット**: 
  - スタイルの動的適用に手間がかかる。


~~~jsx:App.js
import CssModuleComponent from "./CssModuleComponent";

function App() {
  return <CssModuleComponent />;
}

export default App;
~~~

~~~jsx:CssModuleComponent.js
import styles from "./CssModuleComponent.module.css";

function CssModuleComponent() {
  return (
    <div className={styles.moduleStyle}>
      <h2>CSS Modules</h2>
    </div>
  );
}

export default CssModuleComponent;
~~~

~~~jsx:CssModuleComponent.module.css
.moduleStyle {
  background-color: lightyellow;
  padding: 20px;
  border-radius: 10px;
}

.moduleStyle h2 {
  color: goldenrod;
}
~~~

## Styled JSX (Next.js向け)
- **メリット**: 
  - コンポーネントごとのスタイルが適用でき、Next.jsとの親和性が高い。
- **デメリット**: 
  - Next.jsに依存し、他のReactプロジェクトでは使いにくい。


~~~jsx:App.js
import StyledJsxComponent from "./StyledJsxComponent";

function App() {
  return <StyledJsxComponent />;
}

export default App;
~~~

~~~jsx:StyledJsxComponent.js
function StyledJsxComponent() {
  return (
    <div className="jsx-style">
      <h2>Styled JSX</h2>
      <style jsx>{`
        .jsx-style {
          background-color: lightpink;
          padding: 20px;
          border-radius: 10px;
        }
        .jsx-style h2 {
          color: darkred;
        }
      `}</style>
    </div>
  );
}

export default StyledJsxComponent;
~~~

## styled-components
- **メリット**: 
  - コンポーネントごとのスタイル管理が簡単で、動的スタイルやテーマ管理が可能。
- **デメリット**: 
  - パフォーマンスへのオーバーヘッドがあり、JavaScriptに依存する。

~~~jsx:App.js
import StyledComponent from "./StyledComponent";

function App() {
  return <StyledComponent />;
}

export default App;
~~~

~~~jsx:StyledComponent.js
import styled from "styled-components";

const Container = styled.div`
  background-color: lavender;
  padding: 20px;
  border-radius: 10px;
`;

const Title = styled.h2`
  color: darkviolet;
`;

function StyledComponent() {
  return (
    <Container>
      <Title>styled-components</Title>
    </Container>
  );
}

export default StyledComponent;
~~~

## Emotion
- **メリット**: 
  - 柔軟なスタイル定義が可能で、軽量。
- **デメリット**: 
  - JavaScriptコード内でスタイルを記述するため、CSSとJSの分離が難しい。


~~~jsx:App.js
import EmotionComponent from "./EmotionComponent";

function App() {
  return <EmotionComponent />;
}

export default App;
~~~

~~~jsx:EmotionComponent.js
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const containerStyle = css`
  background-color: lightgray;
  padding: 20px;
  border-radius: 10px;
`;

const titleStyle = css`
  color: black;
`;

function EmotionComponent() {
  return (
    <div css={containerStyle}>
      <h2 css={titleStyle}>Emotion</h2>
    </div>
  );
}

export default EmotionComponent;
~~~

## Tailwind CSS
- **メリット**: 
  - ユーティリティクラスを使って迅速にスタイルを適用でき、レスポンシブデザインが簡単。
- **デメリット**: 
  - HTMLが冗長になりやすく、一貫性の保持が難しい。


~~~jsx:App.js
import TailwindComponent from "./TailwindComponent";
import "./index.css"; // 必要なら import

function App() {
  return <TailwindComponent />;
}

export default App;
~~~

~~~jsx:TailwindComponent.js
function TailwindComponent() {
  return (
    <div className="bg-blue-200 p-5 rounded-lg">
      <h2 className="text-blue-800">Tailwind CSS</h2>
    </div>
  );
}

export default TailwindComponent;
~~~

~~~jsx:tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
~~~

# 参考リンク
- [Reactでのスタイル適用方法を6つの手法に分けて解説](https://zenn.dev/kazu1/articles/3f7c6b8b1d3479?utm_source=chatgpt.com)
- [Reactにおけるスタイリング手法まとめ](https://zenn.dev/chiji/articles/b0669fc3094ce3?utm_source=chatgpt.com)
- [React CSSで悩む全ての人へ](https://ramble.impl.co.jp/1414?utm_source=chatgpt.com)
- [Reactでのスタイリングする方法 【CSS】 基礎](https://lismotech.co.jp/blog/%E5%8F%82%E8%80%83%E4%BE%8B%E4%BB%98%E3%81%8D%EF%BC%81react%E3%81%A7%E3%81%AE%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AA%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/?utm_source=chatgpt.com)
- [Reactとは？メリット・デメリット基本的な書き方、開発事例を解説](https://wakka-inc.com/blog/1997/?utm_source=chatgpt.com)
- [Reactをプロジェクトで利用して感じたメリット・デメリットまとめ](https://keita-blog.com/programming/react-merit-demerit?utm_source=chatgpt.com)