create-react-app を使うときのコツ

2020-03-20

React を使ってサイトを作るとき、環境開発でまっさきに選択肢に挙がるcreate-react-appですが、意外と細かい日本語の詳細ってまとまってないんですよね。

自分は最近サイトを作るとき、ssr が求められない場合は 10 割これを使っています。

で、create-react-appを使うときのコツをいくつか見つけましたので、書いていこうと思います。

`create-react-app`の公式ドキュメントがある

日本では意外と知られていないのですが、いつの間にか公式サイトが作られていました。

Create React App

これをすべて読むともうほとんど問題ないです。

わかりやすく書いてあるので、しょっちゅうお世話になります。

TypeScript で環境を作りたい場合（公式ドキュメント）

npx create-react-app my-app --template typescript

簡単ですね。

yarn でなく npm で環境を作りたい場合（公式ドキュメント）

npx create-react-app my-app --use-npm

これも簡単ですね。

yarnは Facebook 製なのでデフォルトで使われるのはわかるんですが、自分はnpm派だったりします。

GitHub に買収されましたし、yarnもいまいち勢いがないので、今後はまたnpmに戻っていくのかなーと勝手に予想しています。

フォルダを作らず、カレントディレクトリにおいて環境を作りたい場合

npx create-react-app .

公式ドキュメントに書かれていないのが謎です、むっちゃ便利。

先にリポジトリを作成したケースなどでは有効です。

Stack Overflowには書かれているのですが、裏技に近いのかな？

step 実行などを試したい場合（公式ドキュメント）

詳細は公式ドキュメントを参照してください。

あんまり使わないですよね。

自動的にコードフォーマットをかけたい場合（公式ドキュメント）

これも省略します。

あんまり使わないですが、husky は超有能なので紹介をば。

Storybook を導入する場合（公式ドキュメント）

npx -p @storybook/cli sb init

きちんと言及してくれてるのがありがたい…。

出力ファイルのファイル容量を確認したい場合（公式ドキュメント）

npm install --save source-map-explorer

"analyze": "source-map-explorer 'build/static/js/*.js'"

意外と見落としがちな印象です。

スタイリングをする場合（公式ドキュメント）

create-react-appはパッケージ追加しなくても CSS Modules に対応しているのがまじで神です。

React でスタイリングとなると、styled-componentsとCSS Modulesの二強状態ですが、個人的にはCSS Modulesのほうが好きなので本当に神仕様です。

やり方としては、CSS のファイル名を○○.module.cssとしてやるだけで勝手にCSS Modulesが使われます、、まじでめっちゃ簡単。

ただ、素の CSS で書く人はほとんどいないと思いますが、そこはきちんと Sass 対応してあります。

Sass に対応する手順に沿った後に、ファイル名を○○.module.scssとするだけです、死ぬほど簡単ですね。

`babel-plugin-react-css-modules` を導入する方法

CSS Modulesの対応は簡単なのですが、babel-plugin-react-css-modulesとなると少し設定が必要になります。

1 babel-plugin-react-css-modulesをインストールします

2 型をつける場合は@types/react-css-modulesをインストールします

3 scss に対応する場合はpostcss-scssをインストールします

4 babel の設定に、以下を追加します（以下は scss 用なので、良しなに）

"babel": {
  "plugins": [
    [
      "react-css-modules",
      {
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        }
      }
    ]
  ]
}

5 webpack.config.jsにおいてmodules: {あたりで検索すると、CSS と Sass 用の CSS Modules の設定が引っかかるので、以下のように修正します

{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        // getLocalIdent: getCSSModuleLocalIdent
        localIdentName: "[path]___[name]__[local]___[hash:base64:5]"
      }
    },
    "sass-loader"
  )
}

自分は普段 TypeScript かつ scss 用の設定しか使わないので、素の CSS や sass で行いたい場合は適宜お願いします。

ちなみに以前試したところ、自分の環境では sass に対応することができませんでした…もしかしたら直っているかもですが…。

あと、5 はもっと良い設定方法があるかも…誰か教えて！

余談ですが、vscode にbabel-plugin-react-css-modules-autocompleteを追加すると幸せになれます。

開発者は日本人の方みたいです…すごい！神！

絶対パスで import する方法（公式ドキュメント）

jsconfig.jsonまたはtsconfig.jsonに以下の設定を追加します。

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

これも必須ですね。

環境変数を読み込む（公式ドキュメント）

環境変数のキーにREACT_APP_という prefix をつければ OK です。

意外と見落としがち。

環境変数を実行環境によって使い分ける（公式ドキュメント）

以下のように対応しています。

npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env

PWA に対応する（公式ドキュメント）

これは言わずもがな。

api の向く先を替える場合（公式ドキュメント）

省略しますが、簡単です。

ただ、ts ファイルでは切れないみたいです、そこだけ不満。

あと、http-proxy-middlewareのバージョンが古いので、公式ドキュメント通りに書いてもエラーを吐くので注意！

ステージング環境用の環境変数を切りたい場合（公式ドキュメント）

env-cmdで対応するみたいです、詳細は公式ドキュメントにて。

buildスクリプトはそのままで、スクリプトを叩く際に環境変数を切り替えて各環境に対応した build を行うようです。

GitHub Pages に公開したい場合（公式ドキュメント）

省略します。

GitHub Pages ってちょっとクセがあるので、ドキュメントにまとめてあると助かります。

プリレンダリングしたい場合（公式ドキュメント）

これまた見落とされがちなプリレンダリングですが、CSR なら必須です。

公式ではreact-snapshotとreact-snapが推されていますが、両方使った所感としては、圧倒的にreact-snapのほうが良かったです。

react-snapの READMEにがっつりcreate-react-appへの対応方法が書いてあるのが良いですね。

Firefox/Chrome で動作確認したい（公式ドキュメント）

自分は普段 Firefox を使っているのですが、開発中のサイトの確認は Chrome でやることが多いです。

そのときに、準備されている環境変数を使うとちょっと楽できます。

ほぼ公式ドキュメントのコピペですが、めっちゃ疲れました。

他にも GraphQL の対応方法や CSS Reset の導入方法など、かなり多岐に渡って情報があるので、ぜひ一度読み通してみてください。