【メモ】React vs Angular2 2016/9/7 @TechFeed Live

React vs Angular2と聞いて

ここのところ僕は仕事でReactばっかり書いてるわけですが、最近は趣味でAngular2も触ったりし始めてまして、まあ圧倒的にReactが好きなわけだけれどそれでもAngular2にも興味津々になっているっていうステータスです。

そんな中でこんなイベントがあって、僕的にはとても胸が熱い感じだったので参加してきました。
TechFeed Live#2 「React vs Angular」

やっぱりこういうトピックは人気がすごくて、connpassの抽選によって参加できるか否かみたいな形になってました。
僕は抽選で落選してしまったのですが、参加者の何人かがキャンセルしてくれたので繰り上がりで参加できるっていう運びでした。

100人規模くらいの勉強会だと補欠になっても、30人くらいはキャンセルするからわりと望みあるってことがわかった。

本題

勉強会メモを綴っていきまする。
形式はトークバトルって感じだったので雑にメモってます。
メモはReact側の意見とAngular2側の意見と僕の感想って感じでわけて書いてます。
(LTに関してはメモするの忘れてました…)

React陣営： @yosuke_furukawaさん, @koba04さん
Angular2陣営： @laco0416さん, @armorik83さん

開発言語について

React

Babelをメイン。TypeScriptのサポートもあるのでいける。
Babelとの親和性が高い。JSXは気持ち悪いけど、やっぱり必要。

PropTypesが微妙なのでそこをflowTypeに切り替えようっていう動きがある(facebookがそう言ってるわけではない)。

Angular2

可能な書き方は、TS,JS,Dart。推奨はTypeScript。
ドキュメントとかもTypeScriptがほぼほぼ。Dartはリポジトリ別れた。

感想

結局、言語はなんでもいいので、規模感に合わせて使い分けていくべきっていう話だった。
だとしても、親和性という面でいうとReactはBabel、Angular2はTypeScriptが高かった。

最近静的型付けの素晴らしさを感じ始めたのでTypeScriptにしろflowにしろ仕事の開発に導入したいな…。

アーキテクチャについて

React

Reactはviewのライブラリなので、Reactだけだと厳しい。
イベントや状態を管理するための機構が必要。fluxだったりReduxだったり。今はReduxが一番流行ってる。
ただ、React + ReduxにしたとしてもAngular2のようなフレームワークにはならない。ライブラリの組み合わせでしかないから、いろいろ考えないといけない。

Angular2

Angularの1系はAngular worldだった。今使われているエコシステムが昔はなかったので、Angular独自のものがいっぱいあった。
そのイメージをひきづっている人が多いが、Angular2は今のエコシステムに乗っている。必要な道具を自分で選ぶことができる。

その中でとても使われているのがRxjs。

Angular2 × Reduxというのもあるが、この組み合わせはなかなかいけてない。ReduxはReact限定ではないとは言っているが、やっぱりReactがベスト。
Angular2のDIがReduxではできない。ReduxやFluxはシングルトンだけれど、Angular2はDIによってどうとでもできるから、Reduxはいらない。

感想

DIという概念はAngular2で初めて知って、なかなか便利だったなあと感じていた。fluxみたいな「こうしなさい」的な処理の流れとかないから好きなようにどうとでもできるイメージ。
ただ僕は、Reduxのシングルトンがとてもやりやすいなあと感じている。現状。

ビルドツールについて

React

webpackやbrowserify。コンポーネント志向なのでコンポーネントとしてロードする前提。

Angular2

Reactと一緒。バンドルしないとブラウザで使えない。
SystemJSっていうものがあるが、これはまだ人類には早い。世界がHTTP/2になってから出直すべき。

感想

特に言うことなし。jspmの扱いがひどかったけれどまあわかる。
最近React × Reduxで、webpackでバンドルしていたプロジェクトのビルドツールをrollupに変えたいっていう感じに僕の中でなったのでしこしこと移行作業をしてたんだけれど、react-routerだかredux-routerだかどっかがどうにもバンドル時にエラー吐いてだめだった…。そんな記憶がある。

ルーティングについて

React

そもそもReact自体にはない。実質react-routerがデファクトだがこいつがなかなか使えない。
ルーティングしたら最初にactionを発火してほしい。最初にデータをとってほしいのに、最初にコンポーネントをマウントしちゃう。
そういう面もあって、react-routerが決定版にはならない。

Angular2

昔はいろいろあったが、今の話をすると、ほぼほぼ良い感じのものができあがった。
react-routerの件で言うと、コンポーネントがマウントされる前にリクエストをフックすることができる(resolveという仕組み)。

感想

react-routerでだるさを感じる日々が結構あったので、この話は共感できた。
確かにReactはそもそもviewライブラリなので、こっちでどうにか考えてうまくルーティングしなきゃいけないかなあ。

テンプレートについて

React

JSXのclassNameはなんとかならないものか。
XSS対策で、aタグのhrefとかiframeのsrcとかをサニタイズしてくれないので自分でチェックしなきゃいけない。

