目次

• Reactの開発環境構築
• create-react-appを使う
• create-react-appについて
• GitHub Pagesにデプロイする
• まとめ

Reactの開発環境構築

Reactの開発環境を構築することは当ブログでも以下の通り記事をアップしていますが、使う必要のあるツールがたくさんあり慣れてないとかなり大変です。

• Reactを「webpack + babel-loader」でビルドする方法 – maesblog
• Reactをnpmでビルドする方法 browserify (watchify) + babelify編 – maesblog

ざっとReactの開発に必要なものを挙げてみても、これだけあります。もちろんこれら以外にもまだあります。挙げたらキリがないくらいです。

これらのツールをReactのプロジェクトの度にインストールして、設定してとやるのは骨が折れます。ちょっとしたReactのコンポーネントを作って試したいという時も同様です。

今回紹介するcreate-react-appを使うと、これらのReact開発の度に発生する面倒な作業を一気に省略することができるようになるということです。自分も実際に使ってみましたが、とても便利です。コマンド一発で環境を構築してくれるのはもちろん、サーバーも立ち上げてくれるし、ライブリローディングにも対応しています。

create-react-appを使う

create-react-appを使うと、一瞬でReactの開発環境ができあがります。create-react-appに関する詳しいことは後半に述べるとして、まずは使い方から説明します。ちなみに、執筆時点でのバージョンはv0.2.0となっています。今後どんどんバージョンアップされていくことが予想されます。

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

以下のコマンドでグローバルにcreate-react-appをインストールします。

create-react-appをインストールするには、Node.js v4.x以上がインストールされている必要があります。Node.jsのインストール方法については当ブログの以下記事などをご参考にしてください。

• nodebrewを使ってMac OSX環境のNode.jsを管理する – maesblog

create-react-appを使ってアプリを作成する

create-react-appをグローバルにインストールしたら、create-react-appコマンドが使えるようになります。create-react-appコマンドの後にこれから作成する＜プロジェクトのディレクトリ名＞を指定して、コマンドを実行します。

$ create-react-app my-react-app

create-react-appコマンドを実行すると、指定したディレクトリ名のディレクトリが作られ、その中にBabelやらESLintやらwebpackやらReactやらが見えない状態でインストールされていきます。

作成されたプロジェクトのディレクトリに移動します。

以下のコマンドを実行してみましょう。

$ npm start

すると、サーバーが立ち上がります。

http://localhost:3000/にアクセスすると、以下のページが表示されます。

この状態で、srcディレクトリ内のApp.jsファイルをいじっていきます。保存するたびにブラウザ上の画面が更新されます。

同時に、書いたコードの構文チェックも行われ、ミスがあった場合はターミナル上に警告が表示されます。例えば、以下のようにimg要素の閉じ処理を悪れた場合は、以下のように警告が表示されます。

Failed to compile.

Error in ./src/App.js
Syntax error: /Users/maechabin/Sites/Project/my-react-app/src/App.js: Expected corresponding JSX closing tag for <img> (12:8)
  10 |           <img src={logo} className="App-logo" alt="logo">
  11 |           <h2>Welcome to React</h2>
> 12 |         </div>
     |         ^
  13 |         <p className="App-intro">
  14 |           To get started, edit <code>src/App.js</code> and save to reload.
  15 |         </p>
 @ ./src/index.js 11:11-27

製品版としてビルドする

製品版としてビルドする場合も簡単です。以下のコマンドを実行するだけです。

$ npm run build

新たに製品版用のbuildディレクトリが作られます。そしてプロダクション版としてバンドルされ、パフォーマンスを考慮して最適化され、圧縮された状態でファイルがそのbuildディレクトリ内に作られます。

製品版の確認をする場合は、コマンドラインのWebサーバーhttp-serverを使うと便利です。以下のコマンドを実行してサーバー環境を立ち上げてみてください。

$ cd build
$ npm install -g http-server
$ hs

http://localhost:8080にアクセスすると、以下のページが表示されます。

create-react-appの使い方は、ざっとこんな感じです。とても簡単にReactの開発ができてしまうことがわかると思います。

create-react-appについて

