Yanonoblog!

こつこつと

ReactにおけるInline stylesとCSS Modules

はじめに

本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。

書籍に記載されている内容を順序立ててまとめるというよりは、整理しておきたい周辺の知識と深ぼった内容を雑多に書いています。

CSS

CSS (Cascading Style Sheets) は、Web ページのスタイルとレイアウトに使用されます。

MDN Web Docs - CSS

ReactのプロジェクトでCSSを適用させる場合、色々な手法があります。

今回はCSS自体については特に触れず、Reactにおける一般的なCSSの適用方法について挙げていきます。

インラインスタイル

インラインスタイルは、Reactコンポーネント内でスタイルを直接定義するコンポーネント指向の特徴を活かしたスタイリング方法です。

スタイルはJavaScriptオブジェクトとして宣言され、コンポーネントの要素に**styleプロパティ**として割り当てられます。

例

styleプロパティにJavaScriptのオブジェクトとしてスタイルを渡しています。

return (
  <div style={{ color: 'red', fontSize: '16px', backgroundColor: 'lightblue' }}>
    Hello, React!
  </div>
);

JavaScriptなので下記のように事前にスタイルを定義してからstyleに渡すこともできます。

const styles = {
  color: 'red',
  fontSize: '16px',
  backgroundColor: 'lightblue',
};

// コンポーネント内でスタイルオブジェクトを使用する
return <div style={styles}>Hello, React!</div>;

下記はJavaScriptの条件分岐を使用して動的なスタイルを定義する例です。

const isImportant = true;

// スタイルオブジェクトを動的に変更する
const styles = {
  color: isImportant ? 'red' : 'black',
  fontSize: isImportant ? '20px' : '16px',
};

return <div style={styles}>Hello, React!</div>;

コンポーネント単位でスタイルを管理することで、スタイルのカプセル化や再利用性の向上が期待できます。

インラインスタイルでは柔軟なUIの作成ができますが、大規模なアプリケーションではスタイルの管理が複雑になる場合もあるため、他の手法も活用することも重要です。

CSS Modules

ReactにおけるCSS Modulesは、CSSスタイルをコンポーネント単位で管理するための手法です。

通常のCSSとは異なり、クラス名の衝突やスコープの管理に関する問題を解決することができます。

例

下記の例ではButton.module.cssという名前のCSSファイルでスタイルを定義し、stylesオブジェクトにインポートしています。

コンポーネント側ではclassName属性にstyles.buttonを適用してボタンのスタイルを指定しています。

// Button.module.css

.button {
  color: red;
  font-size: 16px;
  background-color: lightblue;
}

// Button.jsx

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return <button className={styles.button}>Click me</button>;
};

CSS Modulesを使用することで、コンポーネント内で定義されたスタイルは自動的に一意のクラス名に変換され、他のコンポーネントのスタイルと衝突することなく適用されます。

まとめ

インラインスタイルはコンポーネントごとにスタイルを指定できるが、スタイルの再利用性や保守性に課題があります。

CSS Modulesはクラス名の衝突を回避し、スタイルのスコープを管理できるが、別途設定やビルド手順が必要です。

インラインスタイル
  • コンポーネント内でスタイルを直接指定できる
  • スタイルの変更が即座に反映される
  • 外部CSSファイルの読み込みが不要
    • インラインスタイル
  • クラス名の衝突を回避できる
  • コンポーネントごとにスタイルを管理できる
  • スタイルのスコープが明確になり、意図しない影響を受けにくい

    • 参考

    続く…

    コメント

    本記事の内容は以上になります！

    書籍の続きのアウトプットも随時更新したいと思います。


    プログラミングスクールのご紹介 (卒業生より)

    お世話になったプログラミングスクールであるRUNTEQです♪

    https://runteq.jp/r/ohtFwbjW

    こちらのリンクを経由すると１万円引きになります。

    RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

    もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

    https://twitter.com/outputky