2026年も半ばを過ぎ、今年のフレームワーク予測のレビューが促されています。 専門家は、2026年のAngular予測のうち、どれが実現したかを確認するために再評価しています。 AI支援ツールは、Model Context Protocolを通じてAngular開発を変革しています。 この進歩により、ツールは基本的なスキャフォールディングを超えてワークスペースを理解できるようになります。 Angular v21の迅速な要約と、AIが古いAngularコードを記述する傾向に対処するビデオが利用可能です。 最新のAngular機能とベストプラクティスに関する無料の包括的なコースがリリースされました。 開発者は、Angularアプリがゾーンレスアーキテクチャに対応しているかどうかを確認できるようになりました。 ゾーンレスへの移行は、高性能Angularアプリケーションにとって重要なステップです。 Signalsの導入は、Angular開発における主要なアーキテクチャシフトとして強調されています。 ポッドキャストのエピソードでは、リアクティブプログラミングのためにSignalsを効果的に採用する方法について議論しています。

Angularはバージョン22をリリースし、安定性と開発者体験に重点を置いています。このアップデートでは、Signal Forms、Angular Aria、Asynchronous Reactivity APIsの3つの重要な機能が本番環境対応となりました。Signal Formsは、フォーム構築のためのコンポーザブルでリアクティブなソリューションを提供し、現在は完全なドキュメントとコミュニティからのフィードバックに対応しています。Angular Ariaは、アクセシブルなプリミティブを提供し、包括的なWebアプリケーションの構築を支援し、APIとテストハーネスが安定化されました。新しいresourceとhttpResourceを含むAsynchronous Reactivity APIsは、開発者がシグナル内で非同期プログラミングを活用してデータ取得を改善できるようにします。 このリリースでは、コード作成とAI開発プラットフォームのためのエージェンティックなツールの導入により、AI開発におけるAngularの役割も強調されています。これには、エージェントが開発サーバーとより良く対話するための更新されたModel Context Protocol (MCP) ツールと、AIエージェントに最新のAngular開発に関するコンテキストを提供するAngular Agent Skillsが含まれます。WebMCPの実験的なサポートも含まれており、ブラウザ内でのエージェント対話のための構造化されたツール公開が可能になります。さらに、AngularはGoogle AI StudioやGemini CanvasのようなAI開発プラットフォームを強化し、フレームワークの強みを活かしてビルダーを支援します。開発者はブラウザで直接プロトタイプを作成し、簡略化されたプロンプティングを使用してAngularアプリを生成できます。これらの進歩は、次世代のWebアプリケーションを構築するための堅牢な基盤としてAngularを位置づけることを目指しています。

このテキストは、実践的な学習体験を提供するいくつかのAngularリポジトリを紹介しています。Antonio Cardenasは、ViewContainerRefを使用した高度な動的コンポーネント作成を紹介し、コードリポジトリとStackBlitzデモを提供しています。また、迅速なCRUDプロジェクト開始のための「Vibe Coding」テンプレートも提供しています。Deborah Kurataは、「Pirates」の例でSignalベースのhttpResourceを紹介しています。Ankit Sharmaは、リアルタイムの文法修正のためにGoogle Geminiを統合したAngularアプリをデモンストレーションしています。これらの例は、最新のAngularパターンを学習し、AIアシスタンスを統合するのに最適です。リポジトリは、動的コンポーネント、CRUD、リアクティブプリミティブを使用したデータ取得などのトピックをカバーしています。これらのリソースは、初心者と経験豊富なAngular開発者の両方を対象としています。テキストは、Angularコミュニティに独自のプロジェクトを共有することを奨励しています。開発者は、関連するハッシュタグを使用してリポジトリとStackBlitzデモを共有するように促されています。コラボレーションと共有は、コミュニティの成長を促進するために強調されています。テキストは、コードの探索と実践的なプロジェクトを通じた実践的な学習を促進しています。

開発者である著者は、育児休暇から復帰し、AIの状況、特にエージェントスキルが急速に変化していることに気づきました。AIエージェントへの一連の指示であるエージェントスキルは、以前のプロジェクトであるAngular AI Tutorを再考するきっかけとなりました。このTutorは、Angularをインタラクティブに教えるもので、当初はシンプルなルールファイルとGeminiを使用して構築されました。しかし、インタラクティブな製品へと進化するにつれて、レッスンの一貫性と構文の最新性という課題に直面しました。Tutorのロジックは密接に結合されており、再利用が難しく、更新も困難でした。提案された解決策は、Router + Building Blocksアーキテクチャであり、Tutorのためのモジュール化された再利用可能なコンポーネントを作成することを目的としていました。著者は現在、エージェントスキルが、このContext Pipeline Engineeringのビジョンを実現するための潜在的な手段であると考えています。著者は、これらのシステムの拡張性、信頼性、トークン最適化、安定性について疑問を抱いています。最終的に、著者はAIエンジニアリングに関するより深い、構造的な問題について考察しています。著者はこの分野をContext Pipeline Engineeringと呼び、他の人々もこの探求に参加することを呼びかけています。記事は、著者が仕事に復帰し、新しいものを構築することへの興奮で締めくくられています。

