Chapter 03

1章.2 メンタルモデル?②:Angular と テンプレート

Satoshi Takeda
Satoshi Takeda
2021.10.01に更新

JSX はキモい?

個人的に React はフロントエンドエンジニアにとって扱いやすいと考えていますが、「JSX がキモくて馴染まない」という意見を持つ人がいることも知っています。

最近だと受容感度が高まっているでしょうが、少なくとも React が出始めたころにそういった意見を聞いたこともあります。React を採用したものの、チームメンバーからそういった意見をもらうこともありました。

人間は経験則や自らの知識範囲内で判断しようとするので、認知的不協和を簡単に起こしてしまうものです。キモいという意見も分かりますが鼻先で判断してはよくありません。

さて次は Angular について、鼻先ではなくメンタルモデルの話をしていきましょう。

Angular とテンプレート

foo.component.ts
@Component({
  selector: "app-foo",
  templateUrl: "./foo.component.html",
})
export class FooComponent {
  @Input()
  bar: string;
}
foo.component.html
<p>{{ bar }}</p>

Angular は我々開発者が View として認識しやすい HTML(とよく酷似した Angular テンプレート)を分離している点が React と大きな違いでしょう。責務や表現の違いを JavaScript の文脈で収めず、我々の関心事を分離することでメンタルモデルを増強しています。

@Component デコレータがメタデータを受け取れるようになっていますが、もちろん Angular もこのままのコードではブラウザで動かすことはできません。Uncaught SyntaxError: Invalid or unexpected token といった具合にブラウザネイティブで解釈できるシンタックスではなく、コンパイルが必須です。

ソフトウェアの文脈に出てくる、よく似た形状

Angular の特徴として View 向けのコンポーネント単体でアプリケーション構成されるということはありません。コンポーネント、サービスやディレクティブ、パイプ、SPA 向けのルーティングといった具合に単一責務のパーツがいくつかあり、ユーザーとなる開発者はそれらを統合しアプリケーションを実装することになります。

それらを ngModule を起点にいくつかのモジュールとして束ねアプリケーションを構成します。ngModule が DI コンテナのような役割を果たして依存オブジェクトが集約され、Constructor Injection により依存オブジェクトの注入が行われます。

アプリケーション起動のための Boostrap ファイルでサービスプロバイダとしてクラスオブジェクトを複数登録するコードを記述するような、フルスタックなバックエンドフレームワークに親しんだ人は理解が進みやすいでしょう。

SWE として類似した概念をすでにメンタルモデルとして構築している場合、Angulr が提供するフレームにおいて新たな学習が必要になる部分は少ないと考えられます。