Angular公式サイトの「Angularチュートリアル」をやりました。
チュートリアル
https://angular.jp/tutorial
次の6つの章で構成されています。
・1.ヒーローエディター
・2.リストの表示
・3.フィーチャーコンポーネントの作成
・4.サービスの追加
・5.アプリ内ナビゲーションの追加
・6.サーバーからのデータの取得
数日かかるボリューム
GWに三日ほどかけてゆっくりやりました。
完成したソースコードが掲載されているのでそれを見れば早く終えられますが、
コードの意味を理解するように努めながら進めたため時間がかかりました。
コンポーネントの分割
Angularでは一つのWebページ上の部品を作る単位として「コンポーネント」があります。
コンポーネントはWebページ上の部品をHTMLで表したテンプレート(.html)と、
テンプレートに何かが起こったときに動作するロジックを記述するコンポーネント(.ts)で構成されています。
（ほかには、スタイルシート(.css)とテストコード用ファイル(spec.ts)ファイルがあります）
テンプレートにはHTMLとして書けるものなら何でも書けるようなので、
一つのコンポーネントにたくさんロジックを書いてしまった方が楽…に思えますが、
適切に分割しなければ規模の大きいWebサイトになった時に収拾が付かなくなります。
そこで、コンポーネントを分割するのですが、
特定のコンポーネント内の値はほかのコンポーネントからは参照できません。
コンポーネント間で値を受け渡しをするにはAngularで用意されている方法を使う必要があります。
チュートリアルでは @Input デコレータが紹介されています。
これはコンポーネントの変数を受け取り用として宣言することで、
テンプレートのプロパティバインディング [] を使って値を受け渡すことができます。
なお、これはチュートリアルでは触れられていませんが、
@Inputデコレータで値を受け取った側（子コンポーネント）が値を渡した側（親コンポーネント）に値を返すには、
@Outputデコレータを使用し、イベントを使って(EventEmitter)親コンポーネントに値を戻すのが一般的だそうです。
Observable
JavaScriptでは外部にHTTPリクエストを投げたり、RESTAPIを呼んでデータを取得する機会があります。
こういった外部とのやり取りをする仕組みとしてObservableが用意されています。
Observableはまだ理解しきれてしていないのですが、
外部とのやり取りに対し次のようなことができるようです。
・pipeで手続きをまとめる
・mapで加工する
・tapでログ出力などの後処理をする
・catcherrorでエラー時の処理をする
pipeでやり取りをまとめることで、外部とのやり取りでよくある煩雑な例外処理やコールバック関数作成の負荷を軽減しているものと思われます。
追って学習しておきたい部分ですね。
感想
チュートリアルをするとAngularの深い部分が徐々に見えてきます。
ここから先は大まかに触れていくよりは個々の概念を深く学んでいく必要があるように思いました。