Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する

  • 586
    Like
  • 0
    Comment

新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。

:hash: React.jsのひな形を簡単に作れるcreate-react-appが公開されました (2016/07/22)

Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、create-react-appを公開しました。

React.jsで「本格的な」アプリを作る際はWebpackやBabelなどの設定をいじる必要があり、導入障壁が高かったのですが、create-react-appを使えばそれらのステップをすっ飛ばせます。さっそく使ってみましょう。

:hash: 導入方法

:hash::hash: create-react-appコマンドをインストールする

注: Node.js (version 4以上)がインストールされている必要があります。

npm install -g create-react-app

:hash::hash: create-react-appコマンドでアプリを作成する

以下のコマンドを実行すると、新しくhello-worldディレクトリが作られ、React.jsアプリに必要なファイルがコピーされます。このときにnpm installが実行され依存パッケージが全てインストールされるため、少々時間がかかります。

create-react-app hello-world

created-folder.png

:hash::hash: サーバーを開始する

hello-worldディレクトリに行き、

npm start

を実行するとサーバーが起動し、http://localhost:3000を開けばアプリを見ることができます。

screenshot 2016-07-22 at 3.22.40 PM.png

:hash::hash: ファイルを触ってみる

試しにファイルを編集してみましょう。srcディレクトリの中にあるApp.jsを開き、Welcome to Reactという文字をReactへようこそに変えて保存します。

Pasted_Image_7_22_16__3_25_PM.png

そしてブラウザを更新すると、変更が反映されていました。

screenshot 2016-07-22 at 3.25.33 PM.png

:hash::hash: 構文チェックもしてくれます

かりに間違って、logoではなくlogとタイポしてしまったとします。

Pasted_Image_7_22_16__3_37_PM.png

すると、npm startを実行したターミナル画面で警告が表示されます。

Pasted_Image_7_22_16__3_38_PM.png

構文チェックのために、裏側でeslint-loaderが使われているようです。ただ、「Reactでバグが起こりやすい間違い」コードだけが構文チェックの対象になっており、「こういう書き方をしなければいけない」という所謂opinionatedなチェックはあまりないようです。

:hash::hash: package.jsonの依存もシンプル

依存するパッケージがreactreact-domreact-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"
  }
}

:hash::hash: 公開用のファイルを出力する

作ったアプリを公開するにはどうすれば良いのか?まず、

npm run build

を実行します。すると、buildディレクトリにindex.htmlとCSS、JS、ソースマップファイルが保存されます。これらを静的ファイルを返してくれるサーバーに配置すればOKです。GitHub Pagesにデプロイするのが一番簡単かもしれません。

ちなみに、buildディレクトリの中のindex.htmlファイルを直接開いても何も表示されませんので、ローカルで静的ファイルサーバーを立ち上げる必要があります。buildディレクトリで以下のコマンドを実行してみてください。

cd build # buildディレクトリに移動
npm install -g http-server
hs
open http://localhost:8080

:hash: 裏では何が使われているの?WebpackやBabelのカスタマイズは?

READMEによると、裏側では以下のツールが使われているようです(公開当時)。

:hash::hash: (公開時点で)入ってないもの

  • サーバーサイドレンダリング
  • テスト用のスクリプト
  • ES7が使えるようになるBabelの設定
  • LESS, Sass, CSS Modules
  • ホットリロード

:hash::hash: カスタマイズするには

裏側で使われているWebpackやBabelの設定をカスタマイズしたい場合、

# 注意: これをやると元に戻せません。

npm run eject

を実効すると、configscriptsディレクトリにBabelやWebpackの設定ファイルが書き込まれます。(注意: 一度これをやると元に戻せませんので、どうしてもカスタマイズが必要なときだけに実行しましょう。)

├── config
│   ├── babel.dev.js
│   ├── babel.prod.js
│   ├── eslint.js
│   ├── flow
│   ├── webpack.config.dev.js
│   └── webpack.config.prod.js
├── ...
├── package.json
├── scripts
│   ├── build.js
│   ├── openChrome.applescript
│   └── start.js

また、package.jsonも、いままではreact-scriptsだけに依存していましたが、それが裏側で使われているnpmパッケージに置き換えられます。

:hash: どうしてcreate-react-appが作られたの? (公式ブログより意訳)

screenshot_2016-07-22_at_3_11_33_PM.png

箇条書きで書くと、

  • 今までのフロントエンドフレームワークは生のJSで書いても問題なかったが、ReactはJSXやES6(ES2015)を使うことが推奨される
  • JSXやES6を使うにはBabelやWebpack、ESLintなどのツールが必要不可欠なので、学習コストが増加した。どのパッケージを入れればいいか悩んだり、依存管理が面倒になるなど、「Reactを使うことによるJS疲れ (JavaScript Fatigue)」が問題になる。参考記事: フロントエンドへの複雑化について、一つの視点。Reactのスターターキットも乱立し、「どうやってReactのプロジェクトを始めればいいか分からない」という開発者が続出。
  • React.js開発元のFacebookは、いままで「Facebook内で使われているReact周りのツールやライブラリ」しかリリースしてこなかった。Facebook社内では既にReactの設定周りが構築されていたため、「Reactを使いはじめるコストが高い」という問題にFacebookは積極的に取り組んでこなかった。
  • しかし、最近になってFacebookもそのスタンスを少し改めるようになったらしく(参考リンク)、Facebook内では必要とされてなくてもコミュニティーで必要とされているツールもリリースするようになったらしい。create-react-appはその一つだそう。

けっきょく、create-react-appはリリース後数時間で1500スターを突破しました。ぼくが投げたPRも一瞬でマージされました。感謝です。

screenshot 2016-07-22 at 5.40.53 PM.png

:hash: ありがとうございました

リツイートしてくださると嬉しいです。

開発者のAbramov氏にもリツイートされました。

screenshot 2016-07-22 at 5.50.13 PM.png