7月22日にcreate-react-appという画期的なツールがFacebookによりReactの公式ツールとして公開されました。このツールを使うとなんとコマンド一発でReactの開発環境ができあがるというものです。Reactの開発環境を構築するのは大変面倒なものがありますが、それを解決してくれるツールとなっています。自分も実際に使ってみましたが、すごく便利だと思いました。ということで、今回の記事では、このcreate-react-appについて紹介したいと思います。
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のインストール方法については当ブログの以下記事などをご参考にしてください。
create-react-appを使ってアプリを作成する
create-react-appをグローバルにインストールしたら、create-react-appコマンドが使えるようになります。create-react-appコマンドの後にこれから作成する<プロジェクトのディレクトリ名>を指定して、コマンドを実行します。
create-react-appコマンドを実行すると、指定したディレクトリ名のディレクトリが作られ、その中にBabelやらESLintやらwebpackやらReactやらが見えない状態でインストールされていきます。
作成されたプロジェクトのディレクトリに移動します。
以下のコマンドを実行してみましょう。
すると、サーバーが立ち上がります。
http://localhost:3000/にアクセスすると、以下のページが表示されます。
この状態で、srcディレクトリ内のApp.jsファイルをいじっていきます。保存するたびにブラウザ上の画面が更新されます。
同時に、書いたコードの構文チェックも行われ、ミスがあった場合はターミナル上に警告が表示されます。例えば、以下のようにimg要素の閉じ処理を悪れた場合は、以下のように警告が表示されます。
製品版としてビルドする
製品版としてビルドする場合も簡単です。以下のコマンドを実行するだけです。
新たに製品版用のbuildディレクトリが作られます。そしてプロダクション版としてバンドルされ、パフォーマンスを考慮して最適化され、圧縮された状態でファイルがそのbuildディレクトリ内に作られます。
製品版の確認をする場合は、コマンドラインのWebサーバーhttp-serverを使うと便利です。以下のコマンドを実行してサーバー環境を立ち上げてみてください。
http://localhost:8080にアクセスすると、以下のページが表示されます。
create-react-appの使い方は、ざっとこんな感じです。とても簡単にReactの開発ができてしまうことがわかると思います。
create-react-appについて
一通り使い方の説明をしましたので、ここでcreate-react-appについて軽く説明しておきます。詳細は、公式ブログやGitHubをお読んでご確認ください。
create-react-appの哲学
create-react-appは以下のような哲学に基づいています。
- One Dependency
様々なツールが使えるようになっていますが、依存関係を気にする必要がないようになっています。package.jsonを見ると、devDependenciesとなっているのは、react-scriptsのみとなっています。
- Zero Configuration
コードを書くことに集中できるように、設定ファイルやコマンドラインのオプションもありません。create-react-appによって最初に用意されているディレクトリやファイルは以下の通りです。設定ファイルは含まれていません。
- No Lock-In
もちろん、いざという時のためにカスタムセットアップにも対応しています。自分で設定ファイルをいじりたくなったら、以下のコマンドを実行します。
このコマンドを実行すると元に戻せなくなるのでご注意ください。npm run ejectを実行すると、すべての設定ファイルと依存関係が現在のプロジェクトにコピーされるので、自由に設定ファイルをいじることができるようになります。npm startやnpm run buildなどのcreate-react-appで用意されているコマンドも引き続き使えるようになっています。こちらもコピーされたreact-scriptsを参照するようになります。
create-react-appに含まれているもの
現在のバージョン(v0.2.0)では、以下のようなツールが内部で使われているようです。
- webpack with webpack-dev-server, html-webpack-plugin and style-loader
- Babel with ES6 and extensions used by Facebook (JSX, object spread, class properties)
- Autoprefixer
- ESLint
- and more.
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を記述します。
npm run buildコマンドを実行した際は(製品版としてビルドした際は)、以下を毎回実行し、GitHub Pagesに最新版を反映させます。
毎回、上記のコマンドを実行するのが面倒な場合は、カスタムシェルスクリプトとして登録しておいてもよいでしょう。
まとめ
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にチェレンジてみてください!
コメント