Angularコミュニティは、AIとアクセシビリティにおいて革新を進めています。開発者たちは、よりスマートで美しいアプリケーションを構築する方法を模索しています。Fanis Prodromou氏は、Angular Signal FormsとカスタムCSSを使ったフォーム状態の自動スタイリングを実演しました。Daniel Herrera Sanchez氏は、AngularとGemini 3.0で構築された認知トレーニングアプリ「Mind Palace AI」を紹介しました。Mariano Alvarez氏は、AngularプロジェクトでGemini CLIを使用する際のAIハルシネーションを減らすためのガイダンスを提供しました。彼はまた、ChromeのAI機能を使用して、Angularアプリケーション内でGeminiをローカルで無料で実行する方法を説明しました。Connie Leung氏は、Google Nano BananaとFirebase AIを活用した写真編集アプリのコードサンプルを共有しました。彼女はまた、アクセシビリティのためにGemini 2.5 Flash TTSを使用したAI Alt TextおよびText-to-Speechジェネレーターを発表しました。これらの例は、画像処理とテキスト読み上げ機能の進歩を強調しています。開発者の皆様には、#AngularSparklesと#AngularAIを使用して、AIとアクセシビリティに関するプロジェクトを共有することを推奨します。

今週は、コード例を通して実践的なAngular学習に焦点を当てます。いくつかのリポジトリは、モダンなAngularパターンとGoogle Geminiの統合を示しています。あるリポジトリでは、スケーラビリティのためにViewContainerRefを使用した高度な動的コンポーネント作成を紹介しています。別のリポジトリは、プロジェクト開発を加速するためのすぐに使えるCRUDテンプレートを提供しています。データ管理のために、「Pirates」の例を通してSignalsベースのhttpResourceが紹介されています。AI搭載の文法アシスタントアプリは、リアルタイムの修正のためにGoogle Geminiを統合しています。これらの実践的な例は、AngularアプリケーションにAIを組み込むための設計図を提供します。開発者は、自身のGeminiおよびhttpResourceプロジェクトを共有することが奨励されています。著者は、個人のプロジェクトを紹介するために指定されたハッシュタグを使用することを他の人に勧めています。この共同アプローチは、Angularコミュニティの学習を向上させます。これらの例は、学習と構築に最適です。提供されているGitHubリンクから、コード実装を直接探索できます。

Angularコミュニティは、従来のブラウザ環境を超えた進歩を積極的に探求しています。Sonu Kapoorは、プライバシーの向上とレイテンシの削減のためにONNXを活用し、AIモデルをフロントエンドでローカルに実行することを強調しています。このアプローチは、クライアントサイド処理への大きなアーキテクチャシフトを示唆しています。Kapoorはまた、レスポンシブな入力を作成し、複雑なルーティングを管理するためのAngular Signalsの使用ガイドも提供しています。Fanis Prodromouは、Signalsの進化とAngular開発への影響を検証する回顧録を提供しています。Kevin Davilaのシリーズは、Signal Forms APIを使用してカスタムフォームコントロールを構築することに焦点を当てています。Johannes Hoppeは、AngularテストスイートをVitestに移行するための包括的なガイドを提供しています。Vitestへのこの移行は、そのパフォーマンス上の利点から推奨されています。提供されているリソースは、ドイツ語と英語の両方の話者向けにガイダンスを提供しています。コミュニティは、彼らの経験と洞察を共有することが推奨されています。コラボレーションを促進するために、#AngularSparklesと#Vitestの使用が推奨されています。

Angular開発は、新しいツールやテクニックによって急速に進化しています。専門家たちは、開発者がこれらの変化に遅れないようにするためのリソースを共有しています。ダニエル・ヘレラ・サンチェスは、コードを自動化するために、CursorやClaudeのようなAIツールをModel Context Protocol (MCP) と共に使用する方法を探求しています。彼はまた、アプリのパフォーマンスを最適化するために `@defer` 構文を使用するチュートリアルも提供しています。アリサ・ダンカンは、Angular 21のMCPツールキット内の、安定版と実験版の両方を含む、必須ツールについて詳しく説明しています。ダミアン・サイアーは、AngularのMCPサーバーを実験的に使用し、AIを使って複雑なパターンを生成する「Vibe Coding」を試しています。モデスト・アシオンボンは、フォームロジックの改善点を強調し、コードの可読性を向上させるためのプレーンオブジェクトバリデーターへの移行を紹介しています。その後、Angularにおける最新のフォーム状態管理へのリアクティブなアプローチであるSignal Formsのガイドを提供しています。これらのリソースは、最新のAngularトピックを幅広くカバーしています。コミュニティは、AngularにおけるAIとMCPに関する経験を共有し、さらなるイノベーションを促進することが推奨されています。この進歩は、Angular開発ワークフローの継続的な近代化を象徴しています。

Google AI Studio が Angular アプリケーションの生成をサポートするようになりました。この連携は、Gemini の AI パワーを Angular 開発者コミュニティにもたらすことを目的としています。開発者は、AI Studio の「Build」タブからこの機能に無料でアクセスできます。Angular コードを生成するには、まず詳細設定で「Angular (TypeScript)」フレームワークテンプレートを選択する必要があります。テンプレートを選択した後、ユーザーは希望するアプリケーションのプロンプトを入力できます。Gemini は、提供されたプロンプトに基づいて Angular アプリケーションを生成します。この統合により、アプリケーションのプロトタイピングと開発が大幅に加速され、初期のタイムラインが数週間から数日に短縮されます。コード生成に加えて、AI Studio では Gemini API を活用した AI パワードアプリの構築も可能です。生成されたアプリケーションは、サーバーレス環境のために Cloud Run に簡単にデプロイできます。コードは GitHub にエクスポートして、バージョン管理や共同作業を行うこともできます。生成されたアプリケーションをフィードバックや概念実証のために共有することも効率化されます。開発者の皆様は、goo.gle/angular-ai-studio でこの新機能を試して、#AngularInAIStudio を使用して作品を共有することをお勧めします。

