maesblog

コマンド一発でReactの開発環境を構築してくれるFacebook製ツール「create-react-app」

7月22日にcreate-react-appという画期的なツールがFacebookによりReactの公式ツールとして公開されました。このツールを使うとなんとコマンド一発でReactの開発環境ができあがるというものです。Reactの開発環境を構築するのは大変面倒なものがありますが、それを解決してくれるツールとなっています。自分も実際に使ってみましたが、すごく便利だと思いました。ということで、今回の記事では、このcreate-react-appについて紹介したいと思います。

Reactの開発環境構築

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

ざっと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をインストールします。

$ npm install -g create-react-app

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

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やらが見えない状態でインストールされていきます

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

$ cd my-react-app

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

$ npm start

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

create-react-app npm start

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

create-react-appのデフォルトアプリ

この状態で、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のデフォルトアプリ

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

create-react-appについて

一通り使い方の説明をしましたので、ここで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"
  }
}
package.json
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 startnpm run buildなどのcreate-react-appで用意されているコマンドも引き続き使えるようになっています。こちらもコピーされたreact-scriptsを参照するようになります。

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

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

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

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

  • Server rendering.
  • Testing.
  • Some experimental syntax extensions (e.g. decorators).
  • CSS Modules.
  • LESS or Sass.
  • Hot reloading of components.

GitHub Pagesにデプロイする

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

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

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

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

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)でまだ1週間ほどですが、すでにv0.2.0へとアップデートも行われ、GitHubのスター数も6,000を超えるまでになっています。上記で紹介した通り、create-react-appは容易に扱えるため、多くの方の心を掴んだことでしょう。Facebookの力の入れようもハンパないことが伺えます。

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

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

入門 React ―コンポーネントベースのWebフロントエンド開発 - オライリージャパン
  • 『入門 React ―コンポーネントベースのWebフロントエンド開発』
  • 著者: Frankie Bagnardi, Jonathan Beebe, Richard Feldman, Tom Hallett, Simon HØjberg, Karl Mikkelsen, 宮崎 空(翻訳)
  • 出版社: オライリージャパン
  • 発売日: 2015年4月3日
  • ISBN: 978-4873117195

関連記事

コメント

    • 必須

    コメント