Angular2

Angular2はHTMLなので、まだこっちのがJSXよりはましなのではないか。
Angular2は厳しすぎるくらいセキュアなのでサニタイズとかは問題ない。

感想

どっちもきもいって話だった。痛み分け、慣れてしまえばおっけーっていう結論だった。
もはやJSXには慣れてしまったのだが、classNameとかhtmlForとか確かにきもいあれは。まあでも慣れてるから良いと思っている僕は。

スタイリングについて

React

reactというかwebpackとかの話だが…
CSSをJSのオブジェクトかのように扱ってスタイルあてることができる。domのstyle属性に入れる。とかまあいろいろ。
React自体にはCSSに関しての機能はない。

Angular2

AppComponentの中にstylesってのがあって、shadowDOMと同じようにできるイメージ。
デフォルトはエミュレートだが、ブラウザがshadowDOM対応したら設定一つで切り替えられる。

感想

どっちも一緒みたいな感じだったので特に感想はないけれど、個人的にはそもそもCSS in JSとかCSS Modulesとかはあんまり好きではない。
なのでCSSはPostCSSで頑張っている最近。

コンポーネント以外の処理について

React

Reduxの考え方としては、「副作用があるものはmiddlewareで扱う」という感じ。
APIコールはmiddlewareでやるもの。しかしどこまでの規模のものを作るかによってmiddlewareの選定は変わる。
やってくれるのは状態の管理とイベントの管理だけ。だから自分たちでシンプルなAPIをたくさん作って、うまく扱っていくしかない。

Angular2

APIコールはangular-httpってやつがある。
Angular2はテストのことをすごく考えてるFWなので、テストのときにangular-http使うととても便利。

感想

Reduxはフレームワークじゃなくてライブラリって話はとても納得した。
確かにそう考えると今までReduxに対して持ってた不満が解消される気がする。まだ僕は一人で設計考える力がついてないからReduxをうまく扱えてないっぽい。

テストについて

React

enzymeをよく使う。reactのaddonでテストするための便利なAPIがたくさんある。

Angular2

karma使ってる。
Angularの中にコンポーネント単位でテストするAPIがある。
Angular2のテンプレートはただの文字列なので、実行するまで結果がわからないのでコンパイルが通るかのテストは確実にしないといけない。

感想

Reactはコンポーネントがステートレスな関数で、Angular2はテンプレートが文字列って話してた。性質が根本的に違うけれど、どちらもテストはしやすいって話だった。
テストコードをいまだに仕事で書いていないのでここらへんの知識が全然足りない…。

SSRについて

React

RenderToStringはテンプレートとしては効率化されきっていない(仮想DOMのツリーを作るためにいろいろしてるから)。
facebookもReactのSSRの機能は使っていないので、あんまり実用的ではないかもしれない。SSRしている他の会社も、すごく頑張って無理をして実装しているという状態。

Angular2

Angular2は今RC.6に移行中で、SSRは現状できないという状態。
ただ、全部Angular2のレールに乗った中でできるので、実装されれば安心感はあるはず。

感想

SSRがしたいんだけれど難しすぎて困っているっていう現状だったのでこの話はとても楽しみだったのだけれど、どちらも現在はつらいって話だったのでひたすら辛かった。
fluxibleの良い感じのSSRのサンプルとかあったからそっちで1回勉強しようかなとも思っている。

相手側の良い点

React

Angular2の、フレームワークという形で学習コストが抑えられるのであればそれは良い
現実が見えてないけど理想を掲げてて良い

Angular2

Reactは人気が出てて羨ましい
安定板出せてて羨ましい

感想

Angular2の安定版が早ければ今月に出るらしいので、それが出たら一気に楽しそうな気がする。そもそも未だに安定版出てないのにこんなに盛り上がってるのはすごいことだと思う。

相手側の悪い点

React

早く安定板をだしてください

Angular2

Reactはもっとコミュニティ増やした方が良い。下からすくっていくのがない。
JavaScriptに自信のある人はReactに行ってしまう…。

感想

そんなにお互い悪い点はなかったらしい。

まとめ

もっと激しいディスり合いがあるものかと期待していたがわりと優しい感じの世界だった。
1回Reactだけで頑張ってみてそのつらみを感じてから、fluxとかReduxを触って便利さを感じてほしいって話とか、Reduxはフレームワークではなく薄いライブラリなので、フレームワークと勘違いをして不満を持ってる人が多いって話とか、自分のこれまでの行いを反省させられる言葉が多々あってよかった。
まだまだ自分でしっかりと設計をする力もないのにフレームワーク入れて、フレームワークに使わされてるような現状なので1度0から自分で頑張ってみる経験をしとこうかなと思った。

Angular2に関しては1回チュートリアルをやったことある程度の経験だったけれど、もう少しで安定版が出るらしいのでそしたらがっつり触ってみようかなと思った。

まとめおわり。
楽しかった良いイベントでした。