RSS Angular ブログ - Medium ノート

RSS Angular ブログ - Medium

このウェブサイトは、WebアプリケーションフレームワークのAngularの公式ブログのようだ。ホームページには、"The Angular Projectの10周年"というタイトルの最近のブログ記事の一覧が表示されている。一般的なテーマとしては、テクノロジー、開発、Angular自体が含まれる。検索バーとともにカテゴリ、タグ、Aboutページがあり、Angularフレームワークに関するリソース、更新、チュートリアルが提供されている。

ノートのスレッド

この過去1週間は、開発エコシステムにおいて重要な進歩がありました。主要な焦点分野には、コミュニティ第一のエンジニアリングアプローチの育成と、コーディングプラクティスに対するAIの影響の探求が含まれていました。さらに、リソースは革新的なブラウザテスト技術を強調しました。Dev Life Podcastでは、Angularのコミュニティマネージャーと共に、コミュニティ主導のエンジニアリング戦略に関する議論が特集されました。ブログ記事では、AIエージェントがAngularのアーキテクチャサポートをどのように強化しているかを説明するAgentic Codingについて掘り下げました。チュートリアルでは、実際のユーザーインタラクションを模倣するVitestのFull Browser Modeを使用してAngularコンポーネントを効果的にテストする方法を示しました。英語字幕付きの2つのビデオでは、Signal Formsと、バグ検出のためのAngular CompilerのExtended Diagnosticsの活用について取り上げました。コードサンプルでは、FirebaseとAngularを使用したAI画像生成を紹介し、安全な操作のためにServer Prompt Templatesを採用しました。フランス語のチュートリアルでは、Angular v21でSignal FormsのCSSクラスを復元する方法を説明しました。全体的なテーマは、フレームワークの構築と進歩におけるコミュニティの貢献の重要性を強調しました。
CdXz5zHNQW_u2X0iVBOi9.png
著者は、エージェントインターフェースを構築するための新興プロトコルであるA2UIを探求し、その実装について開発者に説明しようとしています。A2UIにより、AIエージェントはウェブ、モバイル、デスクトップで任意のコード実行なしに動的にインタラクティブなユーザーインターフェースを生成でき、シームレスで携帯性の高い体験を実現します。フレームワークとは異なり、A2UIはLLMエージェントとクライアントアプリケーション間の通信を定義するプロトコルであり、開発者が好みのフロントエンド技術をレンダリングに使えるようにします。コアアーキテクチャは、サーバーサイドエージェントが共有スキーマに基づいてUIレイアウトメッセージを生成し、クライアントサイドアプリケーションがそのメッセージを解釈・レンダリングするというものです。サーバー(エージェント)側では、開発者がいくつかの重要な入力を提供しなければなりません。基本的な要素からJSONスキーマで定義されたカスタムコンポーネントまで、利用可能なUIビルディングブロックのカタログ、特定のUIをいつどのように使うかをエージェントに導く自然言語のUI説明、そして望ましいJSONメッセージ構造を示すための短例です。さらに、開発者はUIの記述に「エージェントスキル」を加えて特定のユーザー能力やユースケースを定義し、「アクションマッピング」を用いてイベントを新しい自然言語クエリに変換してユーザー操作を処理できます。エージェントツールは一般的なエージェント的な概念ですが、データの取得やAPIとのやり取りなどのタスクを実行する際にも重要です。クライアント側、特にAngularアプリケーションでは、主な非ボイラープレート要件は、サーバー側カタログで定義されたコンポーネントをレンダリングするようアプリケーションを設定することです。標準的な要素のみを使用する場合は、基本的なカタログで十分です。しかし、エージェントがカスタムコンポーネントを生成する場合、クライアントは対応するAngular実装と、これらのコンポーネントを登録するための基本カタログを拡張するカスタムカタログを必要とします。重要なルールとして、クライアントのコンポーネント定義はエージェントに提供されるカタログスキーマや例と完全に一致し、動的に生成されたUIの正確なレンダリングを保証します。
CdXz5zHNQW_mxJqD9rrHE.png
CdXz5zHNQW_g7jkXHAFGT.png
CdXz5zHNQW_HBxk0F1asR.png
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を位置づけることを目指しています。
CdXz5zHNQW_8wHqe4x7uv.jpeg
このテキストは、実践的な学習体験を提供するいくつかのAngularリポジトリを紹介しています。Antonio Cardenasは、ViewContainerRefを使用した高度な動的コンポーネント作成を紹介し、コードリポジトリとStackBlitzデモを提供しています。また、迅速なCRUDプロジェクト開始のための「Vibe Coding」テンプレートも提供しています。Deborah Kurataは、「Pirates」の例でSignalベースのhttpResourceを紹介しています。Ankit Sharmaは、リアルタイムの文法修正のためにGoogle Geminiを統合したAngularアプリをデモンストレーションしています。これらの例は、最新のAngularパターンを学習し、AIアシスタンスを統合するのに最適です。リポジトリは、動的コンポーネント、CRUD、リアクティブプリミティブを使用したデータ取得などのトピックをカバーしています。これらのリソースは、初心者と経験豊富なAngular開発者の両方を対象としています。テキストは、Angularコミュニティに独自のプロジェクトを共有することを奨励しています。開発者は、関連するハッシュタグを使用してリポジトリとStackBlitzデモを共有するように促されています。コラボレーションと共有は、コミュニティの成長を促進するために強調されています。テキストは、コードの探索と実践的なプロジェクトを通じた実践的な学習を促進しています。
CdXz5zHNQW_2YonmPl0Up.png
開発者である著者は、育児休暇から復帰し、AIの状況、特にエージェントスキルが急速に変化していることに気づきました。AIエージェントへの一連の指示であるエージェントスキルは、以前のプロジェクトであるAngular AI Tutorを再考するきっかけとなりました。このTutorは、Angularをインタラクティブに教えるもので、当初はシンプルなルールファイルとGeminiを使用して構築されました。しかし、インタラクティブな製品へと進化するにつれて、レッスンの一貫性と構文の最新性という課題に直面しました。Tutorのロジックは密接に結合されており、再利用が難しく、更新も困難でした。提案された解決策は、Router + Building Blocksアーキテクチャであり、Tutorのためのモジュール化された再利用可能なコンポーネントを作成することを目的としていました。著者は現在、エージェントスキルが、このContext Pipeline Engineeringのビジョンを実現するための潜在的な手段であると考えています。著者は、これらのシステムの拡張性、信頼性、トークン最適化、安定性について疑問を抱いています。最終的に、著者はAIエンジニアリングに関するより深い、構造的な問題について考察しています。著者はこの分野をContext Pipeline Engineeringと呼び、他の人々もこの探求に参加することを呼びかけています。記事は、著者が仕事に復帰し、新しいものを構築することへの興奮で締めくくられています。
CdXz5zHNQW_TJ5I7pFWcs.png
CdXz5zHNQW_LTVi8GCpER.png
CdXz5zHNQW_COGp4RGvqe.png
CdXz5zHNQW_uCnt9ZbsaU.png
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開発ワークフローの継続的な近代化を象徴しています。
CdXz5zHNQW_3ydB0yqdQy.png
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 を使用して作品を共有することをお勧めします。
CdXz5zHNQW_efWO6p8BJv.png
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搭載のアプリケーションの構築において開発者をサポートすることにコミットしています。
CdXz5zHNQW_J8s9Nu3Qbl.png
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 マスコットに対してかなりのフィードバックを提供しており、最終デザインは今年後半に発表される予定です。
CdXz5zHNQW_bylcGSZJTi.png
Angular チームと Chrome チームは協力して、Angular 固有のデータとインサイトを Chrome DevTools パフォーマンス パネルに直接取り込み、開発者に統一されたプロファイリング エクスペリエンスを提供しました。この統合により、開発者は両方のツールの利点を組み合わせて、アプリケーションのパフォーマンスをより同期し、包括的に表示することができます。Chrome DevTools の Angular の新しいカスタム トラックは、アプリケーションのブートストラップ、コンポーネント、UI 同期、ライフサイクル フックなど、Angular の概念を使用してパフォーマンス データを提供します。カスタムトラックのフレームチャートは、対応するコンポーネントやその他のAngularの概念の下に関数の呼び出しをグループ化し、開発者が個々の関数にドリルダウンしてより詳細なビューを表示できるようにします。フレーム チャートのエントリは色分けされているため、開発者はアプリケーションで何が起こっているかをすばやく特定し、アプリケーション コード、他のスクリプト、またはブラウザー アクティビティを区別できます。色は、Dependency Injection サービス、Angular によってコンパイルされたテンプレート、エントリポイントなど、アプリケーションのさまざまな側面を表しています。カスタムトラックはインタラクティブで、開発者はフレームチャートのエントリをクリックして、特定のエントリに関するより詳細な情報を表示することができます。開始するには、開発者は最新バージョンの Angular と最新バージョンの Chrome を使用していることを確認し、Angular アプリケーションを開発者モードで実行し、コンソールで ng.enableProfiling() と入力してカスタムトラックを有効にする必要があります。この統合は、Angularエコシステム内の開発者エクスペリエンスを向上させるという継続的な取り組みを示しており、開発者はより高速で効率的なアプリケーションを構築できます。
CdXz5zHNQW_arec9d2R1S.png
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でのパフォーマンスインサイトやフレームワークの追加や改善を通じて開発者の体験を磨き上げています。
CdXz5zHNQW_t5gWIMi5Tb.png
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で入手できます。
CdXz5zHNQW_cIunLKUSoL.png
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 は、valuestatuserrorisLoadingheadersstatusCodeprogress を含むいくつかのシグナルを公開します。httpResource は、Zod や Valibot などのスキーマ検証ライブラリとの直接的な統合を提供し、型安全性を実現します。httpResource は Angular v19.2 の実験的な API として利用可能であり、まだ本番環境での使用には適していませんが、開発者は試してフィードバックを提供することが推奨されています。
CdXz5zHNQW_4lkhfMb8Ye.jpeg
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で構築を開始できます。
CdXz5zHNQW_JLU0SNkg19.png
エンタープライズスケールのソフトウェアシステムは、複数のクロスファンクショナルチームによって実装されることが多く、这些チームが新しい機能を効率的に提供するために、チーム間での調整の必要性を最小限度に抑えることが望ましい。このため、システムを垂直方向に低結合の領域にモジュール化し、各チームが個別に担当することが必要となる。マイクロフロントエンドは、高度なチームの自律性など多くの利点を約束するアーキテクチャスタイルだが、多くの課題も伴う。マイクロフロントエンドでは、個別のビルドプロセスが必要になり、インクリメンタルビルドとの組み合わせによりビルド時間を改善することができる。この機能は、マイクロフロントエンドの他のアスペクト(例えば、チームと個別のアプリケーションを合わせる、個別のデプロイメント)を適用せずに使用することもできる。しかし、個別に開発されたマイクロフロントエンドは、UI/UXが一致しなくなり、不一致な外観を生じることがあり、複数のアプリケーションを読み込むと、バンドルのダウンロード数が増加し、ロード時間が長くなり、メモリーの圧力が高まる。アプリケーションを低結合の部分に分割することは、一般的にベストプラクティスだが、垂直方向の境界を明確に定義し、個別のアプリケーションとして実装することは、しばしば困難である。包括的なソリューションに統合することで追加の複雑さが生じ、コンパイル時統合からランタイム統合に移行することは、深刻な結果を生じる。Angularチームは、マイクロフロントエンドの代替として、モノレポジトリに個別の垂直方向を実装することを検討することを推奨している。しかし、マイクロフロントエンドの欠点を補う方法もあり、例えば、デザインシステムを設立して一貫したUI/UXを実現する、または、個別のシステムパーツをレイジーロードすることである。ネイティブフェデレーションは、Angular CLIとの緊密な統合を提供し、Angularを使用してマイクロフロントエンドを実装することを可能にするコミュニティプロジェクトである。これにより、アプリケーションが個別にビルドおよびデプロイされた他のアプリケーションのパーツをレイジーロードし、AngularやRxJSなどの依存関係をホストとリモート間で共有することができる。ネイティブフェデレーションの設定には、スキーマティックが提供され、ネイティブフェデレーションのビルダー委任をアプリケーションビルダーに設定し、federation.config.jsという構成ファイルを作成する。この構成では、リモートやホストに一意の名前を割り当て、共有する依存関係を定義する。リモートでは、エクスポーズされたEcmaScriptモジュールを定義し、シェルにロードすることができる。スキーマティックは、main.tsにネイティブフェデレーションの初期化コードを追加し、リモートがエクスポーズするコンポーネントやルーティング構成をロードするために、伝統的なレイジーロードとネイティブフェデレーションのloadRemoteModule関数を組み合わせる。
CdXz5zHNQW_NpT7gwgsMy.png
アングラー チームは、過去 2 年半にわたり、開発者体験とパフォーマンスの向上に注力してきました。急速に進化するテクノロジー業界のため、チームは長期的なビジョンを定義し、年間、四半期、リリースベースで作業を計画し、変化する要件に適応するための柔軟性を維持しています。チームは、開発者のニーズについての仮定を検証するために、年次開発者調査を使用しており、2024 年には 1 万件以上の回答が集まりました。調査結果は、開発者の 79% が Angular の最新の 2 つのメジャーバージョンを使用しており、90% がスタンドアローン コンポーネント、ディレクティブ、パイプを使用していることを示しています。結果は、開発者の全体的な満足度が向上したことも示しています。開発者の約 90% がフレームワークに対する満足度を報告しています。チームは、スタンドアローン コンポーネント、組み込みの制御フロー、遅延可能なビューなどの改善が満足度の向上に貢献したと判断しました。ただし、コンポーネントの作成形式とテストは、改善が必要な重要な分野です。2025 年、チームは開発者体験の向上、最新の改善の導入、パフォーマンスの最適化など、Angular 開発者が成功するための重要な分野に投資することに重点を置きます。2025 年の注目すべきプロジェクトには、開発者プレビューへのゾーンレスのプロモーション、シグナルベースのフォームの導入、Karma の代替となる新しいデフォルトのテスト ランナーの導入などがあります。チームはまた、Angular のドキュメントを最新のベスト プラクティスに合わせて進化させ、Web 開発者が目標を達成するのに役立つ機能の可視性を高める予定です。
CdXz5zHNQW_Q8whPTKrhS.png
CdXz5zHNQW_r3Skdt6pNI.png
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では実験的なゾーンレス変更検出が導入され、パフォーマンス、コンポーザビリティ、デバッグが改善された。Angular.devが公式ドキュメントサイトになり、ユーザーエクスペリエンスが向上しました。Material 3 コンポーネント、遅延可能なビュー、組み込みのコントロールフローが安定し、サーバーサイドレンダリングのハイドレーションの国際化もサポート。ゾーンレスアプリでネイティブのasync/awaitが利用可能になり、バンドルサイズが削減され、デバッグが改善されました。Google.comのイベントディスパッチライブラリがAngularのイベントリプレイを強化し、ページロード中のユーザーイベントを保持します。Angular DevToolsはハイドレーションプロセスのデバッグを改善します。すべてのAngular MaterialとCDKコンポーネントが完全にハイドレーションに対応しました。部分的なハイドレーションは開発中で、サーバーサイドレンダリング後のインクリメンタルなハイドレーションを可能にします。ゾーンレスの変更検出により、マイクロフロントエンドのコンポーザビリティと他のフレームワークとの相互運用性が向上。ディファラブル・ビューはCore Web Vitalsを向上させ、組み込みのコントロール・フローはパフォーマンスと人間工学を改善します。
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 を暗黙的に使用するため、混乱を招く可能性があります。入力は、コンポーネント内から入力を更新していたアプリケーションに影響を及ぼす可能性があるため、読み取り専用になりました。