Zenn
🚀

Angular v19リリース：スタンドアロンコンポーネントのデフォルト化とSignalsの安定版への移行

に公開
Angular
TypeScript
frontend
tech

Angular v19がリリースされました！

Angularチームは、ここ数回のリリースでスタンドアロンコンポーネントやSignalsの導入に力を入れてきましたが、v19ではついに大きな転換点を迎えました。個人的には、この変更はAngularの開発体験を大きく向上させるものだと思っています。

スタンドアロンコンポーネントがデフォルトに

これまで、スタンドアロンコンポーネントを作る時は必ず standalone: true を指定する必要がありました。正直、これが面倒で仕方なかったんですよね。

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  standalone: true,  // これが必須だった
  imports: [CommonModule, FormsModule]
})
export class ExampleComponent {}

v19からは、これが不要になりました！すべてのコンポーネントがデフォルトでスタンドアロンになります。

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
  imports: [CommonModule, FormsModule]
})
export class ExampleComponent {}

これで、NgModuleベースのコードからスタンドアロンコンポーネントへの移行がより簡単になりました。移行ツールも提供されているので、既存のプロジェクトも安心して移行できます。

Angular Signalsが安定版に

Signal-Based Reactivity最高！！と言い続けてるんですが、ついに signal と computed が開発者プレビューから安定版へと移行しました。これで本番環境でも安心して使えます。

さらに、以下のSignal APIも本番環境で使用可能になりました：

  • input
  • model
  • output
  • viewChild
  • viewChildren
  • contentChildren
  • contentChild

例えば、以下のようにSignalベースの入力を定義できます：

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  // Signalベースの入力
  count = input(0);
  
  increment() {
    // 新しい値を設定
    this.count.set(this.count() + 1);
  }
}

新しい実験的なAPI

v19では、新しい実験的なAPIとして linkSignal と resource が導入されました。これらはまだ実験段階ですが、個人的にはかなり期待しています。

linkSignal は、算出された式にリンクされたローカルな状態を作成するために使用できます。これにより、計算された値に基づいて状態を管理することが容易になります。

resource は、サーバーからのデータのような非同期の値を扱うためのSignal APIです。これにより、非同期データの取得と管理がより簡単になります。

Angular Materialの大幅なアップデート

Angular Materialも大きなアップデートを受けました。特に注目すべきは、全く新しい mat.theme APIの導入です。

新しいテーマシステム

新しいテーマシステムは大幅に簡素化されました。以前は多くのコードが必要だったテーマ設定が、mat.themeへの1回の呼び出しで済むようになります。

// 以前のテーマ設定
@use '@angular/material' as mat;
@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

@include mat.all-component-themes($my-theme);

// 新しいテーマ設定
@use '@angular/material' as mat;
@include mat.theme();

コンポーネントスタイルのオーバーライド

Angular Materialコンポーネントを変更したい開発者向けには、mat-theme-override mixinを使用した新しいAPIが提供されています。

@use '@angular/material' as mat;

@include mat.theme();

// ボタンのスタイルをオーバーライド
@include mat.theme-override() {
  .mat-mdc-button {
    border-radius: 24px;
  }
}

Time pickerの追加

また、待望の Time picker が追加されました。これで時間選択のためのUIコンポーネントが標準で提供されるようになりました。

インクリメンタルハイドレーション

v19の重要な新機能としてインクリメンタルハイドレーションが導入されました。これは、Angularの次世代ハイドレーション技術です。

インクリメンタルハイドレーションでは、サーバー側でメインテンプレートをレンダリングし、クライアントに送信する際には非ハイドレート状態のままにすることができます。その後、開発者のロジックに基づいて、テンプレートの一部を動的にハイドレートできます。

@Component({
  template: `
    <header>静的なヘッダー（ハイドレートされない）</header>
    
    @defer (on viewport) {
      <app-interactive-component></app-interactive-component>
    }
    
    @defer (never) {
      <app-static-content></app-static-content>
    }
    
    <footer>静的なフッター（ハイドレートされない）</footer>
  `
})
export class AppComponent {}

これにより、静的なコンテンツのオーバーヘッドを削減でき、パフォーマンスが向上します。

まとめ

Angular v19は、開発者体験を大きく向上させるアップデートです。スタンドアロンコンポーネントのデフォルト化、Signalsの安定版への移行、新しい実験的なAPI、Angular Materialの改善、そしてインクリメンタルハイドレーションの導入により、Angularはより強力で使いやすいフレームワークになりました。

個人的には、特にSignal-Based Reactivityの安定版への移行が嬉しいですね。これで本番環境でも安心して使えます。

それではまた。

Discussion