その案件、Reactで本当に大丈夫ですか？
こんにちは！ Pairsチームの太田です。
先日Webフロントエンド界隈で大変バズった記事がありました。
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。
http://d.hatena.ne.jp/tomoya/20160403/1459665374
個人的にはこの記事の大枠には同意していて、特に2016年春現在のJavaScript環境が
『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』
になる結論は共感できます。
ですが、Webフロントエンドにあまり明るくない人にとって誤解を生んでしまうのではないかと心配になるところが節々にありました。
今回は特にこの箇所について異論を挟みたいと思います。
去年、一気に普及したReactは、今年に入っても絶好調です。他のライブラリや、Angular 2など、色々と騒がれていましたが、去年1年間で個人的に当面はReactに完全決着したと思っています。
ReactがWebフロントエンドにおける絶対的存在であるように聞こえますが、そんなことはないと私は思っています。
ここでは対抗馬としてAngularをフィーチャーしてReactと比較します。
ReactとAngularは課題に対する解決アプローチが異なっていて、環境や状況によってどちらが最適になるかは変わります。
こういった判断にはReactとAngularの性質の理解が必要です。
その理解の一助になればと思い、この記事を書きました。
※ 以降の「Angular」は主に「AngularJS1」のことを指しています。なるべく「Angular2」との共通点を意識しています。
※ あくまでReactはビューのライブラリであり、フルスタックフレームワークのAngularと直接比較するのはおかしいのですが、以降の「React」はReactとFlux実装を組み合わせたアプリを構成できるスタックとして読んで頂けると幸いです。
HTML-CentricなのがAngular、JavaScript-CentricなのがReact
Angularは公式ページに HTML enhanced for web apps!とドーン！ とありますように、HTMLを拡張してアプリを作ることを主眼としています。
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>Angularのng-model属性や、{{ }} によるHTMLへのinterpolationは既存HTMLの拡張です。
AngularはHTMLありきで、JavaScriptは補完する立場です。
対してReactはJavaScriptが主役です。
HTMLを書く必要はなく、JavaScriptだけですべてを記述できます。
オイオイちょっと待て、ReactでもrenderでHTML書くやないか、と思われるかもしれませんが
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}Reactで書かれるのはHTMLではなく、JSXです。
HTML風な記法ですが、JavaScriptをHTML風に書ける、というものです。
JSXを使わずにJavaScriptだけでViewを書くことは可能です。
生のReactを知ろう — JSX、Flux、ES6、Webpackを使わず…
http://postd.cc/learn-raw-react-no-jsx-flux-es6-webpack/
点でプログラミングするのがAngular、面でプログラミングするのがReact
Angularの大きな特徴にデータバインディングがあります。
これにより、DOMで変化した値をJavaScript側でシームレスに受け取ったり、JavaScriptで編集した値をDOMに即座に反映することができるようになっています。
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select><ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>例えば、上記HTMLの <input ng-model="query"> のテキストボックスの値をユーザーが変更すると下部のliのfilter:queryに変更された値が適用され、リストがフィルタリングされます。
つまり、あるモデルが変更されたときにそのモデルを参照している他の場所でも自動的に変更が適用され、ビューの一部を限定的に変更できる仕組みになっています。対してReactはたった1つの関数で表すことができます。view = function (data) {
/* dataを使ってViewを組み立てする処理 */
return view;
}必要なdataをインプットに取ってビュー全体を組み立ててアウトプットする、という仕組みです。
（実際にはVirtual DOMにより必要な部分だけが効率的に変更されるようになっています）Angularではユーザーのフォームへの入力に対して、ビューの一部分を変更するようなユースケースを簡易に実装することができます。
逆にReactはそのようなユースケースの実装は冗長になりがちです。
Reactに向いているのは、インプットのデータがリアルタイムに変化しビューの頻繁な更新が発生するユースケースです。開発者の視点ではビュー全体を全部書き直しするコードを扱えばよいのでコントロールしやすくなります。
また、Angularでは点（モデル）が増えるごとに、ビューを更新するコードは相互依存関係を含んで複雑化していく傾向があります。道具を全部渡されるのがAngular、自分で選別するのがReactAngularは言わずと知れたフルスタックフレームワークなので、HTTP通信や非同期処理、ルーティングなどの必要なライブラリが組み込まれていて、大概のことは外部ライブラリに頼らずに開発できます。逆に言えば、Angular世界の中で物事が解決するのでロックインされているとも言えます。
また、Webフロントエンド開発の本質的な部分がAngularによって隠蔽されるので、コード量は減りますが再利用性の低い知識の醸成を生み出す恐れがあります。対してReactはそのようなライブラリを自分でOSSのJavaScript荒野から選んでこなければなりません。
よくGithubなどに必要なライブラリをまとめたStarter-Kitのリポジトリがあるのですが、フルアーマーガンダムのようなそこまでして何すんねん・・といった重厚なものが多くて、ライトウェイトなReactを選んだはずがどうしてこうなった！ ということになりがちです。
本当に必要なものを見極め、いらないものは捨てる審美眼が必要になります。この審美眼は一朝一夕で得られるものではなく、Webフロントエンド界隈を常にチェックするスタンスが必要です。まとめReactは強力なツールですが、絶対的唯一神と捉えることはリスクを含んでいます。
（今までも同じような過ちを繰り返しましたよね？）まずは作ろうとするアプリが下記の項目を満たすのであれば、Angularでプロトタイプを組んでみるのはいかがでしょうか。
逆にまったくマッチしない場合はReactが最適解かもしれません。あなたに必要なのはAngularかもしれないチェック
- オンライントレーディングやチャットのようなリアルタイム性は強く求められないアプリだ
- ユーザーがフォームをポチポチ入力する操作が多い（業務系によくある）
- 規模はそれほど大きくない
- とにかく早く立ち上げたい
- Webフロントエンド開発は俺の本業ではない（学習コストを払いたくない）
AngularとReactのどちらが優位なのかに執着するのではなく、状況に応じてどちらも使えるスタンスを持つことがよりよいサービスを開発することにつながるのではないでしょうか。
