React開発環境構築(create-react-app利用)

Kazuki Koide

December 10, 2018

Reactアプリの開発環境を一から構築するのは中々辛いものがある。たくさんモジュールを入れないといけないし、それらのモジュールの依存関係にも気を配らないといけない。ビルドやlintの設定を書くのも面倒。しかし今はcreate-react-appという便利なコマンドがあるようなので使ってみた。

公式ドキュメント

Create React App · Set up a modern web app by running one command.

アプリケーションの作成

$ yarn global add create-react-app
$ create-react-app my-app

yarn create v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Installed "create-react-app@2.1.1" with binaries:
      - create-react-app
[################################################################] 64/64
Creating a new React app in /Users/kazuki/Projects/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 6 new dependencies.
info Direct dependencies
├─ react-dom@16.6.3
├─ react-scripts@2.1.1
└─ react@16.6.3
info All dependencies
├─ babel-preset-react-app@6.1.0
├─ react-dev-utils@6.1.1
├─ react-dom@16.6.3
├─ react-error-overlay@5.1.0
├─ react-scripts@2.1.1
└─ react@16.6.3
✨  Done in 9.55s.

Initialized a git repository.

Success! Created my-app at /Users/kazuki/Projects/my-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

yarn create | Yarn

ちなみに、TypeScriptを使う場合は、

$ create-react-app my-app --typescript

と--typescriptをつければ良いらしい。

ファイル構成

my-app
├── .git
├── .gitignore
├── README.md
├── node_modules
├── package.json
├── public
|   ├── favicon.ico
|   ├── index.html
|   └── manifest.json
├── src
|   ├── App.css
|   ├── App.js
|   ├── App.test.js
|   ├── index.css
|   ├── index.js
|   ├── logo.svg
|   └── serviceWorker.js
└── yarn.lock

READMEやserviceWorker、manifest.jsonも生成してくれて、gitの初期化までしてくれる。至れり尽くせり。以下利用上の注意点。

package.json

Babelやwebpackのややこしいところがreact-scriptsで抽象化されている。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

create-react-appに含まれるもの

$ npm ls --depth=1
my-app@0.1.0
├── node-pre-gyp@0.10.3 extraneous
├─┬ react@16.6.3
│ ├── loose-envify@1.4.0
│ ├── object-assign@4.1.1
│ ├── prop-types@15.6.2
│ └── scheduler@0.11.3
├─┬ react-dom@16.6.3
│ ├── loose-envify@1.4.0 deduped
│ ├── object-assign@4.1.1 deduped
│ ├── prop-types@15.6.2 deduped
│ └── scheduler@0.11.3 deduped
└─┬ react-scripts@2.1.1
  ├── @babel/core@7.1.0
  ├── @svgr/webpack@2.4.1
  ├── babel-core@7.0.0-bridge.0
  ├── babel-eslint@9.0.0
  ├── babel-jest@23.6.0
  ├── babel-loader@8.0.4
  ├── babel-plugin-named-asset-import@0.2.3
  ├── babel-preset-react-app@6.1.0
  ├── bfj@6.1.1
  ├── case-sensitive-paths-webpack-plugin@2.1.2
  ├── chalk@2.4.1
  ├── css-loader@1.0.0
  ├── dotenv@6.0.0
  ├── dotenv-expand@4.2.0
  ├── eslint@5.6.0
  ├── eslint-config-react-app@3.0.5
  ├── eslint-loader@2.1.1
  ├── eslint-plugin-flowtype@2.50.1
  ├── eslint-plugin-import@2.14.0
  ├── eslint-plugin-jsx-a11y@6.1.2
  ├── eslint-plugin-react@7.11.1
  ├── file-loader@2.0.0
  ├── fork-ts-checker-webpack-plugin-alt@0.4.14
  ├── fs-extra@7.0.0
  ├── fsevents@1.2.4
  ├── html-webpack-plugin@4.0.0-alpha.2
  ├── identity-obj-proxy@3.0.0
  ├── jest@23.6.0
  ├── jest-pnp-resolver@1.0.1
  ├── jest-resolve@23.6.0
  ├── mini-css-extract-plugin@0.4.3
  ├── optimize-css-assets-webpack-plugin@5.0.1
  ├── pnp-webpack-plugin@1.1.0
  ├── postcss-flexbugs-fixes@4.1.0
  ├── postcss-loader@3.0.0
  ├── postcss-preset-env@6.0.6
  ├── postcss-safe-parser@4.0.1
  ├── react-app-polyfill@0.1.3
  ├── react-dev-utils@6.1.1
  ├── resolve@1.8.1
  ├── sass-loader@7.1.0
  ├── style-loader@0.23.0
  ├── terser-webpack-plugin@1.1.0
  ├── url-loader@1.1.1
  ├── webpack@4.19.1
  ├── webpack-dev-server@3.1.9
  ├── webpack-manifest-plugin@2.0.4
  └── workbox-webpack-plugin@3.6.3

だいたい必要なやつは入っている。PrettireやCSS in JSは標準では入っていないようなので、使いたい場合は自分で入れる必要がある。

Lint、Prettire

.eslintrcや.prettierrcを書くのはとてもダルいので、Standard Style専用のモジュールを入れてしまう。

yarn add -D standard prettier-standard

Macで開発する場合、標準で入っているtidyのバージョンが古く、HTML5に対応していないので、tidy-html5を入れておくと良い。

$ brew install tidy-html5

Vimの設定

以下の設定にすると、保存時に自動的に修正されるようになる。楽チン。

let g:ale_fixers = {'javascript': ['prettier_standard']}
let g:ale_fix_on_save = 1

Atom

以下２つのプラグインを入れればOK

VSCode

StandardJS プラグインを入れればOK

まとめ

思ったより使いやすくて気に入った。webpack.config.jsを書かなくて済むのは大変良い。facebookのオフィシャルツールなので安心感がある。同じようなコンセプトのモジュールにParcelというものもあるので、React以外の場合は使ってみると良いかもしれない。