Angularチームは、AI主導のWebコード生成を強化するために、Web Codegen Scorerツールを導入しました。このツールは、Angularの現在のフレームワークの状態に合わせてLLMを最適化し、進化するアプリケーション機能の統合を支援します。一般的なLLMの失敗を分析およびデバッグするのに役立ち、改善のイテレーションを迅速化します。Web Codegen Scorerは、AI、セキュリティ、アクセシビリティの専門家と協力して開発され、堅牢な評価を実現しました。AngularはSolidJSチームとも協力し、このツールが他のフレームワークのコード生成を改善する可能性を示しました。このツールはオープンソース化されており、コミュニティの貢献とより広範なフレームワークの採用を奨励しています。Angular v20.2には、コーディングエージェントに開発セッション用の組み込みツールを提供するAngular MCP Serverが含まれています。将来のMCPサーバー機能には、構文移行のためのモダナイゼーションツールと、最新のAI情報のためのローカルRAGエンジンが含まれます。Angularサポートは、GoogleのAI製品であるGemini CanvasおよびGoogle AI Studioに統合されました。チームはまた、大規模なコードベースのエージェント機能に焦点を当て、一般的なLLMの問題を最小限に抑えるAIファーストフレームワークを検討しています。彼らは、将来のAngular開発における透明性を約束し、オーサリング形式とアプリケーション構造を実験しています。Angularチームは、スケーラブルでAI搭載のアプリケーションの構築において開発者をサポートすることにコミットしています。

Angular は、開発者の生産性と AI の強化に重点を置いたマイナーアップデート v20.1 および v20.2 をリリースしました。主なハイライトは、バンドルサイズの縮小やデバッグの改善といったメリットを提供する、ゾーンレス Angular の本番稼働準備完了です。新しいアニメーションプリミティブである animate.enter および animate.leave により、ネイティブ CSS アニメーションの統合が容易になり、古い @angular/animations パッケージは非推奨となります。チームは、AI パワードアプリの構築ガイドや AI 支援コーディングツールの改善により、AI オファリングを拡大しています。 また、ドキュメント検索や LLM のベストプラクティスなどの AI ニーズをサポートする実験的な MCP サーバーにも取り組んでいます。Angular DevTools には、デバッグを改善するためのルート可視化とシグナルグラフが含まれるようになりました。コンポーネントテストは、TestBed.createComponent にバインディングオブジェクトを渡すサポートにより簡略化されました。 Mat Menu コンポーネントはコンテキストメニューとして機能できるようになり、NgComponentOutlet は動的コンポーネント用のカスタム EnvironmentInjectors をサポートするようになりました。その他の改善点としては、刷新されたルーティングガイド、新しい currentNavigation シグナル、DestroyRef の destroyed プロパティ、テンプレートオペレーターおよび ARIA 属性のサポート強化などが挙げられます。Angular は TypeScript 5.9 をサポートするようになり、httpResource および httpClient の改善が行われました。コミュニティは新しい Angular マスコットに対してかなりのフィードバックを提供しており、最終デザインは今年後半に発表される予定です。

Angular チームと Chrome チームは協力して、Angular 固有のデータとインサイトを Chrome DevTools パフォーマンス パネルに直接取り込み、開発者に統一されたプロファイリング エクスペリエンスを提供しました。この統合により、開発者は両方のツールの利点を組み合わせて、アプリケーションのパフォーマンスをより同期し、包括的に表示することができます。Chrome DevTools の Angular の新しいカスタム トラックは、アプリケーションのブートストラップ、コンポーネント、UI 同期、ライフサイクル フックなど、Angular の概念を使用してパフォーマンス データを提供します。カスタムトラックのフレームチャートは、対応するコンポーネントやその他のAngularの概念の下に関数の呼び出しをグループ化し、開発者が個々の関数にドリルダウンしてより詳細なビューを表示できるようにします。フレーム チャートのエントリは色分けされているため、開発者はアプリケーションで何が起こっているかをすばやく特定し、アプリケーション コード、他のスクリプト、またはブラウザー アクティビティを区別できます。色は、Dependency Injection サービス、Angular によってコンパイルされたテンプレート、エントリポイントなど、アプリケーションのさまざまな側面を表しています。カスタムトラックはインタラクティブで、開発者はフレームチャートのエントリをクリックして、特定のエントリに関するより詳細な情報を表示することができます。開始するには、開発者は最新バージョンの Angular と最新バージョンの Chrome を使用していることを確認し、Angular アプリケーションを開発者モードで実行し、コンソールで ng.enableProfiling() と入力してカスタムトラックを有効にする必要があります。この統合は、Angularエコシステム内の開発者エクスペリエンスを向上させるという継続的な取り組みを示しており、開発者はより高速で効率的なアプリケーションを構築できます。

