はじめてのReact #19「開発環境を準備する」create-react-app編

ここまでご紹介してきたサンプルは学習やちょっとした検証には使えるのですが、実際に本番環境で動かすのには向いていません。というわけで今回は本番環境で動かすコードを作成するための開発環境を準備してみたいと思います。

Reactの開発環境

Node.jsのインストール

まず最初にNode.jsを入れる必要があるのですが、アップデートに対応しやすくするためバージョン切り替えが手軽に行えるツールをインストールした上でNode.jsの最新版を入れます。

MacやLinuxならnodebrew

Node.jsのバージョンをnodebrewで切り替える

https://blog.katsubemakito.net/nodejs/switch_version_with_nodebrew

インストールされたNode.jsのバージョンを切り替えたくなるタイミングがありますよね。バージョンアップの際はもとより特定バージョン下での挙動を確認したいとき、バージョンを上げたがうまく動かなくなってしまったので切り戻しを行いたい時などです。実現するためのツールはいくつかあるのですが今回は「nodebrew」をmacOSに入れてみます。nodebrewのインストールbrewで一発です。$ brew install nodebrew$ nodebrew --versionnodebrew 0.9.8setupを実行しディレクトリを作成した後に、作成されたディレクトリにパスを通します。こ...

ねこの足跡R

Windowsならnodist

nodistでNode.jsをバージョン管理 - Qiita

https://qiita.com/satoyan419/items/56e0b5f35912b9374305

※この記事はWindowsを前提として書かれています。※Macの場合は、「(http://qiita.com/satoyan419/items/693a84e26a8ad2f0e2...

Qiita

今回は以下のバージョンで構築を開始します。npmはNodejs用のパッケージマネージャーで、これを使って様々な便利ライブラリやツールをインストールすることができます。

$ node --version
v11.7.0
$ npm --version
6.5.0

create-react-appのインストール

Reactの開発環境をゼロから作ろうとすると中々に面倒なのですが、コマンド一発で必要な物を一式揃えてくれる便利ツールがfacebookより公式に提供されているので今回はこちらを利用してみます。

facebook/create-react-app

https://github.com/facebook/create-react-app

Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.

GitHub

では先ほどインストールしたnpmコマンドを利用してこのcreate-react-appを入れます。npmを利用するとコマンド一発で入ります。

$ npm install -g create-react-app

今回は以下のバージョンが入りました。

$ create-react-app --version
2.1.3

開発サイクル

プロジェクトの作成

create-react-appに続きプロジェクト名を入力すると、プロジェクト名のフォルダが作成されその中に必要なファイルがガンガン生成されます。このコマンドの実行は数分かかりますので気長に待ちます。

$ create-react-app hello

実行が完了すると以下のようなファイルが生成されます。

隠しファイルになっているのでls -aコマンドなどを打たないと最初は気が付かないのですが、すでにGitのローカルリポジトリとなっており.gitignoreファイルも準備されています。気が利きますな！

$ ls -la hello
 total 1352
 drwxr-xr-x    10 katsube  staff     320  1 23 01:29 ./
 drwx------+   33 katsube  staff    1056  1 23 01:27 ../
 drwxr-xr-x    13 katsube  staff     416  1 23 01:29 .git/
 -rwxr-xr-x     1 katsube  staff     310 10 26  1985 .gitignore*
 -rwxr-xr-x     1 katsube  staff    2881 10 26  1985 README.md*
 drwxr-xr-x  1018 katsube  staff   32576  1 23 01:29 node_modules/
 -rw-r--r--     1 katsube  staff  676454  1 23 01:29 package-lock.json
 -rw-r--r--     1 katsube  staff     478  1 23 01:29 package.json
 drwxr-xr-x     5 katsube  staff     160  1 23 01:29 public/
 drwxr-xr-x     9 katsube  staff     288  1 23 01:29 src/

node_modulesディレクトリをのぞくと、ReactはもちろんBabelやESLintにWebpackなどが入ったことがわかります。
これでひとまず準備が概ね終わりました。あっという間でしたねｗ

それぞれのディレクトリやファイルの役割は以下の通り。

src/

開発で利用しているJavaScriptやCSSを置きます。基本的にこの中で開発を行っていきます。

public/

JavaScriptなどから直接利用しない画像やHTMLなどを置きます

node_modules/

インストールした外部のNode.js用のモジュールが入っています

package.json, package-lock.json

プロジェクトの設定ファイル

README.md

このプロジェクトの簡単な説明などを記述しておきます。

.gitignore

Gitに登録したくないファイルがあればここに記述します。

.git/

Gitのリポジトリを管理しているフォルダ。用がない限り触りません。

実行してみる

雛形が作成された際にも表示されているので気が付かれた方も多いと思いますが、現在のプロジェクトの実行はコマンド一発です。カレントディレクトリを移動し、npm startと打つだけです。

$ cd hello
$ npm start

するとビルドが開始され、ローカルで開発用HTTPサーバが起動、最終的にブラウザが起動しHTTPサーバへ自動的にアクセスされます。ビルドからサーバ起動にちょっとだけ時間がかかるので口笛でも吹きながら待ちます。

以下のような画面が表示されれば成功です。

ここで適当なテキストエディタでsrc/App.jsを開いてみましょう。これまで取り上げてきたコードと冒頭のimport部分が異なるだけであとはほぼ同じですね。

試しにLearn Reactの部分を適当な文字列に変更してみます。ここではLearnをEnjoyに変えました。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Enjoy! React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

src/App.jsを保存した瞬間に（実際には多少ラグはありますが）、ブラウザの表示が自動的に切り替わります。便利ですね！デュアルディスプレイにしておけば開発が捗るというものです。

注意点としては、Terminalにも表示されている通り、現時点では開発用にプレビューしているだけで、本番用のファイルはまだ出来上がっていません。

Note that the development build is not optimized.
To create a production build, use npm run build.

開発用HTTPサーバはいったんCtrl+Cなどで停止しておきます。

テストコードを動かす

Facebook製のテストツールJestがデフォルトだと入っていますので、通常はこいつでユニットテストを行います。

TDDでの開発スタイルを前提として設定がされているらしく、常時バックエンドでJestが動き続けており、src配下のファイルを更新すると自動でユニットテストが動作するwatchモードで起動します。Jest用のTerminalウィンドウかタブを新たに開いてそこで動かすのが良さそうですね。自分のタイミングで行うこともできますのでご安心を。

コマンド一発で起動します。

$ npm test

Jestが起動すると以下のような選択を求めてきますので、いずれかのキーを押します。

今回は試しにaキーを押してみます。するとプロジェクト内のファイルからテスト用ファイルが検索され実行されます。今回はsrc/App.test.jsのみが該当しますので、このファイルのテストが実行されます。

すべてのテストが通れば以下のような表示になります。

ここでsrc/App.jsを更新すると自動的にテストが実行されます。上のTerminalでtouchコマンドを実行しファイルの更新日を現在の物にすると同時に、下のTerminalでJestが実行されているのがわかります。

実際に実行するとわかるのですが、Jestは全部入りの重量級のツールなので起動が非常に遅く、毎回立ち上げるのはかなりストレスです。watchモードで裏側で起動しておくか、commit/pushと同時にJenkinsなどで自動的にテストするのがおすすめです。

本番用のファイルを作成する

では本番用のファイルをビルドしてみましょう。これもコマンド一発です。

$ npm run build

最終的に以下のようにCompiled successfully.とメッセージが表示されれば成功です。

Creating an optimized production build…
Compiled successfully.

プロジェクト内に新たにbuildというフォルダが生成されているのでのぞいてみます。ここにあるファイルが本番用に最適化されたファイル郡になります。アプリが仕上がった段階でこいつをWebサーバなどにアップして公開することになります。

本番用のファイルをローカルで確認する

とはいえ、いきなり何の確認もなしにアップするのは恐ろしいので、まずは自分自身の環境で動作確認をしたいところなので、簡易的なWebサーバをインストールして動かしてみます。

Node.js製のserveコマンドをインストールします。今回は10.1.1が入りました。

$ npm install -g serve

$ serve --version
10.1.1

このserveコマンドに、先ほどbuildしたファイルがあるフォルダをオプションで渡してやります。

$ serve -s build

最後にTerminalで指定された通りlocalhost:5000にブラウザからアクセスすれば確認を行うことができます。

確認して問題なければ、Gitでコミットなどを行ったり、サーバにデプロイするなどすることになります。

Gitへpushする

GitHubなどのリモートリポジトリへpushしたい場合、最初の一回だけどこに送信するのかremoteの設定を行う必要があります。

今回はGitHubにhelloとう名前のリポジトリを作成しました。この下の方にあるコマンドを打ってやります。

言わずもがなですが2行目のgit pushした時点で実際にpushされます。

$ git remote add origin git@github.com:katsube/hello.git
$ git push -u origin master

念の為に以下のコマンドで登録状況を確認しておきます。

$ git remote -v
origin  git@github.com:katsube/hello.git (fetch)
origin  git@github.com:katsube/hello.git (push)

これ以降は普通にcommit/push/pullなどしてやることができます。

その他

build時に相対パスで出力したい

npm run buildすると通常は絶対パスでCSSやJavaScriptが呼び出されるHTMLが出力されます。これを相対パスに変更したい場合は、package.jsonにhomepageという項目を追加してあげます。

package.jsonを適当なエディタで開きどこでも良いので追加します。ここでは一番下に記述しました。

{
  "name": "picbook",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8"
  },
  "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"
  ],
 "homepage": "./"
}

