create-react-appを使って画面を開発する流れ

2019/08/08

create-react-appはfacebookが公開した、reactを使ったフロント画面開発のひな形を作ってくれるコマンドラインツールです。これで手動でreactのひな形を作る手間が大分削減されます。

reactの開発にはvscodeを使うのが主流のようですので、vscodeを使って画面を１つ作ってみました。

【参考】開発した画面

現在の住宅ローン金利と過去の推移グラフを表示してくれる画面を作ってみました。

https://mussyu1204.myhome.cx/fp/rate_chart/

1. create-react-appをインストール

まずnpmかyarnで「create-react-app」をインストールします。 ※Windowsにnpmを導入する方法はこちらの記事に書いています。

yarn install create-react-app

2. create-react-appコマンドでアプリのひな形を生成

create-react-appコマンドを使ってアプリのひな形を作ります。

create-react-app sample-app

これでひな形が生成されます。フォルダ構成は以下のようになります。

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

3. 開発用サーバを立ち上げる

生成したアプリフォルダに移動し、以下のコマンドを実行すると開発用のサーバが立ち上がり画面を表示できます。ソースの修正が入るとサーバにもすぐに再ビルドされるため、開発中は基本的に立ち上げて画面を確認しながらコードを修正できます。

yarn start

画面は以下のURLで開くことができます。

http://localhost:3000/

4. 本番サーバに公開するための手順

本番サーバに配置するためには以下のコマンドでビルドする必要があります。

yarn build

これで、生成したアプリフォルダにbuildフォルダが作られ、中にビルドされたアプリが出来上がります。build内のファイル群をサーバに配置してブラウザからindex.htmlにアクセスします。

注）このままindex.htmlを開いても静的コンテンツファイル(js, cssなど)のパスが合わず404となり白い画面となってしまいます。（対策は後述しています）

5. 【参考】その他Tips

5-1. ビルドしたindex.htmlを開いても白い画面になる

初期設定のままだと、jsやcssは/直下にパスが通っており、実際に配置する場所と違うと404エラーとなり白い画面となります。 ※ブラウザのコンソールにも「Failed to load resource: the server responded with a status of 404 (Not Found)」エラーが表示される

package.jsonに「”homepage”:”./”」を追加すると、index.htmlからの相対パスとなりエラーが解消されます。

{
  "name": "sample-app",
  "version": "0.1.0",
  "homepage": "./",

5-2. 環境差分の実装方法

通常アプリ開発を行っていると、ローカル環境とプロダクト環境でログ出力レベルなど変えたくなると思います。reactで環境差分を吸収するには「process.env.NODE_ENV」の中身を確認して条件分岐することで実現できます。

if (process.env.NODE_ENV === 'production') {
  // プロダクション(yarn build)
}
if (process.env.NODE_ENV === 'test') {
  // テスト(yarn test)
}
if (process.env.NODE_ENV === 'development') {
  // 開発(yarn start)
}

5-3. componentDidUpdateでsetStateを呼んではいけない

reactのコンポーネントのライフサイクル上、setStateを呼び出しコンポーネントの状態が変わると、再レンダリングが行われcomponentDidUpdateも呼び出されます。

これによりsetState -> componentDidUpdate ->setState ->componentDidUpdate・・・の無限ループとなるため以下のようなエラーとなります。

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

ぬまろぐ