Angularは過去2年間に大きな進歩を遂げており、シグナルによるリアクティビティーとゾーンレスアプリケーションを含む。最新のリリースであるAngular v20は、開発者の体験を向上させるために進行中の機能を磨き上げています。リリースでは、effect、linkedSignal、toSignalなどのAPIを安定化し、ゾーンレスを開発者プレビューに昇格させています。また、Angular DevToolsでのデバッグを改善し、Chromeとのパートナーシップを通じてChrome DevToolsでのカスタムAngularレポートを直接提供します。リリースでは、スタイルガイドの更新、型チェック、言語サービスサポートなどを通じて開発者の体験を磨き上げています。また、GenAI開発を推進し、公式マスコットのリクエストコメントを立ち上げています。リリースでは、シグナル、computed、input、view queries APIなどのリアクティビティーフィーチャーを安定化しています。また、resource APIやhttpResourceなどの実験的APIを導入し、Angularでの非同期状態の管理に取り組んでいます。また、ゾーンレスを開発者プレビューに昇格させ、サーバー上でのAngularをインクリメンタルハイドレーションやルートレベルレンダーモード構成で固めています。最後に、Chrome DevToolsでのパフォーマンスインサイトやフレームワークの追加や改善を通じて開発者の体験を磨き上げています。

AIアプリケーション構築のためのフレームワークである「Genkit 1.0」が、Node.jsとGoで利用可能になり、本番環境に対応したAI統合を実現します。サーバーサイドでの使用を想定して設計されており、オープンソースのライブラリと開発者ツールを提供します。Angular開発者は、Node.jsバックエンドを介してGenkitを活用し、GenkitのAPIをサーバーサイドのコードに統合できます。シンプルな例として、Gemini 2.0 Flashなどのモデルに接続してテキストを生成する方法が示されています。ユーザーエクスペリエンスを向上させるために、GenkitのstreamFlow APIはストリーミング応答を可能にし、「AIタイピング」効果を生み出します。サーバーサイドフローは、GenkitのdefineFlow APIとZodスキーマを使用した構造化された応答を使用して定義されます。Genkit CLIとDeveloper UIは、AIインタラクションのテスト、デバッグ、および観察のためのツールを提供します。Genkitは、マルチターン会話、ツール利用、およびヒューマンインザループワークフローなどのさまざまな機能をサポートしています。AI統合を簡素化することで、Genkitは、AngularとFirebaseを使用して革新的なAI搭載のWebアプリケーションを構築することを開発者に可能にします。詳細情報とアップデートは、angular.devおよびfirebase.google.com/docs/genkitで入手できます。

Angularは、非同期操作の結果をシグナルとして公開できる実験的な `resource()` API を含む、新しいAPIを導入します。`httpResource` API は `resource` プリミティブを基盤とし、ローダーとして `HttpClient` を使用することで、HTTPリクエストを容易にします。`httpResource` は `@angular/common/http` のフロントエンドとして機能し、インターセプターを含む Angular HTTPスタックを介して HTTPリクエストを行います。デフォルトでは、`httpResource` は GET リクエストを実行し、不明な型付けされた JSON レスポンスを返します。`HttpClient` とは異なり、リクエストを積極的に開始し、リクエスト計算内のソースシグナルが変更されると、新しい HTTP リクエストが作成されます。`httpResource` は、`HttpClient` のリクエストと同様のリクエストオブジェクトを定義することで、高度なリクエストを可能にします。この API には、テキスト、blob、arrayBuffer などの他のレスポンスタイプに対応した専用メソッドが用意されています。`httpResource` は、`value`、`status`、`error`、`isLoading`、`headers`、`statusCode`、`progress` を含むいくつかのシグナルを公開します。`httpResource` は、Zod や Valibot などのスキーマ検証ライブラリとの直接的な統合を提供し、型安全性を実現します。`httpResource` は Angular v19.2 の実験的な API として利用可能であり、まだ本番環境での使用には適していませんが、開発者は試してフィードバックを提供することが推奨されています。

Angularはバージョン19.2をリリースしました。このバージョンには、開発体験を向上させるための新しいAPIや実験的な機能が含まれています。このリリースでは、httpResourceやrxResource APIを使用した非同期リアクティビティの導入により、同期操作を超えたリアクティビティを拡張します。resource APIを使用すると、開発者はシグナルを活用しながら非同期データソースとやり取りできます。httpResource APIは、シグナルを使用したリアクティブな方法でHTTPを介してデータを取得するための低摩擦の方法を提供します。rxResource APIは、複数のレスポンスをストリーミングすることをサポートし、複数の値がエンドポイントから返されるシナリオで役立ちます。Angularテンプレートも、文字列の連結やエスケープを容易にするため、アンタグ付きテンプレートリテラル式のサポートが追加されました。その他の更新には、新しい移行が含まれており、セルフクロージングタグへの変換やフォームでのSet型のサポートが含まれます。Angularチームは、リソースAPIに関するフィードバックをリクエストフォーコメントを通じて求めています。Angular v19.2は、開発者が更新して素晴らしいアプリを構築し始めることができるようになりました。新しい開発者は、angular.dev/tutorialsを訪れてAngularで構築を開始できます。