これで、以下のように相対パスにすることができました。

<script src="./static/js/2.9aeef01b.chunk.js"></script>

もちろん./foo/などとディレクトリも指定すれば以下のようにパスも書き換わってくれます。

<script src="./foo/static/js/2.9aeef01b.chunk.js"></script>

TypeScriptで雛形を作成

プロジェクト名の後ろに--typescriptオプションをつけてあげればTypeScriptで雛形が作成されます。

$ create-react-app hellots --typescript

ご覧の通りです。

実行するコマンドはこれまでと同じです。

• npm startでブラウザで確認、
• npm testでユニットテスト、
• npm run buildで本番用のファイルを作成

TypeScriptのオプションを付けない場合は、トランスパイラにBabelが利用されます。お好みのトランスパイラで開発が行えます。

裏側で動いているファイルを出現

create-react-appで作成した雛形には、必要最小限のファイルしか表には出てきません。初心者に優しくといった心遣いだと思うのですが、ある程度慣れてきたりcreate-react-appが死んで他のツールに移りたい場合など諸々カスタマイズがしたくなってくると思います。そんなときはコマンド一発で各種ファイルを出現させることができます。

$ npm run eject

途中で確認を求められたらYesと入力。

? Are you sure you want to eject? This action is permanent. Yes

すると新たにconfigディレクトリが作成され、その中に設定ファイルが生成されています。またscriptsディレクトリにはこれまでnpmコマンド経由で実行していたスクリプトも出現していますね。

$ ls
README.md*         config/            package-lock.json  public/            src/
build/             node_modules/      package.json       scripts/

$ ls config
env.js                      paths.js                    webpackDevServer.config.js
jest/                       webpack.config.js

Webpackなどの知識は必要になりますが、万が一の場合はこのコマンドを利用して脱出やカスタマイズを行うことになります。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -