note(旧)5万人に1人になる。この広告は、90日以上更新していないブログに表示しています。Angular2と聞いてここのところ僕は仕事でReactばっかり書いてるわけですが、最近は趣味でAngular2も触ったりし始めてまして、まあ圧倒的にReactが好きなわけだけれどそれでもAngular2にも興味津々になっているっていうステータスです。そんな中でこんなイベントがあって、僕的にはとても胸が熱い感じだったので参加してきました。Angular」やっぱりこういうトピックは人気がすごくて、connpassの抽選によって参加できるか否かみたいな形になってました。僕は抽選で落選してしまったのですが、参加者の何人かがキャンセルしてくれたので繰り上がりで参加できるっていう運びでした。100人規模くらいの勉強会だと補欠になっても、30人くらいはキャンセルするからわりと望みあるってことがわかった。勉強会メモを綴っていきまする。形式はトークバトルって感じだったので雑にメモってます。メモはReact側の意見とAngular2側の意見と僕の感想って感じでわけて書いてます。@armorik83さん開発言語についてReactBabelをメイン。TypeScriptのサポートもあるのでいける。Babelとの親和性が高い。JSXは気持ち悪いけど、やっぱり必要。PropTypesが微妙なのでそこをflowTypeに切り替えようっていう動きがある(facebookがそう言ってるわけではない)。Angular2可能な書き方は、TS,JS,Dart。推奨はTypeScript。ドキュメントとかもTypeScriptがほぼほぼ。なんでもいいので、規模感に合わせて使い分けていくべきっていう話だった。しても、親和性という面でいうとReactはBabel、Angular2はTypeScriptが高かった。最近静的型付けの素晴らしさを感じ始めたのでTypeScriptにしろflowにしろ仕事の開発に導入したいな...。アーキテクチャについてReactReactはviewのライブラリなので、Reactだけだと厳しい。イベントや状態を管理するための機構が必要。fluxだったりReduxだったり。今はReduxが一番流行ってる。ReduxにしたとしてもAngular2のようなフレームワークにはならない。ライブラリの組み合わせでしかないから、いろいろ考えないといけない。今使われているエコシステムが昔はなかったので、Angular独自のものがいっぱいあった。そのイメージをひきづっている人が多いが、Angular2は今のエコシステムに乗っている。必要な道具を自分で選ぶことができる。その中でとても使われているのがRxjs。Reduxというのもあるが、この組み合わせはなかなかいけてない。ReduxはReact限定ではないとは言っているが、やっぱりReactがベスト。Angular2のDIがReduxではできない。ReduxやFluxはシングルトンだけれど、Angular2はDIによってどうとでもできるから、Reduxはいらない。感想DIという概念はAngular2で初めて知って、なかなか便利だったなあと感じていた。fluxみたいな「こうしなさい」的な処理の流れとかないから好きなようにどうとでもできるイメージ。僕は、Reduxのシングルトンがとてもやりやすいなあと感じている。ビルドツールについてReactwebpackやbrowserify。コンポーネント志向なのでコンポーネントとしてロードする前提。Angular2Reactと一緒。バンドルしないとブラウザで使えない。SystemJSっていうものがあるが、これはまだ人類には早い。世界がHTTP/2になってから出直すべき。jspmの扱いがひどかったけれどまあわかる。Reduxで、webpackでバンドルしていたプロジェクトのビルドツールをrollupに変えたいっていう感じに僕の中でなったのでしこしこと移行作業をしてたんだけれど、react-routerだかredux-routerだかどっかがどうにもバンドル時にエラー吐いてだめだった...。ルーティングについてReactそもそもReact自体にはない。実質react-routerがデファクトだがこいつがなかなか使えない。ルーティングしたら最初にactionを発火してほしい。最初にデータをとってほしいのに、最初にコンポーネントをマウントしちゃう。いう面もあって、react-routerが決定版にはならない。Angular2昔はいろいろあったが、今の話をすると、ほぼほぼ良い感じのものができあがった。react-routerの件で言うと、コンポーネントがマウントされる前にリクエストをフックすることができる(resolveという仕組み)。感想react-routerでだるさを感じる日々が結構あったので、この話は共感できた。確かにReactはそもそもviewライブラリなので、こっちでどうにか考えてうまくルーティングしなきゃいけないかなあ。テンプレートについてReactJSXのclassNameはなんとかならないものか。XSS対策で、aタグのhrefとかiframeのsrcとかをサニタイズしてくれないので自分でチェックしなきゃいけない。Angular2Angular2はHTMLなので、まだこっちのがJSXよりはましなのではないか。Angular2は厳しすぎるくらいセキュアなのでサニタイズとかは問題ない。感想どっちもきもいって話だった。痛み分け、慣れてしまえばおっけーっていう結論だった。JSXには慣れてしまったのだが、classNameとかhtmlForとか確かにきもいあれは。慣れてるから良いと思っている僕は。スタイリングについてReactreactというかwebpackとかの話だが...CSSをJSのオブジェクトかのように扱ってスタイルあてることができる。domのstyle属性に入れる。React自体にはCSSに関しての機能はない。Angular2AppComponentの中にstylesってのがあって、shadowDOMと同じようにできるイメージ。デフォルトはエミュレートだが、ブラウザがshadowDOM対応したら設定一つで切り替えられる。Modulesとかはあんまり好きではない。CSSはPostCSSで頑張っている最近。コンポーネント以外の処理についてReactReduxの考え方としては、「副作用があるものはmiddlewareで扱う」という感じ。APIコールはmiddlewareでやるもの。どこまでの規模のものを作るかによってmiddlewareの選定は変わる。やってくれるのは状態の管理とイベントの管理だけ。自分たちでシンプルなAPIをたくさん作って、うまく扱っていくしかない。Angular2APIコールはangular-httpってやつがある。Angular2はテストのことをすごく考えてるFWなので、テストのときにangular-http使うととても便利。感想Reduxはフレームワークじゃなくてライブラリって話はとても納得した。確かにそう考えると今までReduxに対して持ってた不満が解消される気がする。僕は一人で設計考える力がついてないからReduxをうまく扱えてないっぽい。テストについてReactenzymeをよく使う。reactのaddonでテストするための便利なAPIがたくさんある。Angular2karma使ってる。Angularの中にコンポーネント単位でテストするAPIがある。Angular2のテンプレートはただの文字列なので、実行するまで結果がわからないのでコンパイルが通るかのテストは確実にしないといけない。感想Reactはコンポーネントがステートレスな関数で、Angular2はテンプレートが文字列って話してた。性質が根本的に違うけれど、どちらもテストはしやすいって話だった。テストコードをいまだに仕事で書いていないのでここらへんの知識が全然足りない...。SSRについてReactRenderToStringはテンプレートとしては効率化されきっていない(仮想DOMのツリーを作るためにいろいろしてるから)。facebookもReactのSSRの機能は使っていないので、あんまり実用的ではないかもしれない。SSRしている他の会社も、すごく頑張って無理をして実装しているという状態。Angular2Angular2は今RC.6に移行中で、SSRは現状できないという状態。全部Angular2のレールに乗った中でできるので、実装されれば安心感はあるはず。感想SSRがしたいんだけれど難しすぎて困っているっていう現状だったのでこの話はとても楽しみだったのだけれど、どちらも現在はつらいって話だったのでひたすら辛かった。fluxibleの良い感じのSSRのサンプルとかあったからそっちで1回勉強しようかなとも思っている。相手側の良い点ReactAngular2の、フレームワークという形で学習コストが抑えられるのであればそれは良い現実が見えてないけど理想を掲げてて良いAngular2Reactは人気が出てて羨ましい安定板出せてて羨ましい感想Angular2の安定版が早ければ今月に出るらしいので、それが出たら一気に楽しそうな気がする。そもそも未だに安定版出てないのにこんなに盛り上がってるのはすごいことだと思う。相手側の悪い点React早く安定板をだしてくださいAngular2Reactはもっとコミュニティ増やした方が良い。下からすくっていくのがない。JavaScriptに自信のある人はReactに行ってしまう...。感想そんなにお互い悪い点はなかったらしい。まとめもっと激しいディスり合いがあるものかと期待していたがわりと優しい感じの世界だった。1回Reactだけで頑張ってみてそのつらみを感じてから、fluxとかReduxを触って便利さを感じてほしいって話とか、Reduxはフレームワークではなく薄いライブラリなので、フレームワークと勘違いをして不満を持ってる人が多いって話とか、自分のこれまでの行いを反省させられる言葉が多々あってよかった。自分でしっかりと設計をする力もないのにフレームワーク入れて、フレームワークに使わされてるような現状なので1度0から自分で頑張ってみる経験をしとこうかなと思った。Angular2に関しては1回チュートリアルをやったことある程度の経験だったけれど、もう少しで安定版が出るらしいのでそしたらがっつり触ってみようかなと思った。楽しかった良いイベントでした。@サイボウズ株式会社これに行ってきたのでそのメモ。@...これに行ってきたのでそのメモ。SPA...2016-08-28『君の名は。