Reactでのスタイリングする方法 【CSS】 基礎

ReactでCSSを扱う方法について、初学者の方に向けて、利点やデメリットも含めてご紹介したいと思います。

ReactでCSSのスタイルを設定する方法は、いくつかあります。

そこで、本記事では複数の方法について解説していきます

CSSを使用したReactでのスタイリング　

Reactにおけるスタイリングには、インラインスタイルや外部CSSファイル、CSSモジュールなどがあります。

インラインスタイルを使用する場合、値はJavaScriptオブジェクトとして渡す必要があります。

例えば以下のように、スタイルをJavaScriptオブジェクトとして定義して、要素に適用することができます。

const myStyles = {
  width: 400,      
  height: 100,
  borderRadius: 4,
  border: "none",
  padding: "1.5em",
  color: "#fff",
  background: "#639",
  boxShadow: "0 0 3px 2px #cec7c759",
  display: "flex",
  alignItems: "center",
};

const App = () => {
  return (
    <div style={myStyles}> Inline Style</div>
  );
};

スタイル属性での場合は、いくつかの制限があります。例えば、CSS擬似セレクターやメディアクエリは使用できません。

これらを解決するためには、「Radium」などのライブラリを使用することができます。

ただし、React公式ドキュメントでは、インラインスタイルを使用することを非推奨としています。

その理由の1つは、スタイルをインラインで定義すると、毎回新しいオブジェクトが作成されるため、パフォーマンスの問題が発生する可能性があるということです。

そのため、ほとんどの場合、CSSファイルとJSファイルを分けて管理し、外部CSSスタイルシートをインポートし、「className」属性を使用してスタイルを適用することが推奨されます。

例えば以下のように、CSSファイルをインポートして、「className」属性でスタイルを指定することができます。

import './index.css';

const App = (props) => {
    return (
        <h1 className="box">Hello welcome</h1>
    );
};

React開発者になるのであれば、CSS Modulesの使用をお勧め致します。

CSS Modulesとは

Webアプリケーションの開発において、スタイルシートを扱う際にクラスの命名が難しい場合があり、不注意になると競合が発生する可能性があります。

実際にCSSでのルールはグローバルスコープに従います。

同じ名前である２つ以上のクラスが衝突した場合、予期せぬ振る舞いを引き起こすことがあります。

しかし、CSS Modulesを使うことでこの問題を解決することができます。

CSS Modulesは、Reactアプリケーションに限らず、他のフレームワークや純粋なHTML/CSSのプロジェクトでも使用できます。

CSS Modulesでは、CSSファイルをモジュール化して、他のモジュールから利用できるようにします。

これにより、CSSの名前空間の衝突を防ぎ、保守性を高めることができます。

CSS Modulesで生成されるJavaScriptオブジェクトは、CSSクラス名をプロパティ名、一意の識別子を値とするオブジェクトです。

これにより、CSSのクラス名をコード上で直接指定する必要がなくなり、タイプミスや誤ったクラス名を使用する問題を回避することができます。

以下は、CSS Modulesで生成されたJavaScriptオブジェクトの例です。

// styles.css
.redButton {
  background-color: red;
}

// component.js
import styles from './styles.css';

function MyComponent() {
  return (
    <button className={styles.redButton}>
      Click me
    </button>
  );
}

CSS Modulesで生成される一意の識別子は、ローカル識別子とグローバル識別子の2種類があります。

デフォルトでは、ローカル識別子が使用されます。

つまり、同じクラス名でも異なるファイル内で定義された場合は、異なる識別子が生成されます。

これにより、同じクラス名を使用しても、異なるスタイルを適用することができます。

一方、グローバル識別子を使用することもでき、グローバル識別子を使用すると、グローバルに一意なクラス名が生成されます。

CSS Modulesは、クラスを拡張し、それらのスタイルを継承することもできます。

この概念は「クラス構成」と呼ばれます。

これにより、特定のコンポーネントにスタイリング機能を提供することができます。

CSS Modulesの作成

CSS Modulesを作成する際には、create-react-app(以下CRA)を使用している場合に限り、コンポーネントのCSSモジュールを作成するのは比較的容易です。

基本的には、CSSファイルの命名規則に従い、「.module.css」の拡張子を使用します。

例えば、「styles.module.css」という名前のファイルにスタイルを記述することができます。

styles.module.css

以下のようなCSSファイルがあるとします。

.test {
  color: red;
  font-size: 16px;
}

このCSSファイルをコンパイルすると、以下のようなものが生成されます。

.test_jhys {
  color: red;
  font-size: 16px;
}

ここで、追加された「_jhys」は、このクラスを一意に識別するために使用されるサンプルキーとなります。

また、元のCSS名を名前が変更された名前にマップするJavaScriptオブジェクトも生成されます。

このJavaScriptオブジェクトを使用して、Reactコンポーネント内でCSSクラスを参照することができます。

以下は例です。

import styles from './styles.module.css';

function MyComponent() {
return (
<div className={styles.test}>Hello, world!</div>
);
}

ここで、「styles.test」は、CSSモジュール内で定義された「.test」クラスにマップされます。

以上のように、CSS Modulesは、Reactアプリケーションにおいて、スタイルの競合を回避し、保守性の高いプロジェクトアーキテクチャを実現するための重要なツールとなります。

本日は以上となります。

最後までお読み頂きありがとうございました。