React初心者が環境構築でつまづかないためのCreate React Appの始め方

2017年11月28日　18時55分更新

文●Pavels Jelisejevs

ツイートする

初めてReactに挑戦するとまずつまずくのは開発環境の設定です。Facrbookが提供しているCLIツール「Create React App」で簡単に始める方法を解説します。

Reactの新規プロジェクトを始めるには、コードを書いてアプリケーションを形にするだけではなく、ビルドツールでローカル開発環境を整え、ユニットテストをしたあと、最終的にビルドします。思っているほど簡単ではないと感じる方に、簡単なセットアップと最低限の努力で始められる方法を紹介します。

Facebookが提供しているCLIツールCreate React Appを使えば、新規のReactプロジェクトを設定済みの開発者向けwebpackを使って始められます。webpackの設定画面を二度と見なくて済むのです。

Create React Appの使い方

Create React Appはnpmを通してグローバル環境でインストールするスタンドアロンツールで、新規プロジェクトを作るたびに呼び出します。

npm install -g create-react-app

新規プロジェクト作成のために実行

create-react-app react-app

Create React Appは次のプロジェクトの構造でセットアップされます。

.
├── .gitignore
├── README.md
├── package.json
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

すべての設定とビルドスクリプトが含まれたreact-scriptsパッケージも追加されます。プロジェクトはcreate-react-appではなくreact-scriptsにのっとります。インストール後、プロジェクトを開始できます。

ローカル開発サーバーを準備する

ローカル開発環境を準備します。npm startを走らせるとwebpack開発サーバーが起動します。自動監視機能があるので、アプリケーションの変更は自動で検出されます。ホットリロードはスタイルにのみ対応します。

生成されるアプリケーションにはいくつかの特徴があります。

ES6とES7

アプリケーションはES6とES7に準拠するため、Babelプリセットであるbabel-preset-react-appを備えています。async/awaitやimport/exportなど新しい機能にも対応しています。デコレーターをはじめ一部の機能はあえて省略しています。

インポート

JSモジュールからCSSファイルをインポートできるので、モジュールに合わせたバンドルができます。画像やフォントも同様です。

ESLint

開発中はESLintでもコードを走らせられるので、コードの静的検証をして、開発段階のエラーを発見します。

環境変数

Node環境変数を使い、ビルドのタイミングで値を挿入できます。react-scriptsは自動的にREACT_APP_を通して環境変数を探し、グローバルなprocess.envで利用可能にします。この変数は.envファイルに入れられるので便利です。

REACT_APP_BACKEND=http://my-api.com
REACT_APP_BACKEND_USER=root

コード内から参照できるようになります。

fetch({process.env.REACT_APP_SECRET_CODE}/endpoint)

バックエンド用のプロキシ

アプリケーションをリモートバックエンドで動作させるには、プロキシのリクエストがローカル環境のCORSをバイパスできるように、package.jsonファイルにプロキシフィールドを追加します。

"proxy": "http://localhost:4000",

静的ファイルが指定されていないリクエストでも、サーバーはそのまま指定されたアドレスへ転送します。

ユニットテスト

npm testを実行するとJestを通してテストをして、監視機能を起動し、変更を加えた際に再実行します。

PASS  src/App.test.js
  ✓ renders without crashing (7ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.123s, estimated 1s
Ran all test suites.

Watch Usage
 › Press p to filter by a filename regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

JestはFacebookが開発したMochaやKarmaに変わるテスト環境です。実際のブラウザーの代わりにNode環境下でテストできますが、jsdomを使ったブラウザー特有のグローバル変数が必要です。

JestはVCSも統合されて、デフォルトでは最後に参照したファイルをテストします。詳しくは「生まれ変わったFacebook製テストフレームワーク「Jest」とは何か？」を参照してください。

製品バンドルを作る

最終的になにかをデプロイする場合、npm run buildを使って製品バンドルを作ります。アプリケーションに最適化されたビルドができ、環境に合わせたデプロイができるようになります。生成されたバンドルはビルドフォルダーにあります。

.
├── asset-manifest.json
├── favicon.ico
├── index.html
└── static
    ├── css
    │   ├── main.9a0fe4f1.css
    │   └── main.9a0fe4f1.css.map
    ├── js
    │   ├── main.3b7bfee7.js
    │   └── main.3b7bfee7.js.map
    └── media
        └── logo.5d5d9eef.svg

JavaScriptとCSSコードを軽量化します。クロスブラウザーでの互換性を高めるためにCSSはAutoprefixerを通して実行します。