Angular2のチュートリアルに取り組んだ感想
上記のページの配下の
Tutorial: Tour of Heroes - ts - TUTORIAL
に取り組んだ後の感想を書く.
背景
12月の配属発表で, 今後はJSを書くことはほぼ無い事が確定したと思っている.
であるならば, 正月くらいは今後触らないであろう技術に積極的に触っていくのが吉では無いかと考えた.
去年はES6とReactでSPAもどきを作るくらいは頑張ってみたが, その組み合わせ自体は良いと思いつつ, ビルドの環境を作るのが面倒だし, ボイラープレートを適当に拾うのも面倒だし, ReactとES6以外のライブラリどうするか問題があるし.
本職としてJSを書き続けるならまだしも, 片手間でJSを書くのに色々と選ぶのは面倒くさい.
そんななかで, Angular2はTypeScriptを採用して, フルスタックにライブラリ(RouterやHTTPクライアント)を持っていることをふと思い出した.
JSに関する事前知識
- Angular
- Backbone
- CoffeeScript
上記はいずれもプロダクションのコードを書いた経験あり
ES6は体験済み
- Reactも体験済み
ただし両者ともプロダクションでの経験ではない
TypeScript未経験
- RxJSも未経験
取り組んだこと
2016/12/31 ~ 2017/1/2 にかけて開いてる時間をちょこちょこ使い,
Tutorial: Tour of Heroes - ts - TUTORIAL
上記の英語のうち, Angularに関する解説はほとんどすっ飛ばし, 何がやりたいのか?だけを拾って, ひたすらサンプルコードを書き写す作業に取り組んで, TypeScriptとAngular2の雰囲気をつかんだ.
感想
ほとんどの解説を飛ばしたので, よくわかってないところ, 認識が間違っている事はたくさんある前提で
環境
上記のリポジトリを引っ張ってきて, npm install && npm start
で即始められる体験は最高に良かった.
が, 上記のボイラープレートは, ファイルの変更とブラウザとを同期するタイプなので, 最初のうちは, TSのコンパイルが失敗してたのを見落とすと??? という感じの状況が長く続いた.
またこのボイラープレートは, コンパイル対象の ts
ファイルと同じディレクトリに js.map
と js
ファイルを吐く. 要は 'js' と 'js.map' と 'ts' が混在することになる
色々考えると ts
と js
は別ディレクトリに吐かれて欲しいので, プロダクション環境で使うときに要検討の箇所になると思う.
すこし調べた感じだと、TypeScriptのコンパイラの設定でどうにかなりそう.
Angular2に関して
チュートリアル程度ならば、
ビルドの環境を作るのが面倒だし, ボイラープレートを適当に拾うのも面倒だし, ReactとES6以外のライブラリどうするか問題があるし
上記の問題はほぼ解消
サーバーサイドのプログラミングを書いているときと、似ているような考え方で写経できたという感想.
- module
- service
- component
- html
- css
- 通常のClass
Angularのコードは上記したように分類が出来るっぽい. MVCモデルとマッピングするとしたら, componentがContoller, serviceがModel, htmlがviewになるのかな? componentの中で, templateのhtmlとそれに対するcssをパスで設定出来るのは結構良いのではないか? と思った. ただし, templateはAngular1の頃と同様に、 ngIf
みたいな文法が入ってくるのは個人的に好みではない.
jQueryのコードと比較して, Angular2やReactの様に, コードに対してテンプレートが紐付いている状態は色々と考えることが少なくて済むのは非常にデカイ.
DIは良いよね!って感じなんだけど, DIするにはInjectable書けばそれっぽくなるでしょ?くらいの理解しか現状ない. たぶんAngular2のDIを知るとかよめばすんなり理解できそう.
この次に取り組むべきだと感じたこと
以上のような流れになると思うので, TypeScriptの文法とtscを抑えると思う. ので, たぶん次の記事はTypeScriptの話になる.