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-componentsCSS 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-snapshotreact-snapが推されていますが、両方使った所感としては、圧倒的にreact-snapのほうが良かったです。

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

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

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

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


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

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

© 2018 kk-web