ReactにおけるCSS Modulesを使ったスタイリング学習の始め方

このレッスンと以降のレッスンでは、Reactコンポーネントをスタイリングするためのもう一つの現代的で効果的なアプローチ、CSS Modulesの使用について検討していきます。

CSSモジュールはこのアプローチにおいて、コンパイルされた個別のCSSファイルであり、クラス名とアニメーション名がローカルスコープ内にあるため、異なるコンポーネントからのクラス名の衝突を回避できます。

始めに、シンプルなReactアプリケーションbuttonsを作成し、起動しましょう。そのために、空のフォルダtestを作成し、その中に入り、ターミナルで以下のコマンドを実行します：

terminalnpx create-react-app buttons
cd buttons
npm start

もしReactのバージョンが新しい、つまりCreate React App v2以上をサポートしている場合、追加の設定は必要ありません。なぜなら、その場合CSS Modulesは自動的にサポートされるからです。確認するにはpackage.jsonを確認し、依存関係react-scriptsのバージョンが2.x.x以上であれば問題ありません。そうでなければReactを更新してください。

CSS Modules方式でスタイリングする私たちのアプリケーションは、3つのボタンを含みます。

CSSファイルは、以下の慣例に従って命名します： [name].module.css。

では、src内にcomponentsフォルダを作成し、その中にボタン用のCSSスタイルを含むファイルButtons.module.cssを追加しましょう：

Buttons.module.css.btn1 {
  background-color: orange;
  border: 2px solid brown;
  color: white;
}

.btn2 {
  background-color: red;
  border: 2px solid green;
  color: yellow;
}

.btn3 {
  background-color: brown;
  border: 2px solid yellowgreen;
  color: orange;
}

また、componentsフォルダ内に、Reactコンポーネントの空のファイルButtons.jsを作成します。ただし、生成されたファイルApp.jsは今は触らず、後で扱います！

Buttons.jsでは、CSSスタイルファイルを必ずインポートし、これらのスタイルをclass属性を使って各ボタンに適用します：

Buttons.jsimport styles from "./Buttons.module.css"; 

const Buttons = () => (
  <>
    <button class={styles.btn1}>btn1</button>
    <button class={styles.btn2}>btn2</button>
    <button class={styles.btn3}>btn3</button>
  </>
);

export default Buttons;

ちなみに、スタイルオブジェクトをインポートする際の名前としてstylesという単語を使う必要はありません。便利な名前を付けることができます。

次のレッスンでこのアプリケーションを完成させます。