一通り使い方の説明をしましたので、ここでcreate-react-appについて軽く説明しておきます。詳細は、公式ブログやGitHubをお読んでご確認ください。

• Create Apps with No Configuration | React
• facebookincubator/create-react-app – GitHub

create-react-appの哲学

create-react-appは以下のような哲学に基づいています。

One Dependency

様々なツールが使えるようになっていますが、依存関係を気にする必要がないようになっています。package.jsonを見ると、devDependenciesとなっているのは、react-scriptsのみとなっています。

{
  "name": "hello-world",
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
  },
  "devDependencies": {
    "react-scripts": "0.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  }
}

Zero Configuration

コードを書くことに集中できるように、設定ファイルやコマンドラインのオプションもありません。create-react-appによって最初に用意されているディレクトリやファイルは以下の通りです。設定ファイルは含まれていません。

  README.md
  index.html
  favicon.ico
  node_modules/
  package.json
  src/
    App.css
    App.js
    index.css
    index.js
    logo.svg

No Lock-In

もちろん、いざという時のためにカスタムセットアップにも対応しています。自分で設定ファイルをいじりたくなったら、以下のコマンドを実行します。

$ npm run eject

このコマンドを実行すると元に戻せなくなるのでご注意ください。npm run ejectを実行すると、すべての設定ファイルと依存関係が現在のプロジェクトにコピーされるので、自由に設定ファイルをいじることができるようになります。npm startやnpm run buildなどのcreate-react-appで用意されているコマンドも引き続き使えるようになっています。こちらもコピーされたreact-scriptsを参照するようになります。

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

現在のバージョン（v0.2.0）では、以下のようなツールが内部で使われているようです。

create-react-appに含まれていないもの

以下は、現在のバージョン（v0.2.0）では、対応していないものです。今後対応されていくものもあるということです。

GitHub Pagesにデプロイする

最後にv0.2.0から追加されたGitHub Pagesへのデプロイ機能を紹介しておきます。詳細は以下をご参照ください。

• create-react-app/README.md at master · facebookincubator/create-react-app#Deploy to GitHub Pages

GitHub Pagesについては、当ブログの以下の記事などでご確認ください。

• GitHub Pagesの使い方や機能などをまとめてみた – maesblog

それではGitHub Pagesにデプロイする方法を紹介します。まず、package.jsonファイルを開き、homepageフィールドを追加し、GitHub Pagesのurlを記述します。

{
  "name": "my-react-app",
  "homepage": "http://myusername.github.io/my-react-app",
  // ...
}

npm run buildコマンドを実行した際は（製品版としてビルドした際は）、以下を毎回実行し、GitHub Pagesに最新版を反映させます。

$ git checkout -B gh-pages
$ git add -f build
$ git commit -am "Rebuild website"
$ git push origin :gh-pages
$ git subtree push --prefix build origin gh-pages
$ git checkout -

毎回、上記のコマンドを実行するのが面倒な場合は、カスタムシェルスクリプトとして登録しておいてもよいでしょう。

まとめ

7/22に公開され、現時点（7/30）でまだ１週間ほどですが、すでにv0.2.0へとアップデートも行われ、GitHubのスター数も6,000を超えるまでになっています。上記で紹介した通り、create-react-appは容易に扱えるため、多くの方の心を掴んだことでしょう。Facebookの力の入れようもハンパないことが伺えます。

create-react-appの登場で、React導入の障壁はだいぶ低くなったと思います。以下のような調査結果があるように、今Reactはかなり熱い技術の一つとなっています。今後ますますReactを使った案件が増えていくことでしょう。

• 2016年、ReactがAngularを抜いて1番人気に！ JSライブラリの利用意向はますます高まっている – Build Insider

まだ未対応な機能もありますが、今後随時対応されていくとのことなので、十分期待できるツールだと思います。というよりデファクトスタンダードになっていくんじゃないでしょうかね。本当に簡単にReactを試せるようになったので、これまで環境構築に難儀してReactに手を出してこなかった方も、Reactを始めるチャンスだと思っています。ぜひcreate-react-appを使ってReactにチェレンジてみてください！