2018/04/24更新

[フロントエンド] create-react-appで作成したプロジェクトで、CSSモジュールを使う

こんにちは、@yoheiMuneです。
今日は、create-react-appでCSSモジュールを有効化する方法をブログに書きたいと思います。

何がしたいのか

create-react-appを用いることで、簡単にReactアプリケーションを作ることができます。create-react-appではほとんど設定ファイルが存在せず（正確には内部に隠されている）、シンプルなのに様々なことができるようになっています。

シンプルで使いやすいのは良いのですが、設定自体を変更したい場合には少し大変です。拡張できるポイントも用意されていますが、それに該当しない場合には独自に設定をする必要があります。CSSモジュールの有効化も独自設定が必要です。今日はその手順をブログに書きたい次第です。

CSSモジュールとは何か

少し話が逸れますが、CSSモジュールについても少し触れたいと思います。CSSモジュールはCSSにスコープの概念を追加することで、CSSの適用範囲を限定した使い方のできる方法です。具体的には作成したReactのコンポーネントにのみ適用できるようなCSSを書くことができます。適用範囲が限定されていることで、BEMなどのCSS設計手法は必要なく、単純なCSSクラス名でCSSを記述できるので、CSSがシンプルになります。

CSSモジュールの詳細は「CSSモジュール ― 明るい未来へようこそ」をご参照ください。

Angular.jsやVue.jsでは導入時点からスコープの限定されたCSSを使うことができますが、ReactはグローバルなCSS（=つまり普通のCSS）のみをサポートしています。ただし、設定を少し変更することでスコープの限定されたCSSを使うことができます。

ReactでCSSモジュールを有効化する

有効化するために、以下の手順を行います。

手順1：設定ファイルの抽出

create-react-appでアプリを作成すると、Webpackなどの設定ファイルは全て内包されて編集できません。それを取り出す作業を行います。それらの設定ファイルを取り出し、後続の設定を行なっていきます。

取り出すには以下のコマンドを実行します。

$ npm run eject

実行すると、「本当に実行するのか」の確認があり「y」を入力すると抽出が行われます。確認が行われる理由は、このejectは後戻りできないからです。eject後は全ての設定ファイルを自分で管理する必要があります。
ただそれでも、CSSモジュールを有効化するためにはejectが必要なので、実行します。

手順2：Webpackの設定ファイルを変更する

CSSモジュールを利用するための、 Webpackの設定を変更します。開発用と本番用の2ファイルを編集します。

// 変更前
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
  },
},

// 変更後
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    modules: true
  },
},

// 変更前
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    minimize: true,
    sourceMap: true,
   },
},

// 変更後
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    modules: true,
    minimize: true,
    sourceMap: true,
   },
},

なお今回はすでにcss-loaderがインストール済みなので、追加でモジュールをインストールする必要はありません。

これでCSSモジュールを使えるようになりました。

CSSモジュールを使ってみる

実際にReactで使ってみましょう。以下のCSSファイルがあるとします。

.h1 {
  text-align: center;
}
.a {
  display: block;
  text-align: center;
  margin-top: 40px;
}

これをJS側から読み込んで、CSSモジュールとして利用します。

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

// CSSファイルを読み込む.
import styles from './MyComponent.css'

class MyComponent extends Component {
  render() {

    // 「styles.h1」や「styles.a」でアクセスして、
    // CSSクラス名を取得します.
    return (
      <div>
        <h1 className={styles.h1}>Page MyComponent</h1>
        <Link to="/" className={styles.a}>Go to top.</Link>
      </div>
    );
  }
}

export default MyComponent

これでスコープの限定されたCSSを使うことができました。

最後に

ReactでCSSモジュールが使えるのは良いのですが、CSSクラス名を1つずつJSでアタッチしなければいけないあたりが、なかなか面倒だと感じました。 AngularやVueだと自動的にやってくれるので。この辺は勉強不足かもしれないので、もっともっとReactを学んでいけたらと思います。

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Python、Linux、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！