エンタープライズスケールのソフトウェアシステムは、複数のクロスファンクショナルチームによって実装されることが多く、这些チームが新しい機能を効率的に提供するために、チーム間での調整の必要性を最小限度に抑えることが望ましい。このため、システムを垂直方向に低結合の領域にモジュール化し、各チームが個別に担当することが必要となる。マイクロフロントエンドは、高度なチームの自律性など多くの利点を約束するアーキテクチャスタイルだが、多くの課題も伴う。 マイクロフロントエンドでは、個別のビルドプロセスが必要になり、インクリメンタルビルドとの組み合わせによりビルド時間を改善することができる。この機能は、マイクロフロントエンドの他のアスペクト（例えば、チームと個別のアプリケーションを合わせる、個別のデプロイメント）を適用せずに使用することもできる。しかし、個別に開発されたマイクロフロントエンドは、UI/UXが一致しなくなり、不一致な外観を生じることがあり、複数のアプリケーションを読み込むと、バンドルのダウンロード数が増加し、ロード時間が長くなり、メモリーの圧力が高まる。 アプリケーションを低結合の部分に分割することは、一般的にベストプラクティスだが、垂直方向の境界を明確に定義し、個別のアプリケーションとして実装することは、しばしば困難である。包括的なソリューションに統合することで追加の複雑さが生じ、コンパイル時統合からランタイム統合に移行することは、深刻な結果を生じる。 Angularチームは、マイクロフロントエンドの代替として、モノレポジトリに個別の垂直方向を実装することを検討することを推奨している。しかし、マイクロフロントエンドの欠点を補う方法もあり、例えば、デザインシステムを設立して一貫したUI/UXを実現する、または、個別のシステムパーツをレイジーロードすることである。 ネイティブフェデレーションは、Angular CLIとの緊密な統合を提供し、Angularを使用してマイクロフロントエンドを実装することを可能にするコミュニティプロジェクトである。これにより、アプリケーションが個別にビルドおよびデプロイされた他のアプリケーションのパーツをレイジーロードし、AngularやRxJSなどの依存関係をホストとリモート間で共有することができる。 ネイティブフェデレーションの設定には、スキーマティックが提供され、ネイティブフェデレーションのビルダー委任をアプリケーションビルダーに設定し、federation.config.jsという構成ファイルを作成する。この構成では、リモートやホストに一意の名前を割り当て、共有する依存関係を定義する。リモートでは、エクスポーズされたEcmaScriptモジュールを定義し、シェルにロードすることができる。 スキーマティックは、main.tsにネイティブフェデレーションの初期化コードを追加し、リモートがエクスポーズするコンポーネントやルーティング構成をロードするために、伝統的なレイジーロードとネイティブフェデレーションのloadRemoteModule関数を組み合わせる。

アングラー チームは、過去 2 年半にわたり、開発者体験とパフォーマンスの向上に注力してきました。急速に進化するテクノロジー業界のため、チームは長期的なビジョンを定義し、年間、四半期、リリースベースで作業を計画し、変化する要件に適応するための柔軟性を維持しています。チームは、開発者のニーズについての仮定を検証するために、年次開発者調査を使用しており、2024 年には 1 万件以上の回答が集まりました。調査結果は、開発者の 79% が Angular の最新の 2 つのメジャーバージョンを使用しており、90% がスタンドアローン コンポーネント、ディレクティブ、パイプを使用していることを示しています。 結果は、開発者の全体的な満足度が向上したことも示しています。開発者の約 90% がフレームワークに対する満足度を報告しています。チームは、スタンドアローン コンポーネント、組み込みの制御フロー、遅延可能なビューなどの改善が満足度の向上に貢献したと判断しました。ただし、コンポーネントの作成形式とテストは、改善が必要な重要な分野です。 2025 年、チームは開発者体験の向上、最新の改善の導入、パフォーマンスの最適化など、Angular 開発者が成功するための重要な分野に投資することに重点を置きます。2025 年の注目すべきプロジェクトには、開発者プレビューへのゾーンレスのプロモーション、シグナルベースのフォームの導入、Karma の代替となる新しいデフォルトのテスト ランナーの導入などがあります。チームはまた、Angular のドキュメントを最新のベスト プラクティスに合わせて進化させ、Web 開発者が目標を達成するのに役立つ機能の可視性を高める予定です。

Angular チームは、デコレーター ベースの入力から新しいシグナル API への移行を支援するための新しい移行を導入しました。シグナル入力は、デコレーター ベースの入力と同等の機能を維持しながら入力機能を更新します。主要な更新理由の 1 つは、型安全性です。これにより、開発者は脆弱なコード パターンを削除できます。シグナル入力は、入力の監視も簡単にします。この新しい API を使用して、ngOnChanges ライフサイクル フックを使用して入力の更新を追跡するコードをリファクタリングできます。移行は、Angular CLI または VSCode のコード リファクタリング アクションを介して実行できます。ツールは、@Input 宣言を更新し、入力への参照を調整し、必要に応じて変数を導入します。移行は、コードの移行戦略を選択するためのオプションを備えており、設定可能です。Angular チームは、新しいリアクティブ モデルのビジョンを実現するために前進し続けることを楽しみにしています。新しいシグナル API は、Angular 開発者のための精神モデルを簡略化し、状態同期とフローの推論を容易にする予定です。

過去2年間、Angularチームは、すべてのリリースで開発者エクスペリエンスとパフォーマンスの向上に重点を置いてきました。最新バージョンのv19では、インクリメンタルハイドレーション、ルートレベルレンダーモード、開発者エクスペリエンスの強化など、複数の新機能と改善が導入されています。インクリメンタルハイドレーションにより、開発者はテンプレートのどの部分をどのトリガーでロードしてハイドレーションするかを指定できるようになり、パフォーマンスが向上します。ルートレベルレンダーモードでは、個々のルートをサーバーサイドレンダリング、プリレンダリング、またはクライアントサイドレンダリングとして構成できるようになります。開発者エクスペリエンスの改善には、スタイルのホットモジュール置換、テンプレートHMRの実験的なサポート、スタンドアロンデフォルトのtrue化、厳格なスタンドアロンの適用、そして新しいテストツールのセットアップが含まれます。

