かえるの井戸端雑記

開発日誌的な記事だったり備忘録だったり。まとめ記事と言うよりは、七転八倒の様子を小説みたいに読んで眺めてもらえればと。

Angular2を使ってみる 1. どういう物なのか

きっかけ

なんやかんやあって最近Web Interfaceを組む機会に恵まれてしまった。しまったのである。

しかし僕は最近の流行についてはいまいちよく知らない。僕の知識はjQueryで止まっている。prototypeを使ってclassっぽいものを定義してかりかり書いてる程度。素直にES6を使えという話もあるけどnodeはあんまり手を出したくなかったし(nodeに手を出すとなんでもかんでもjsでやることになりそうで個人的に趣味じゃない)。

けどそれはそれ。どうせやるならと調べてみることにした。するとReact+Reduxで行くかAngular2をで行くかみたいな話がちらほら見かけた。

といってもあんまりこの比較は適切なものではないらしい。

html5experts.jp

html5experts.jp

83 ReactとAngularっていうのを比べるのって、みんな大好きですよね。でも、ほんとはこれって比較できるもんじゃないんですよ。型が一致しないものは比較できないんですよ。

会場 (笑)

83 で、比較できないものを比較しているというのは、こういう項目を挙げてやっているっていうのは、フレームワークの相互プレゼンテーションみたいな感じで、Reactはこうですよ、Angular 2はこうですよ、という感じでやってるんですけど、ほんとにそれがみんな聞きたい話なのか?って思うんです。

すまん僕はそれを知りたかったんや……(記事を読みつつ顔を覆う)。

ということでこういう粒度の違う比較をしてもしょうがないということを知りつつも、粒度が違うということがわかったのは収穫だったので、FrameworkとしてのAngular2とLibraryとしてのReactという視点からもう少し理解を深めてみることにした。

この記事を書き始めた時点でreact-redux-starter-kitという素敵なgit repositoryがあったのでこれを使いつつ本を読んでreactを勉強しているところ。reactに手を出し始めたから余暇でangular2も触っておこうというのが今回のスタンス。

両者の区別

React

で、自分が今触ってみた限りでは、reactはこれcomponentという考え方がcoreにある感覚がしている。今まではtemplate engineでtemplateを書いてdomを展開し、jsによってdomを操作する、というのがある種のviewの扱いだったのだけれど、serverからとってくる情報やdomの操作によってdom自体の動作が複雑になっていった。

もういっそdomとdomの操作(logic)を一緒に扱えた方が楽なのでは。

で、まとめたものをcomponentと呼ぶことにした。そのcomponentをjsxという記法を使って気軽に定義していけるのがreactというイメージ(まだ勉強中なので後日違いましたごめんなさいと言うかも)。

イメージとしては既存のjsを入れ替えることを考えると、reactの導入によってこれまでのjsを切り替えるのではなく、reactの導入によってjsとそのjsで動作させていたdomを入れ替える、という感じ。そりゃまあdomの管理までjsでやった方がcomponentという考え方を実現するには素直だよなあと感じる。

この上でstatus管理まで華麗にこなしたいよね? となって出てきたのがredux。fluxという考え方に沿って実装するためのlibraryらしいけれどそこらへんのきちんとした理解はその、なんというか、ちゃんと相応の文献があるのでそちらに任せる。僕はとりあえず自分なりの理解をくみ上げたいんだ……。

参考としてはこのあたりがお勧め。

Angular2

で、reactはいいんだ、reactは。そっちはどうせあとで頑張らざるを得なくなるので。

angular2はどういうものなんだろう。

qiita.com

このpageを読む限りは、Angularは元々react同様にDOM周りの扱いの解決をしたくて生まれたから、結果的にReactとよく比較されている、というかかれ方をしてる。で、Angularという1つのframeworkの中で完結するように作って行っている、という作り方の方針の差が説明されている。

まあweb interfaceとして進む方向性自体がそうそう違うわけじゃないだろうから、どういう形で表現した方が実際使いやすいかという趣味の差なのかもしれない。ところでTypeScriptってなんぞ。いやCoffeeScriptみたいなものなんだろうけど。この期に及んで最終的な生成物から距離をとりたくないなあという忌避感がややある……(古い)。

html5experts.jp

AngularJSはそもそも、シングル・ページ・アプリケーション(SPA)を構築するためのフレームワークです。そしてその最新版であるAngular2をひと言で表すなら、Angular1のパワーアップ版 と言えるでしょう。Angular1でできたことがほぼ全てできるだけではなく、Angular1の欠点も改善しています。

だいたい理解の方向はあってる模様。

白石 Angular2では、TypeScript(※)がメインの開発言語になりましたね。

吉田 そうですね。JavaScriptECMAScript 5)でも書けなくはないですが、ドキュメントが不完全だったりして、あまりよくサポートされているとは言えなそうです。

金井 TypeScriptに重きが置かれているのは、以前行われた開発者向けのアンケート結果を踏まえてのものだと思います。その時のアンケート結果では、TypeScriptの採用を望む声が一番大きかったように記憶しています(編集部注: 1位はTypeScript (45%)、2位はBabel (33%)、ES5は3位 (9%))。

ははぁ。なるほど。

どうもこちらはどちらかというとjsであることにはこだわってないというか、成果物としてjsを作っているだけという感じがする。

金井 Angular2を使いこなそうと思ったら、TypeScript(もしくはBabel)、System.js (※)やWebpack (※)などのモジュールバンドラー (※)、RxJSなどを一通り押さえる必要があります。でもまあ逆に考えれば、一旦覚えさえすればモダンなJavaScriptが書けるようになるわけで。

林 ですね。モダンJavaScriptの学習セット だと思えば、楽しく学べるんじゃないでしょうか。

うん覚えることはいくつかありそう。僕はまだwebpackすらどういう代物なのかぼんやりとしか知らない素人だし。ちくせう。

でもって何をすればいいのか

こうなると覚えることがいくつかあって、

  • Angular2の扱い方
  • TypeScriptでの書き方

このあたりっぽい。たぶんnodeも覚える必要がある。のかな? node関係ない? 後で調べよう。

で何かいい課題というかとっかかりはないかなあと思ったけどちゃんとquick startがあった。

angular.io

まあその前にsetupか。このあたりのpageが参考になるかな。

www.buildinsider.net

次回setup。するのかな。調べただけで満足してやめる気が少しだけする。