https://zenn.dev/teatwo/articles/46cf06cbe3e778

この記事の目的

Angularのドキュメントは、How to useはそれなりにありますが、conceptsが少ないよなあと昔から思っていました。使い方はわかってもアーキテクチャーがよくわからないのです。

どんなコンセプトなのか？、背景にある考え方は何なのか？、どんな仕組みになっているのか？などは、ウェブで幅広く探すしかありませんでした。そこで、私がこれまで参考にしてきたもののうち、特にレンダリングメカニズムに関して設計思想や仕組みがわかるものを集めました。なるべく一次情報のものをリストアップしています。

最近はangular.ioのコンテンツも充実してきましたが、設計思想的なものは相変わらず少なかったりします。Angularを使うことではなくて、Angularそのものに興味を持ったときのガイドになればと思います。他にもこれはというものがあったらぜひコメントなどで教えてください。

なお、APIやクラス名などの実装詳細については、大半のドキュメントがアウトオブデートなのでご注意ください。あくまで設計思想や仕組みを学ぶための参考資料群です。

本記事はAngular Advent Calendar 2020の11日目です。今回は経験者向けに参考資料の紹介という体ですが、パートタイムでお手伝いしているビットバンク株式会社 Advent Calendar 2020の21日目では初心者向けにレンダリングメカニズムを噛み砕いて詳細解説する予定です。ご興味ある方はそちらもぜひご覧ください。

レンダリングメカニズムの概要

Angularのレンダリングメカニズムの主要登場人物と関係性を説明します。雑な絵ですみませんが、どんな要素があるかを把握できるようにしています。Angularの特徴として、1.Incremental DOM方式、2.プッシュ型の更新モデル、3.コンパイル必須が挙げられます。 主に開発時に行う事前工程と、ブラウザで行われる実行工程、そして更新工程の３工程に分かれます。

事前工程と実行工程

• コンパイラ: ソースコードからビルドファイルを生成する。フレームワークの結合が行われ、htmlもjsコードに変換される。
• レンダラー: ブラウザがビルドファイルを読み込んだら起動される。仮想ビューを作りDOMを操作する。画面が描画される。
• Incremental DOM: 実ノードにメタ情報が付与された仮想ノードのツリー。レンダラーによって作られる。

更新工程

画面を更新する時の工程です。イベント発生や通信終了をトリガーにして、変更を即時適用するプッシュ型の更新モデルです。

• Zone: ユーザーの入力や通信の終了をフレームワークに通知する。
• チェンジディテクション: 更新がトリガーされたら、変更が必要なコンポーネントを検出する。
• レンダラー: 現状のIncremental DOMを参照して変更を適用する。画面が描画される。