Angular v19のリリースが近づいており、開発者たちは祝賀の準備をしています。Angular v19 Developer Eventは、11月19日に午前9時（太平洋時間）に開催されます。この機会を記念して、世界中でウォッチパーティーイベントが数多く開催されます。ブエノスアイレスでは、11月19日にYouTubeでライブストリーミングされるウォッチパーティーが開催されます。フランスでは、ナント、トゥール、パリで11月19日に複数の対面ウォッチパーティーが開催され、イベントブリットで登録が可能です。Angular Athensは、11月19日にDiscordでバーチャルウォッチパーティーを開催します。Angular Singapore Meetupは、11月19日に対面ミートアップを開催し、LinkedInで登録が可能です。これらのウォッチパーティーは、最新のAngular機能について学び、他の開発者とネットワークを構築し、大規模リリースについての興奮を共有するための素晴らしい機会を提供します。Angularコミュニティに接続し、新しいリリースを祝う機会を提供します。これらのイベントを逃さないように、カレンダーに11月19日を記入してください。

Angular の開発者プレビュープロセスでは、開発者は API や機能を実際に使ってテストできます。これにより、Angular チームは実際の使用状況やフィードバックに基づいてこれらの API を調整できます。effect() API のフィードバックを通じて、Angular チームは機能および開発者エクスペリエンスにおける実際の課題に対処する設計上の改善点を数多く特定しました。変更の 1 つとして、本来は良いパターンを推奨することを意図していた allowSignalWrites フラグの削除があります。しかし、このフラグは結果的に、シグナルの更新が合理的だったケースで effect() の使用を思いとどまらせていました。代わりに、Angular チームは、必要に応じて新しいリアクティビティヘルパーを追加するなど、良いパターンを促進する他の方法に焦点を当てます。エフェクトの実行タイミングも変更されており、エフェクトは検出の変更中にコンポーネント階層の一部として実行されるようになりました。この変更の目的は、エフェクトのタイミングをより予測可能で便利にし、エフェクトが早すぎたり遅すぎたりして実行されるバグを解決することです。effect API のほとんどの使用は期待どおりに引き続き機能しますが、ビュークエリ結果に対するエフェクト、および入力シグナルの toObservable() などの使用事例に影響が出る可能性があります。Angular チームは、Google でのテスト中にタイミングの変更がコードに大きな影響を与えた 100 個のケースを修正しました。これらの変更の結果、effect() API は少なくとも v19.0 まで開発者プレビューの段階にとどまり、今後のマイナーリリースで安定させる予定です。Angular チームは、コミュニティのフィードバックとサポートに感謝しています。このフィードバックとサポートが Angular の開発において重要な役割を果たしています。

Angular v19 では、コンポーネント、ディレクティブ、パイプのデフォルトが standalone: true に設定されるため、Angular コードの書き方が簡単になります。この変更は、v14 で導入されたスタンドアローン機能の成功に続くものです。このスタンドアロン機能は、ルートレベルのレイジーロードを簡単化し、コンポーネントの動作のためのより良いコンポジションモデルを提供し、テンプレートレベルでのコンポーネントとディレクティブのレイジーロードを可能にします。既存のスタンドアローンコンポーネントは、v19 の ng update の一環として standalone: true が削除されます。一方、既存の NgModule コンポーネントは、standalone: false が追加されることで、引き続き動作します。strictStandalone コンパイラーオプションを設定することで、アプリケーションで書かれるコンポーネントがスタンドアローンコンポーネントであることを強制することができます。FormsModule や他の npm ライブラリの NgModules については、変更が必要ありません。スタンドアローンコンポーネントは、必要に応じて NgModule 依存関係をインポートし続けることができます。ライブラリ作者は、コンポーネントがユーザーによってどのバージョンでインポートされても正しく動作するため、変更が必要ありません。

Angular 18.2は、TypeScriptの分離されたモジュールサポートを導入し、顕著なパフォーマンス向上を提供します。このオプションを有効にすることで、TypeScriptのコードがバンドラー経由でトランスパイルされ、生産ビルド時間が最大10%高速化します。バンドラーのesbuildは、出力コードを最適化し、TypeScriptのコードのBabel最適化パスを削除します。この機能を有効にするには、tsconfig.jsonファイルの"compilerOptions"セクションに"isolatedModules": trueを追加します。出力サイズを最適化するために、"useDefineForClassFields"オプションを削除またはtrueに設定する必要があります。この機能の詳細については、TypeScriptのドキュメントの分離されたモジュールに関するページを参照してください。これらの変更を実施することで、開発者はこの機能を活用し、効率的なAngularアプリケーションを構築できます。

GoogleのMaterial Web Components（MWC）の変更は、Angular Materialには影響しません。Angular MaterialはMWCを使用せず、依存していません。Angular Materialは内部でMDC Webを使用しており、Angular Material内でのMDC Webのコードのフォークとイテレーションに移行しており、コンポーネントAPIや出力には影響しません。Angular Materialの最新リリースには、Material 3スタイル、CSS変数サポート、テーミングスケマティクスが含まれています。チームは、Angular CDKの機能とドキュメントを拡張し、アプリケーションの開発を改善する予定です。Angular Materialは、活発にサポートされており、開発中であり、高品質のUIを構築するためのロバストなツールを開発者に提供しています。

