Create React AppでReactアプリを開発する

f0364156_20551775.png
はじめまして。今年の3月に入社したブロードバンドチームの宮西です。普段はISP・MVNOに関するお仕事をしています。今月リリースしたエキサイトモバイル、これで格安SIMを買ってポ○モンを捕まえにいきましょう。

露骨なダイレクトマーケティング(?)も済んだので本題に入ります。

今年はReact元年と言われるほどReactが注目されているみたいです。来年になるとどうなるかわかりませんが、とりあえずビッグウェーブに乗っておいても損はないかと思います。

そんなReactですが、開発環境を構築するとなるとWebpackBabelなどのツールが必要になってくるので、若干敷居が高いのかなあというのが現状です。

そんな折、Create React Appという、開発環境設定をせずともカンタンにReactアプリを開発できるライブラリが公式からリリースされました。公開から数時間でGitHubのスター数は1000を超えるほどの勢いになっているようです。そんなCreate React Appの使い方について書いていきます。

なお、npmでインストールするので、事前にnvmでNode.jsをインストールしておく必要があります。

インストール

npm install -g create-react-app
Nodeのバージョンは4以上が必須です。推奨はNode >= 6、npm >= 3みたいです。

アプリの作成

create-react-app hello-excite

...

Success! Created hello-excite at /var/home/miyanishi/excite/hello-excite.

Inside that directory, you can run several commands:
* npm start: Starts the development server.
* npm run build: Bundles the app into static files for production.
* npm run eject: Removes this tool. If you do this, you can’t go back!

We suggest that you begin by typing:
cd /var/home/miyanishi/excite/hello-excite
npm start

Happy hacking!
これで終わりです、とてもカンタンですね。あとは事前に用意されているスクリプトを実行するだけです。

ディレクトリ構成

hello-excite/
README.md
index.html
favicon.ico
node_modules/
package.json
src/
App.css
App.js
index.css
index.js
logo.svg
以下のファイルはビルド時に必須なので、リネームや削除はしないようにしましょう。
  • index.html:メインのテンプレート(Virtual-DOMの書き出し先)
  • favicon.ico:いわゆる普通のfavicon
  • src/index.js:JSのエントリーポイント

デフォルトスクリプト

標準で用意されているスクリプトは3つです。

npm start

webpack-dev-serverを使ったローカルサーバが起動します。ポートは3000になっているので、http://localhost:3000 といった感じでブラウザからアクセスすると画面の確認ができます。webpack-dev-serverはファイル変更検知でブラウザも自動リロードしてくれるので、開発中の確認はこれがベストですね。
f0364156_01090869.png
ビルドエラーのときは自動でエラー内容がコンソール出力されます。
f0364156_00372700.png
またESLintによる検証もおこなっていて、同じようにエラーがあると出力してくれます。

npm run build

実行すると、プロジェクトディレクトリにbuildディレクトリが生成され、その中にバンドル済ファイルが作られます。なので、Apache等が動くWebサーバへはこれをデプロイすることになります。バンドルファイルはwebpack.optimize.UglifyJsPluginを使ったminify等の最適化がおこなわれているようです。

npm run eject

上記2つのスクリプトは、create-react-app標準のWebpack設定などですが、これらを変更したいときに叩くスクリプトです。Webpack、Babel、ESLint等のコンフィグがプロジェクトディレクトリに作られるので、各環境独自のものに変更することが可能になっています。が、このスクリプトは1度実行すると戻せなくなるので注意が必要です。

開発について

ES6

あとは普通にReactで開発していくだけです。が、サンプルはES6で書かれていて、babel-preset-es2015とbabel-preset-es2016が標準セットされていますので、やはりここはES6で書いていくのがベターです。保守性や可読性を考えると、今後はどんどんES6以降の言語仕様で開発していったほうがいいと思います。

CSSポストプロセッサー

CSSもJS同様にminifiしてくれて、尚且つAutoprefixerでの自動ベンダープレフィックス付与がおこなわれます。となると、LESSやSassも書けるのか気になるところですが、残念ながら現時点ではサポートされていません。Issueで議論が続いているので気になる方は覗いてみるといいかもです。

画像ファイルの扱い

バンドル時、JSやCSSのファイル名はハッシュ化されますが、画像ファイルについても同様です。画像をJSX内で読み込む場合は以下のような形になります。
import React from 'react';
/* ビルド前のファイル名を指定 */
import logo from './logo.png';

/* バンドル後のファイル名をコンソール出力 */
console.log(logo);

export default function Header() {
return <img src={logo} alt="Logo" />;
}

最後に

ReactとES6(今回は触れていないですがReduxも)の組み合わせは、シングルページアプリケーション開発をする上での現時点における標準なのかなというのが所感です。最初にも書きましたが、来年には廃れていたとしても今学んでおいても間違ってはいないと思います。

Create React Appは、Webpack・Babel・ESLintという他のフレームワークやライブラリで採用しているような定番ツールを使っているので、これを踏み台にしてそれらを学んでいくことができる、という意味でもおすすめです。まずはインストールして、実際に触ってみましょう。


エンジニア募集

エキサイトではエンジニアとして一緒に働いてくださる方を新卒採用と中途採用で募集しています。詳しくは、こちらの採用情報ページをご覧ください。

[PR]
by ex-engineer | 2016-07-25 12:00