【決定版】Angularコンパイラチュートリアル：初心者からマスターまでの完全ガイド

2024-06-18

Angular コンパイラが「コンパイル」するもの

テンプレート処理:

HTMLテンプレートを、Angularが理解できる形式に変換します。
変数や式をバインディング処理し、DOM要素と紐付けます。
コンポーネント間のディレクティブや相互作用を処理します。

TypeScriptコード処理:

TypeScriptコードを、ブラウザで実行できるJavaScriptコードに変換します。
型チェックを行い、構文エラーや型エラーを検出します。
デコレータやアノテーションを解釈し、Angularコンポーネントなどの機能に変換します。

これらの処理により、Angularアプリケーションはブラウザで効率的にレンダリングされ、ユーザーとインタラクションできるようになります。

コンパイラの種類

Angularには、主に以下の2種類のコンパイラがあります。

Just-in-time (JIT) コンパイラ:

アプリケーション実行時に、ブラウザ内で動的にコンパイルを行います。
開発速度が速く、デバッグに適しています。
ただし、初回ロード時に時間がかかったり、パフォーマンスが劣化する可能性があります。

ビルド時に、アプリケーションを事前にコンパイルします。
初回ロード時間が短く、パフォーマンスが向上します。
ただし、開発サイクルが遅くなり、デバッグが難しくなる可能性があります。

Angularコンパイラは、Angularアプリケーションをブラウザで実行できるコードに変換する重要なツールです。JITとAOTの2種類のコンパイラがあり、それぞれメリットとデメリットがあります。プロジェクトの要件に合わせて適切なコンパイラを選択することが重要です。

Angular コンパイラ：サンプルコード

<app-my-component [name]="hero.name"></app-my-component>

このテンプレートは、app-my-component コンポーネントを使用し、hero.name プロパティをコンポーネントに入力として渡します。

コンポーネント例

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<h1>Hello, {{ name }}!</h1>`
})
export class MyComponent {
  @Input() name: string;
}

このコンポーネントは、name プロパティを受け取り、それを <h1> タグ内に表示します。

コンパイル後のコード

コンパイラは、上記のテンプレートとコンポーネントを、以下の JavaScript コードに変換します。

// app-my-component.component.js
(function (exports) {
  var __decorate = (this && __decorate) || function (decorators, target, key, value) {
    if (typeof decorators === "undefined") {
      return target;
    }
    if (typeof target === "undefined") {
      throw new TypeError("Invalid target");
    }
    if (typeof key === "undefined") {
      key = "";
    }
    if (value === undefined) {
      value = null;
    }
    var decorate = decorators.slice().reverse();
    return decorate.reduce(function (a, b) {
      return b(a);
    }, target);
  };
  var __metadata = (this && __metadata) || function (target, key, value) {
    if (typeof decorators === "undefined") {
      return;
    }
    var d = decorators.slice();
    for (var i = 0; i < d.length; i++) {
      var decorator = d[i];
      if (typeof decorator === "function") {
        decorator(target, key, value);
      } else {
        decorator.value(target, key, value);
      }
    }
  };
  function MyComponent() {
  }
  MyComponent.ɵfac = function MyComponent_Factory() {
    return new MyComponent();
  };
  MyComponent.ɵcmp = __decorate([
    Component({
      selector: 'app-my-component',
      template: '<h1>Hello, {{ name }}!</h1>'
    }),
    __metadata([
      Component, {
        selector: 'app-my-component',
        template: '<h1>Hello, {{ name }}!</h1>'
      }
    ])
  ], MyComponent);
  exports.MyComponent = MyComponent;
})(window.AppMyComponent || (window.AppMyComponent = {}));