Google I/OのAngularセッションでは、Generative Art Galleryデモを披露し、AI、Angular、およびWebXRテクノロジーを組み合わせました。このデモでは、Vertex AIのImagen APIを使用してアートワークを生成し、Gemini APIを使用して洞察fulな説明を提供し、3Dギャラリーでアートワークを表示します。ブラウザー、AR、またはVR経由でアクセス可能なギャラリーでは、没入体験を提供します。 AngularのDeferrable Viewsにより、背景で3Dモデルをロードしながらプレースホルダー・ビューを維持することで、シームレスなユーザー・エクスペリエンスを実現します。シグナルズはデータ・フローを簡略化し、ボイラープレート・コードを削減します。WebXR Componentsはシーン・クリエイションを抽象化し、ボイラープレートを削減します。 サーバー・サイド・レンダリングとハイドレーションにより、パフォーマンスが大幅に向上し、ファースト・コンテンツフル・ペイント・タイムスなどの改善が顕著です。Angularの進歩により、開発者体験が向上し、新しいAPIが提供されます。デモ・コードはGitHubで公開されており、開発者们が自分のAngular、WebXR、およびAIプロジェクトを作成することを鼓励しています。

Angularは、新しい@let構文を導入し、開発者がテンプレート内で変数を定義し、再利用できるようにしています。この構文は、Angularのテンプレート構文における長年の問題を解決します。 @let宣言により、Angular式から派生した値を持つ変数を定義できます。これらの変数は、テンプレート全体で再利用でき、コードの読みやすさと維持性を向上させます。 以前のソリューションとは異なり、@let変数は現在のビューとその子孫にスコープされ、コードの組織化を向上させ、不要な変数の衝突を防ぎます。 @let宣言は読み取り専用であり、変更検出中には値が再計算され、データの正確さを確保します。 @letの正式な構文には、キーワード、変数名、代入演算子、Angular式、およびセミコロン終端子が含まれます。 例えば、@letを使用して、テンプレート内で表示する変数を定義することができます。複雑な式を使用する非同期パイプラインの例も含まれます。 Angularチームは、新しい@let構文に関するフィードバックを歓迎し、開発者の体験を継続的に改善しています。

Angular 18では実験的なゾーンレス変更検出が導入され、パフォーマンス、コンポーザビリティ、デバッグが改善された。Angular.devが公式ドキュメントサイトになり、ユーザーエクスペリエンスが向上しました。Material 3 コンポーネント、遅延可能なビュー、組み込みのコントロールフローが安定し、サーバーサイドレンダリングのハイドレーションの国際化もサポート。ゾーンレスアプリでネイティブのasync/awaitが利用可能になり、バンドルサイズが削減され、デバッグが改善されました。Google.comのイベントディスパッチライブラリがAngularのイベントリプレイを強化し、ページロード中のユーザーイベントを保持します。Angular DevToolsはハイドレーションプロセスのデバッグを改善します。すべてのAngular MaterialとCDKコンポーネントが完全にハイドレーションに対応しました。部分的なハイドレーションは開発中で、サーバーサイドレンダリング後のインクリメンタルなハイドレーションを可能にします。ゾーンレスの変更検出により、マイクロフロントエンドのコンポーザビリティと他のフレームワークとの相互運用性が向上。ディファラブル・ビューはCore Web Vitalsを向上させ、組み込みのコントロール・フローはパフォーマンスと人間工学を改善します。

Angularの新しいイベント委譲システムは、AngularとWizがインスピレーション元で、Event Dispatchを可能にし、hydration前にイベントをキャプチャします。このシステムは、UI要素がレスポンスしない問題を解消し、ユーザーエクスペリエンスを向上させます。Event Dispatchは、Googleアプリケーションでテスト済みのJSActionライブラリを使用します。この機能を有効にすることで、Angularアプリケーションは、hydration前にイベントをドロップするのを止め、ページロード時にユーザーインタラクションを許可します。これは、より細やかなhydrationに向けた大きな一歩で、hydrationのクリティカルパスにおけるJavaScriptの量を削減します。遅延可能なビューは、サーバー上で遅延的にhydrationされることで、イベント応答の待ち時間を最小化します。将来のブログ投稿では、この機能をパブリックAPIを通じて有効にする方法の詳細を提供します。このイニシアチブは、Wizが提供するようにAngularの復元性の基礎を築きます。

AngularとWiz、2つのGoogle Webフレームワークは、異なる焦点を持っています：Angularは開発者体験を重視し、Wizはパフォーマンスを重視します。ただし、高パフォーマンスのアプリケーションと素晴らしい開発者体験の需要が高まっているため、両フレームワークの使用例が収束しつつあります。 この状況に対応するために、AngularとWizが協力し、両世界の最高の部分を結びつけることを目指しています。Angularは、Wizから細やかなコードローディングやイベントデリゲーションなどの機能を採用し、パフォーマンスを向上させています。 一方、Wizは、Angularのシグナルズライブラリを採用し、コードメモリゼーションの手動作業を排除することで、顕著なパフォーマンス向上を遂げています。 長期的な目標は、AngularとWizを段階的に統合し、Wizの機能をAngularを通じてオープンソース化し、RFCプロセスを通じてコミュニティからのフィードバックを受け入れることです。 このパートナーシップは、Angularフレームワークの改善と、サーバーサイドレンダリングの採用を通じて、エンドユーザー体験の向上を目指しています。 両フレームワークの長所を結びつけることで、AngularとWizは、Webパフォーマンスを革命し、開発者とエンドユーザーの両方が利益を得ることを目指しています。

