Anguler 2 ハンズオンに参加してきた。
今まで React ばかり触っていた自分にとってはなかなか刺激的だったので、ハンズオンをやってみて思ったことや、懇親会でサポーターの方と話していたことについて書いていく。
なお、Angular 1 は触ったことがないので「Angular 1 との違い」については触れない。
免責、というか言い訳
React についてはそれなりに理解しているつもりだけど、Angular に関しては本当に「１日触っただけ」の経験値でこのエントリを書いているので・・・その点あらかじめご承知いただきたい。 わかりにくい表現や間違い等があったらご指摘いただけると嬉しい。
Angular 2 はフルスタックではない
「Angular はフルスタック」という言葉をよく耳にしていたので「フルスタックフレームワークこわい」と身構えていたものの、Angular 2 を触った感じでは別にそんなことはなかった。Angular 1 には Controller があったらしいので、おそらく Angular 2 からはフルスタックではなくなったということなんだと思う。
実際 Angular がやっていることは、コンポーネントを定義してそれをレンダリングするということだけ。
ビジネスロジックを担当するオブジェクトをコンポーネントに依存性注入(DI)する仕組みが用意されているものの、注入するオブジェクトそのものは開発者がよしなに設計・実装しなきゃいけないし、Angular 本体はプレゼンテーションロジックに徹しているといえる。
HTTP やルーティングの仕組みもあるが、あれは「Angular が公式で周辺モジュールを用意している」という程度のもので、Angular 本体 (angular/core) とは切り離して考えることが出来る。
Angular 本体がやっていることといえば、ユーザーが DOM を触らなくても済むようにプレゼンテーションロジックをラップするということ。
あれ？ これ React とだいたい一緒じゃん。
Angular 1 のことは知らないが、少なくとも Angular 2 は責務が小さくまとまっていていい感じに設計されていると思う。 Angular 2 はフルスタックではない。
DOM 操作つらい問題に対するアプローチの違い
じゃあ Angular と React は何が違うのか。
そもそもが「SPA をやろうとすると人間が DOM にパッチを当てに行くのが辛すぎる」という課題があって、両者ともその課題を解決しようとしているが、そのアプローチの仕方が全く違う。
- React は「ページ遷移 → サーバから新しい DOM を返却」という、「昔の Web の一連の流れ」をすべてブラウザ上で完結させることで解決する
- Angular は「DOM のパッチ操作は全部フレームワークが面倒見るわ」という方法で解決する
という感じ。
それに伴ってコンポーネントの表現の仕方も異なっている。
- React ではコンポーネントを命令的に記述する
- 更新のたびに呼ばれる render メソッドを実装する
- Angular ではコンポーネントを宣言的に記述する
- 表示したい DOM のカタチを記述するだけで、あとは Angular がよしなにやってくれる
全く違う方法で同じ課題を解決しようとしていて面白い。
その他の違い
以上に書いたことが Angular と React の最も大きな違いだと思った。
その他には「React はブラウザ以外での用途*1もあるが、Angular はブラウザに特化している」などの違いがあるが、些細な事だと思う。
総じて感想
- Angular と React は「やろうとしていることは同じ、アプローチが全く違う」という印象で面白い
- 個人的には Angular に「なんか気持ち悪そう」という偏見を持っていたので、実際に触ってみて「Angular ええやんけ！」ってなった
- Angular は最近だいぶいい感じになってきた*2とのことで「いまが Angular 始めどき！」という感じ