ReactでCSSを書く方法の違い

私たちは、HTML ドキュメントの<head>にスタイルシートをリンクする標準的な方法に精通していますが、これは CSS を書くためのいくつかの方法のうちの一つに過ぎません。では、シングルページアプリケーション（SPA）では、例えばReactプロジェクトでどのようにスタイルを書くのでしょうか。

実際、React アプリケーション内で CSS を書くためのさまざまな方法があります。いくつかは伝統的な方法と似ていますが、いくつかは大きく異なります。次に、使用できる方法をまとめてみましょう。

外部スタイルシートのインポート#

その名の通り、React は CSS ファイルをインポートすることができます。このプロセスは、HTML の<head>で CSS ファイルをリンクする方法と似ています：

プロジェクトディレクトリ内に新しい CSS ファイルを作成します。
CSS を書きます。
React ファイルにインポートします。
例えば

import "./style.css";

通常、このインポートはファイルの先頭に配置されます。

import { React } from "react";
import "./App.css";
function App() {
  return (
    <div className="main">
    </div>
  );
}
export default App;

上記の例では、App.jsxの先頭にApp.cssという名前のファイルがインポートされています。

インラインスタイルの書き方#

過去には、インラインスタイルはメンテナンス性などの観点からあまり良い方法ではないと言われていましたが、特定の場合には有用です。そして、React ではメンテナンス性は問題ではありません、なぜなら CSS は通常同じファイルに既に存在しているからです。
以下は、React で非常に簡単なインラインスタイルの書き方です：

<div className="main" style={{ color: "red" }}>

しかし、より良い方法はオブジェクトを渡すことです：

最初に、異なる要素のスタイルを含むオブジェクトを作成します。
それを要素にstyle属性として追加します。

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    <div className="main" style={styles.main}>
      <input type="text" style={styles.inputText}></input>
    </div>
  );
}
export default App;

この例では、stylesというオブジェクトが含まれており、そのオブジェクトには.mainクラスに適用されるスタイルと、input要素に適用されるスタイルが含まれています。これは、外部スタイルシートで見たいスタイルルールに似ています。そして、これらのオブジェクトを要素のstyle属性に適用します。
この例では、スタイルオブジェクトが含まれており、そのオブジェクトには.mainクラスに適用されるスタイルと、テキスト入力に適用されるスタイルが含まれています。これらのオブジェクトは、返されるマークアップ内の要素のスタイル属性に適用されます。
注意してください。スタイルを参照する際には、通常の HTML で使用する引用符ではなく、中括弧を使用します。

CSS Modules の使用#

CSS Modulesは、ローカルスコープ変数の利点を持つ CSS を React と一緒に使用することができます。しかし、それは一体何なのでしょうか？
ドキュメントからの引用によれば、

CSS Modules は、個々の CSS ファイルを CSS とデータの両方にコンパイルすることで機能します。CSS の出力は通常のグローバル CSS であり、ブラウザに直接インジェクトするか、連結してファイルに書き込んで本番で使用できます。データは、ファイルで使用した人間が読める名前をグローバルに安全な出力 CSS にマップするために使用されます。

翻訳すると、

CSS Modules は、個々の CSS ファイルを CSS とデータの両方にコンパイルすることで機能します。CSS の出力は通常のグローバル CSS であり、ブラウザに直接インジェクトするか、連結してファイルに書き込んで本番で使用できます。データは、ファイルで使用した人間が読める名前をグローバルに安全な出力 CSS にマップするために使用されます。

要するに、CSS Modulesを使用すると、同じクラス名を複数のファイルで使用しても競合しないようにすることができます。それぞれのクラス名にはユニークなプログラム名が付いています。これは、大規模なアプリケーションで特に便利です。各クラス名は、それをインポートした特定のコンポーネントにローカルに適用されます。
CSS Modules スタイルシートは通常のスタイルシートと似ていますが、拡張子が異なります（例：styles.module.css）。これが設定方法です：

.module.cssという拡張子を持つファイルを作成します。
そのモジュールを React アプリケーションにインポートします（以前に見たものと同じように）。
要素またはコンポーネントにclassNameを追加し、インポートしたスタイルから特定のスタイルを参照します。

簡単な例：

@tab styles.module.css

/* styles.module.css */
.heading {
  color: #f00;
  font-size: 20px;
}

@tab App.jsx

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

styled-components の使用#

styled-componentsを使ったことはありますか？これは非常に人気があり、実際の CSS を使用してカスタムコンポーネントを JavaScript で構築することができます。styled-componentは基本的にはスタイルを持つReactコンポーネントです。ユニークなクラス名、動的なスタイル、より良い CSS 管理を備えており、各コンポーネントに独自のスタイルがあります。
次のコマンドでstyled-componentsの npm パッケージをインストールします：

npm install styled-components

次に、React アプリでそれをインポートします：

import styled from 'styled-components'

コンポーネントを作成し、スタイルプロパティを割り当てます。バッククォートで囲まれたテンプレートリテラルを使用してWrapperオブジェクト内でスタイルを指定することに注意してください：

import { React } from "react";
import styled from "styled-components";
function App() {
  const Wrapper = styled.div`
    width: 100%;
    height: 100px;
    background-color: red;
    display: block;
  `;
  return <Wrapper />;
}
export default App;

上記のWrapperコンポーネントは、これらのスタイルを持つdivとしてレンダリングされます。

条件付きスタイル#

styled-componentsの利点の一つは、コンポーネント自体が機能的であることです。なぜなら、CSS内でpropsを使用することができるからです。これにより、条件文やstateやpropsに基づいてスタイルを変更することができます。
以下はコードのデモです：

import { useState } from "react";
import styled from "styled-components";
function App() {
  // display state
  const [display, setDisplay] = useState(true);
  return (
    <>
      <Wrapper $display={display} />
      <button onClick={() => setDisplay(!display)}>Toggle</button>
    </>
  );
}
// the wrapper styled component
const Wrapper = styled.div`
  width: 100%;
  height: 100px;
  background-color: red;
  display: ${(props) => (props.$display ? "block" : "none")};
`;
export default App;

ここでは、divのdisplayプロパティを操作しています。この状態はボタンによって制御され、ボタンをクリックするとdivの状態が切り替わります。その結果、異なる状態のスタイルの間を切り替えることができます。
インラインのif文では、通常のif/else構文の代わりに?を使用しています。else部分はセミコロンの後にあります。常に初期化後に呼び出すか、状態を使用することを覚えておいてください。たとえば、最後のデモでは、状態はWrapperコンポーネントのスタイルの上にあるべきです。

まとめ#

React アプリケーションでスタイルを書くためのさまざまな方法を見てきました。一つが他よりも優れているとは言いませんが、使用する方法は具体的な状況によります。
これらの方法について理解が深まり、React のスタイルライブラリにはさまざまなツールがあることを知っていることを願っています。