Angular v17.3 では、開発者プレビューとして出力の宣言を改善した API が導入されました。この新しい API は、ディレクティブでの出力の宣言を簡素化し、シグナル入力などの他の関数ベースの API と一致しています。また、値を出力する際の型をより正確に提供し、型の安全性を高め、微妙なランタイムエラーのリスクを軽減します。 開発者は、output() 関数を使用して出力を宣言できます。この関数は、クラスフィールドを初期化し、.emit 関数を呼び出すことで値を出力できます。Observable ストリームに基づく出力の場合は、outputFromObservable() 関数を使用できます。 新しい API はシグナルではなく、ボイラープレートコードを削減するためのエレガントな改善です。ディレクティブの破棄時に自動的に出力をクリーンアップし、出力された値の型の安全性を向上させます。 すべての出力は、OutputRef インターフェイスを実装しており、開発者がプログラム的に出力をリスンするための共通の方法を提供します。RxJS インターオップパッケージには、RxJS-固有の方法で出力をリスンするための outputToObservable 関数が含まれています。 新しい出力 API は、開発者プレビューとして利用可能であり、Angular はコミュニティからのフィードバックを求めています。開発者は、ng update を使用して Angular の最新バージョンをインストールすることで、新しい API を試すことができます。 Angular v17.3 の改善された出力 API には、概念的な整合性、シンプルな構文、自動クリーンアップ、型の安全性の向上、プログラムによるリスニングの共通化などの利点があります。 開発者は、コメント、GitHub のディスカッション、またはその他のチャネルを通じて、新しい出力 API についてフィードバックを提供することが奨励されています。フィードバックは、API をさらに改善し、安定させるために使用されます。

舞台照明設計でステージ照明を制御するために使用される電子機器である照明コンソール。nstudioチームは、スタンドアローンコンソールと同じ機能を提供するiPadアプリ「Blackout」を開発しました。このアプリは、DMX制御プロトコルとLumenRadio TimoTwoチップを介したBluetooth制御をサポートしています。 Blackoutは、リアルタイムデータインジケーターと詳細な照明機器制御を備えたスムーズなUIを提供しながら、接続された照明機器に一定のデータ送信速度を維持します。開発にはAngular 17+とNativeScript 8+を使用し、AngularのDI、テンプレート、ステート管理をNativeScriptのプラットフォーム最適化ビューとiOS CoreMIDI統合と組み合わせています。 Angularの宣言的コンポーネントアーキテクチャ、ディレクティブ、NgRxによるステート管理により、MIDI Learn ModeやnsIfディレクティブなどの高度なUI機能を作成できました。nsIfディレクティブは、ビューを変更検知から切り離すことでパフォーマンスを向上させます。 AngularとNativeScriptを組み合わせることで、チームはTailwind CSSでUIKitビューをスタイル設定し、プラットフォーム固有のAPIとテクニックを使用できました。NgRxは、データフローを管理し、不要な計算を最小限に抑えるために、堅牢なステートレイヤーを確保する上で重要な役割を果たしました。NativeScriptは、理想的なパフォーマンスと自然なデバイス動作を実現するために、プラットフォーム最適化レンダリングエンジンを使用できるようにしました。

Angular 17.1 では、デコレーターに基づく @Input() 入力の代替として、シグナル入力を導入しました。シグナル入力は、コード品質と生産性を向上させるために、タイプセーフティを高め、Angular シグナルとの統合を容易にします。 シグナル入力により、開発者はシグナルを使用して入力の変更に効果的に対応でき、オプション入力と必須入力の両方をサポートします。 @Input() と比較して、シグナル入力は OnPush コンポーネントを自動的に汚れた状態としてマークし、DX を向上させ、Zoneless に対応するための基盤を整えます。 シグナル入力は、シグナルの力を活用して、変更の監視と値の導出を効率的に行い、Angular に必要な再描画を通知します。 シグナル入力の潜在的な使用例には、宣言と描画、変更の監視、値の導出、値の変換などがあります。 シグナル入力は、変換とエイリアスをサポートし、生の値を柔軟に処理し、特定の要件を満たすことができます。 Angular チームは、シグナル入力が将来のバージョンで本番ステータスに昇格したときに使用することを推奨しています。 開発者は、開発者プレビューでシグナル入力に関するフィードバックを提供することを奨励しています。 input() の省略表記は、初期値として undefined を暗黙的に使用するため、混乱を招く可能性があります。 入力は、コンポーネント内から入力を更新していたアプリケーションに影響を及ぼす可能性があるため、読み取り専用になりました。

Angular v17.2 では、Web 用の最新の Material Design仕様に基づく新しいデザイン システムである Material 3 の実験的なサポートが導入されました。このリリースには、リアクティブ性を高め、ビュー クエリに型安全性を提供するシグナル クエリとモデル入力の開発者向けプレビュー API も含まれています。パフォーマンスの向上のため、Angular DevTools では、ハイドレーション デバッグをサポートし、NgOptimizedImage ディレクティブでは、自動プレースホルダーと Netlify 画像ローダー統合を提供します。Angular CLI では、Bun パッケージ マネージャーのサポート、Vite の事前バンドル制御、およびカスタム PostCSS 構成機能が追加されました。さらに、Angular チームは、これらのモダンな API を形作るためにコミュニティのフィードバックに感謝しています。次のメジャー リリースである Angular v18 は、5 月に予定されています。