create-react-appで作成したアプリでCSSのローカルスコープを使う

はじめに

弊社で運営しているWebサービスのスマートフォン用サイトでは、Reactを使ってフロントエンドを開発しています。

現在、Reactのコンポーネントの中で、CSSファイルをロードする方法と、style属性を直接書く方法とが混在していたため、両者の良いところを活かせる方法がないか探していました。

create-react-appとは

Reactでアプリを開発するには、reactjsだけでなくwebpackなどのモジュールバンドラや、Babelなどのトランスパイラといった他のライブラリを合わせて使うことがよくあります。
create-react-appは、そういったよく使うライブラリを含めて1発でインストールしてくれる優れものです。

CSSのスコープはグローバルになる

Reactではコンポーネントという単位でUIを部品ごとに作成し、コンポーネントを組み合わせてアプリを開発しますが、以下のようにスタイルシートを書くと、スタイルはコンポーネントとは関係なくグローバルに定義されてしまいます。

/* style.css */
.hoge {
  color: red;
}

// hoge.js
import React from 'react';
import Foga from './fuga.js';
import from './style.css';

class Hoge extends React.Component {
  render() {
    return (
      <div>
        <div class="hoge">
          これは赤色の文字になる
        </div>
        <Fuga />
      </div>
    );
  }
}

// fuga.js
import React from 'react';

class Fuga extends React.Component {
  render() {
    return (
      <div class="hoge">
        これも赤色の文字になってしまう
      </div>
    );
  }
}

CSSのスコープをコンポーネントに閉じ込めたい

以下のような感じで実装できます。

/* style.css */
:local .hoge {
  color: red;
}

// hoge.js
import React from 'react';
import Foga from './fuga.js';
import style from './style.css';

class Hoge extends React.Component {
  render() {
    return (
      <div>
        <div class={style.hoge}>
          これは赤色の文字になる
        </div>
        <Fuga />
      </div>
    );
  }
}

// fuga.js
import React from 'react';

class Fuga extends React.Component {
  render() {
    return (
      <div class="hoge">
        これは赤色の文字にならない
      </div>
    );
  }
}

従来CSSのグローバルスコープの問題は、class属性の命名規則などで回避していました。
アプリケーションの規模が大きくなってくると、規則を維持することが大変になってきたり、規則自体が破綻してしまうこともあるのですが、Reactを使う場合はコンポーネント毎にスコープを絞れるので便利です。