2月16日、Angularが新バージョンv17.2をリリースした。今回のアップデートは、マイナーバージョンアップではあるが、新しい機能や大きめの改善が加えられている。

Material 3の実験的なサポート

Angular v17.2では、マテリアルデザイン3への実験的なサポートが追加された。詳細はMiles Malerbaのブログ投稿を参照のこと。

シグナルクエリとモデルインプット

Angularは開発者エクスペリエンスの向上に焦点を当て、新しいリアクティビティモデルを導入した。今回のアップデートでは、シグナルベースのクエリとモデルインプットが追加され、開発者はこれを利用してより効率的なコードを記述できるようになる。

シグナルクエリ

シグナルクエリは、Angularが提供するオリジナルのAPIに比べて、より優れた型安全性を持つ新しいAPIだ。これにより、値が時間とともに変化する状態を表現できる。

@Component({
  template: `
    <div #el>element to query</div>
  `
})
export class App {
  // 戻り値はSignal<ElementRef<HTMLDivElement> | undefined>
  divEl = viewChild<ElementRef<HTMLDivElement>>('el');

  // 戻り値は Signal<ElementRef<HTMLDivElement>> であり、シグナル値がundefinedでないことが保証される
  divElReq = viewChild.required<ElementRef<HTMLDivElement>>('el');

  // 戻り値は Signal<readonly ElementRef<HTMLDivElement>[]>
  divEls = viewChildren('el');
}

モデルインプット

モデルインプットは、読み取り専用のシグナルインプットに対して、書き込み可能なシグナルを提供し、親子コンポーネント間で状態を共有するためのAPIだ。

@Component({
  selector: 'custom-checkbox',
  template: `
    <div class="cool-checkbox-treatment">
      <input type="checkbox" (click)="toggle()" [value]="checked()">
    </div>
  `
})
export class CustomCheckbox {
  protected checked = model(false);
  toggle() {
    this.checked.set(!this.checked());
  }
}

これにより、シグナルを使用した双方向データバインディングが実現される。

Angular DevToolsにおけるハイドレーションのデバッグをサポート

Angular DevToolsにおけるハイドレーションのデバッグ機能が向上し、異なるデータや手動のDOM操作に起因するDOMの不一致エラーをより簡単にデバッグできるようになる。これにより、クライアントとサーバー間で異なるデータがある場合や手動のDOM変更が行われた場合に、エラーを効果的に解決できる。

NgOptimizedImageディレクティブの改善、Netlifyとの統合も可能に

NgOptimizedImageディレクティブは、srcsetの自動的な設定を始めとして、画像読み込みのパフォーマンスを向上する。また、画像ローダーを明示的に指定することもできる。

v17.2からは、 provideNetlifyLoader を使用してNetlifyとの統合においても、画像読み込みの最適化を行えるようになった。詳細はloaderおよびimage directiveのドキュメントを参照していただきたい。

NgOptimizedImageが画像プレースホルダーを自動的に追加

NgOptimizedImageを使用している場合、画像の読み込み中に表示するプレースホルダーを簡単に追加できる。画像にplaceholder属性を追加するだけで、画像ディレクティブは自動で画像の小さなバージョンをリクエストし、それをぼかして表示し、完全な画像が準備できるまでそのプレースホルダーを表示する。

画像ローダーを使用していない場合でも、新しいプレースホルダー機能はインラインのbase64画像プレースホルダーもサポートしているため、どんなアプリケーションでも使用できる。

その他の新機能

今回のアップデートにはこれ以外にも、Angular CLIの新しいサポートやVite開発サーバーの制御、カスタムPostCSS構成のサポートなど、さまざまな新機能が含まれている。

• Angular CLI が Bunのパッケージマネージャをサポート するように
• Viteの開発用サーバーにおけるプレバンドリングをコントロール可能に
• アプリケーションビルダーにおけるPostCSSのカスタムコンフィギュレーションをサポート
• …

詳細はAngular v17.2 is now availableを参照していただきたい。