Angular v22.0.0

この変更が意味すること

Angular v22.0.0 が正式リリースされました。Angular フレームワーク初のメジャーバージョンアップとなる今回は、コンパイラに機能追加と重要な動作変更が含まれています。

最も注目すべき変更は optional chaining（?.）の戻り値を undefined に統一 したことです。これまで Angular テンプレート式内では ?. がケースによって null を返す場合がありましたが、JavaScript の仕様（?. は undefined を返す）に準拠するよう修正されました。この変更は既存テンプレートコードに影響する可能性があり、アップグレード前の動作確認が必要です。

合わせて、TypeScript の型推論と連携した 安全ナビゲーション演算子の nullable ナローイング改善 と、HTML テンプレート内でのコメント記述サポート も追加されました。

主な変更点

optional chaining が undefined を返すよう変更（compiler）

Commit: 2896c93cc1

Angular テンプレート式内の ?. 演算子が、JavaScript 仕様に準拠して undefined を返すよう変更されました。

<!-- Before: someObj?.value が null を返す場合があった -->
<!-- After: someObj?.value は必ず undefined を返す -->
{{ someObj?.value === null ? 'null' : someObj?.value }}
<!-- ↑ このチェックが動作しなくなる可能性あり -->

<!-- 修正例 -->
{{ someObj?.value == null ? 'nullish' : someObj?.value }}

影響を受けるコード:

• === null で optional chaining の結果を厳密チェックしているテンプレート
• someObj?.prop !== null による null 排除ロジック

対応方針: == null（ゆるい等価）への統一か、=== undefined を追加したチェックへの修正を検討してください。TypeScript の strict null check が有効な環境では、コンパイラがエラーを検出してくれる場合があります。

安全ナビゲーション ?. の nullable 型ナローイング改善（compiler）

Commit: 47fcbc4704

?. 演算子使用後の TypeScript 型推論が正しく機能するようになりました。これまで ?. の結果が nullable として正確に型ナローイングされないケースがありましたが、今回の修正でより正確な型情報がテンプレートに渡されます。

型エラーが減少し、@angular/language-service による IDE サポートの精度も向上が期待されます。

HTML テンプレート内コメントサポート（compiler）

Commit: e850643b1b

Angular テンプレートの HTML 要素内でコメントを記述できるようになりました。

<!-- 要素内コメントが可能になった -->
<div>
  <!-- このコメントが有効になった -->
  {{ someValue }}
</div>

dynamic import の abstract emitter コード生成修正（compiler）

Commit: 96be4f429b

動的インポート（import()）に対して abstract emitter が不正なコードを生成していたバグを修正。遅延ロードを多用するアプリケーションで発生していた潜在的な問題が解消されます。

EOL / サポート状況

Angular 19 は 2026年5月19日に EOL を迎えています。今回の v22.0.0 リリースを機に、21 または 22 へのアップグレードを計画してください。Angular 20 の EOL は 2026年11月28日。引き続きサポート対象ですが、長期運用する場合は 22 への移行を視野に入れてください。

開発者への影響

1. optional chaining 利用者: テンプレート内で ?. の結果を === null で厳密チェックしている箇所を洗い出し、== null か === undefined に変更が必要
2. TypeScript strict モード利用者: nullable ナローイングの改善により、これまで型エラーが出ていた箇所が解消される場合がある
3. テンプレートコメント利用者: HTML 要素内コメントが使えるようになり、テンプレートのドキュメント化が容易に
4. 遅延ロード（dynamic import）利用者: abstract emitter の修正により、潜在的なコード生成バグが解消
5. Angular 19 以下の利用者: EOL を迎えているため、22 へのアップグレードを推奨

アップデート方法

# Angular CLI 経由（推奨）
ng update @angular/core@22 @angular/cli@22

# npm
npm install @angular/core@22.0.0 @angular/cli@22.0.0

# yarn
yarn add @angular/core@22.0.0

# pnpm
pnpm add @angular/core@22.0.0

アップグレード後、テンプレート内の optional chaining 使用箇所を重点的に確認してください。Angular 19 以下からのアップグレードは、バージョンを一段ずつ上げる（19→20→21→22）ことを推奨します。

データソース: GitHub Releases API, endoflife.date, npm Registry AI解説は Claude API により自動生成されています。正確性については原文をご確認ください。