編集

Angular 20 リリース

#Angular

Angular 20 が正式リリース。Signals API の安定化、zoneless 変更検知の開発者プレビュー、インクリメンタルハイドレーションの安定化が主要な変更点。開発者体験の向上と公式マスコットの検討も開始。

出展：Announcing Angular v20

#Signals API の安定化

effect、linkedSignal、toSignalが安定版に昇格。Angular 16 で導入された Signals API がより成熟。

typescript
import { signal, computed, effect } from "@angular/core";

@Component({
  template: `{{ fullName() }}`,
})
export class UserComponent {
  firstName = signal("John");
  lastName = signal("Doe");
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  constructor() {
    effect(() => console.log("Name changed:", this.fullName()));
  }
}

#Zoneless 変更検知の開発者プレビュー

Zone.js なしでの変更検知が開発者プレビューに昇格。SSR でのエラーハンドリングも改善。

typescript
import {
  provideZonelessChangeDetection,
  provideBrowserGlobalErrorListeners,
} from "@angular/core";

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection(),
    provideBrowserGlobalErrorListeners(),
  ],
});

#実験的な Resource API と httpResource

非同期状態管理のための Resource API と HTTP リクエスト向けの httpResource が実験的機能として追加。

typescript
const userResource = httpResource<User>(
  () => `https://api.example.com/users/${this.userId()}`
);

// テンプレートで直接使用
@Component({
  template: `{{ userResource.value() | json }}`,
})
export class UserProfile {}

#Chrome DevTools との統合

Angular 固有のプロファイリング情報が Chrome DevTools の Performance パネルに直接表示される機能を追加。

javascript
// DevToolsでAngularプロファイリングを有効化
ng.enableProfiling();
編集