読者です 読者をやめる 読者になる 読者になる

/var/log/study

つまり雑記

Angular2のチュートリアルに取り組んだ感想

angular.io

上記のページの配下の

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の雰囲気をつかんだ.

感想

ほとんどの解説を飛ばしたので, よくわかってないところ, 認識が間違っている事はたくさんある前提で

環境

github.com

上記のリポジトリを引っ張ってきて, npm install && npm start で即始められる体験は最高に良かった.

が, 上記のボイラープレートは, ファイルの変更とブラウザとを同期するタイプなので, 最初のうちは, TSのコンパイルが失敗してたのを見落とすと??? という感じの状況が長く続いた.

またこのボイラープレートは, コンパイル対象の ts ファイルと同じディレクトリに js.mapjs ファイルを吐く. 要は 'js' と 'js.map' と 'ts' が混在することになる

色々考えると tsjs は別ディレクトリに吐かれて欲しいので, プロダクション環境で使うときに要検討の箇所になると思う.

すこし調べた感じだと、TypeScriptのコンパイラの設定でどうにかなりそう.

Angular2に関して

チュートリアル程度ならば、

ビルドの環境を作るのが面倒だし, ボイラープレートを適当に拾うのも面倒だし, ReactとES6以外のライブラリどうするか問題があるし

上記の問題はほぼ解消

サーバーサイドのプログラミングを書いているときと、似ているような考え方で写経できたという感想.

  • module
  • service
  • component
  • 通常の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の仕様をもう少し探る
  • RxJSとは何か?を学ぶ
  • Angular2に関する理解を深めるために、チュートリアルの解説を読みながら再度取り組む

以上のような流れになると思うので, TypeScriptの文法とtscを抑えると思う. ので, たぶん次の記事はTypeScriptの話になる.