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言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。