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

2017/11/28

Pavels Jelisejevs

77

Articles in this issue reproduced from SitePoint
Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA CorporationJapanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

初めて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/awaitimport/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を通して実行します。

デプロイ

react-scriptsを使って、package.jsonにホームページ要素を追加するとGitHubにアプリケーションをデプロイできます。セパレートのHerokuビルドパックもあります。

削除

react-scriptsがプロジェクトに必要ないなら、npm run ejectを走らせて削除できます。webpackの設定とreact-scriptsのビルドスクリプトはプロジェクトにコピーされるので依存性はなくなります。そのあと、必要な設定を変更します。

最後に

新しいReactプロジェクトを始めるならCreate React Appで決まりです。webpackの設定を調整することなくアプリケーション開発がすぐに始められます。

本記事はJoan Yinが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。

(原文:Getting React Projects Ready Fast with Pre-configured Builds

[翻訳:前田類/編集:Livit

Copyright © 2017, Pavels Jelisejevs All Rights Reserved.

Pavels Jelisejevs

Pavels Jelisejevs

ラトビア、リガ出身のソフトウェア開発者で、Web全般に強い関心を持っています。興味の対象は、分析やオートメーションをはじめ、バックエンド・フロントエンド開発など多岐にわたる。FacebookまたはLinkedInでいつでも相談に応じています。

Loading...