angular · lacolaco · Nov 21, 2025
@@ -0,0 +1,37 @@
+![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/v21-event/angular-v21-hero.jpg 'Angular v21 Hero Image')
+
+# Angular v21: The Adventure Begins
+
+## Release Blog
+
+**Angular v21 is live**: check out the [v21 release blog](http://goo.gle/angular-v21-blog) to learn about all of the amazing new features coming your way.
+
+## Experience the v21 Release
+
+Explore the Angular v21 release with this interactive game world. Curious how we made it? Click the `Show Code` button below to view the source code for this Angular app.
+
+<docs-code preview hideCode header="v21 Game World" path="adev/src/content/examples/v21-game-world/src/app/app.ts" />
+
+## Angular v21 Developer Event [Full Version]
+
+Angular v21 is being delivered to you as a brand new release adventure. With modern AI tooling, performance updates and more, Angular v21 delivers fantastic new features to improve your developer experience. Whether you’re creating AI-powered apps or scalable enterprise applications, there has never been a better time to build with Angular.
+
+🔥 What's coming in v21
+
+- New Angular MCP Server tools to improve AI-powered workflows and code generation
+- Your first look at Signal Forms, our new streamlined, signal-based approach to forms in Angular
+- Exciting new details about the Angular Aria package
+
+<div style="display: block; width: 80%; margin: 0 auto; margin-top: 20px;">
+  <iframe
+    credentialless
+    width="560"
+    height="315"
+    src="https://www.youtube.com/embed/DDAHORVzQ5g?si=B9Uv5vXzIKJfcLGr"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  ></iframe>
+</div>
@@ -1,34 +1,34 @@
-![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/v21-event/angular-v21-hero.jpg 'Angular v21 Hero Image')
+![Angular v21の今後のリリースを告知する、レトロな8ビットのピクセルアートスタイルのグラフィック。大きなグラデーションの「v21」テキストがフレームを占めています。その隣には、小さなテキストで「The Adventure Begins」という言葉と、ピンク色のピクセル化されたボックス内にリリース日「11-20-2025」が記載されています。Angularのロゴは右下隅にあります。](assets/images/v21-event/angular-v21-hero.jpg 'Angular v21ヒーロー画像')
 
-# Angular v21: The Adventure Begins
+# Angular v21: 冒険の始まり
 
-## Release Blog
+## リリースブログ {#release-blog}
 
-**Angular v21 is live**: check out the [v21 release blog](http://goo.gle/angular-v21-blog) to learn about all of the amazing new features coming your way.
+**Angular v21がリリースされました**: [v21リリースブログ](http://goo.gle/angular-v21-blog)で、みなさんに提供されるすばらしい新機能のすべてをご確認ください。
 
-## Experience the v21 Release
+## v21リリースを体験する {#experience-the-v21-release}
 
-Explore the Angular v21 release with this interactive game world. Curious how we made it? Click the `Show Code` button below to view the source code for this Angular app.
+このインタラクティブなゲームの世界でAngular v21リリースを体験してください。どのように作られたか気になりますか？下の`Show Code`ボタンをクリックして、このAngularアプリケーションのソースコードをご覧ください。
 
 <docs-code preview hideCode header="v21 Game World" path="adev/src/content/examples/v21-game-world/src/app/app.ts" />
 
-## Angular v21 Developer Event [Full Version]
+## Angular v21開発者イベント [フルバージョン] {#angular-v21-developer-event-full-version}
 
-Angular v21 is being delivered to you as a brand new release adventure. With modern AI tooling, performance updates and more, Angular v21 delivers fantastic new features to improve your developer experience. Whether you’re creating AI-powered apps or scalable enterprise applications, there has never been a better time to build with Angular.
+Angular v21は、まったく新しいリリース体験としてお届けします。最新のAIツール、パフォーマンスアップデートなどにより、Angular v21は開発者体験を向上させるすばらしい新機能を提供します。AIを活用したアプリケーションやスケーラブルなエンタープライズアプリケーションを作成する場合でも、今ほどAngularで構築するのに最適な時期はありません。
 
-🔥 What's coming in v21
+🔥 v21の新機能
 
-- New Angular MCP Server tools to improve AI-powered workflows and code generation
-- Your first look at Signal Forms, our new streamlined, signal-based approach to forms in Angular
-- Exciting new details about the Angular Aria package
+- AIを活用したワークフローとコード生成を改善するための新しいAngular MCP Serverツール
+- Angularのフォームに対する、新しい合理化されたシグナルベースのアプローチであるシグナルフォームを初公開
+- Angular Ariaパッケージに関する注目の新情報
 
 <div style="display: block; width: 80%; margin: 0 auto; margin-top: 20px;">
   <iframe
     credentialless
     width="560"
     height="315"
     src="https://www.youtube.com/embed/DDAHORVzQ5g?si=B9Uv5vXzIKJfcLGr"
-    title="YouTube video player"
+    title="YouTube動画プレイヤー"
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
     referrerpolicy="strict-origin-when-cross-origin"

@@ -1,6 +1,6 @@
 # ディレクティブ合成API
 
-Angularディレクティブは、再利用可能な動作をカプセル化する素晴らしい方法を提供します。
+Angularディレクティブは、再利用可能な動作をカプセル化するすばらしい方法を提供します。
 ディレクティブは、属性、CSSクラス、およびイベントリスナーを要素に適用できます。
 
 *ディレクティブ合成API* を使用すると、

@@ -19,7 +19,7 @@ Angularの新しい**開発者プレビュー**のサーバーレンダリング
 - **シームレスな開発サーバー統合：**
   - 完全統合された開発サーバーからスムーズで効率的な開発エクスペリエンスを活用できます。
 
-この開発者プレビューでは、これらの強力な新機能をいち早く確認できます。Angularチームは、皆様がこれらの機能を探索し、フィードバックを提供してAngularサーバーレンダリングの将来を形作ることを奨励しています。
+この開発者プレビューでは、これらの強力な新機能をいち早く確認できます。Angularチームは、みなさんがこれらの機能を探索し、フィードバックを提供してAngularサーバーレンダリングの将来を形作ることを奨励しています。
 
 ## ハイブリッドレンダリングの設定
 

@@ -103,4 +103,4 @@ NOTE: この例では、;文字で区切られた2つのパラメーターを使
 </docs-step>
 </docs-workflow>
 
-おめでとうございます！この時点で、遅延可能ビューについて十分に理解できたはずです。素晴らしい仕事を続け、次にトリガーについて学びましょう。
+おめでとうございます！この時点で、遅延可能ビューについて十分に理解できたはずです。すばらしい仕事を続け、次にトリガーについて学びましょう。
@@ -1,6 +1,6 @@
 # Angular チュートリアルへようこそ
 
-このインタラクティブなチュートリアルでは、Angularを使用して素晴らしいアプリケーションを作成するための基本的な構成要素を学びます。
+このインタラクティブなチュートリアルでは、Angularを使用してすばらしいアプリケーションを作成するための基本的な構成要素を学びます。
 
 ## このチュートリアルの使い方
 

@@ -107,7 +107,7 @@ NOTE: 詳しくは、[詳細ガイドの @defer を使った遅延読み込み](
 
 </docs-workflow>
 
-このアクティビティでは、アプリケーションで遅延可能ビューを使用する方法を学びました。素晴らしい仕事ですね。🙌
+このアクティビティでは、アプリケーションで遅延可能ビューを使用する方法を学びました。すばらしい仕事ですね。🙌
 
 さまざまなトリガー、プリフェッチ、`@error` ブロックなど、遅延可能ビューでできることは他にもたくさんあります。
 

@@ -102,4 +102,4 @@ providers: [
 
 このディレクティブをワークフローに追加することで、画像がAngularの助けを借りてベストプラクティスを使用して読み込まれるようになりました🎉
 
-詳細については、[NgOptimizedImageのドキュメント](guide/image-optimization) をご覧ください。素晴らしい仕事を続け、次はルーティングについて学びましょう。
+詳細については、[NgOptimizedImageのドキュメント](guide/image-optimization) をご覧ください。すばらしい仕事を続け、次はルーティングについて学びましょう。
@@ -72,6 +72,6 @@ export class App {}
 
 </docs-workflow>
 
-これで、アプリケーションはAngular Routerを使用できるようになりました。素晴らしいですね！🙌
+これで、アプリケーションはAngular Routerを使用できるようになりました。すばらしいですね！🙌
 
 勢いを維持して、次のステップであるアプリケーションのルートの定義を学びましょう。
@@ -60,6 +60,6 @@ component: Home,
 
 </docs-workflow>
 
-このアクティビティでは、Angularアプリケーションでルートを定義および構成する方法を学びました。素晴らしいですね。🙌
+このアクティビティでは、Angularアプリケーションでルートを定義および構成する方法を学びました。すばらしいですね。🙌
 
 アプリケーションでルーティングを完全に有効にするための道のりは、あとわずかです。頑張ってください。
@@ -51,4 +51,4 @@ import { RouterLink, RouterOutlet } from '@angular/router';
 
 これで、ナビゲーション内のリンクをクリックしてもちらつきはなく、ページの内容自体（つまり `router-outlet`）のみが変更されます🎉
 
-Angularでのルーティングについて学ぶことは素晴らしいことです。これは`Router` APIの表面的な部分に過ぎません。詳細については、[Angular Router ドキュメント](guide/routing)をご覧ください。
+Angularでのルーティングについて学ぶことはすばらしいことです。これは`Router` APIの表面的な部分に過ぎません。詳細については、[Angular Router ドキュメント](guide/routing)をご覧ください。
@@ -67,4 +67,4 @@ NOTE: `[()]`という構文は、「バナナインボックス」として知
 
 これで、Angularでフォームを構築するための重要な最初のステップを踏み出しました。
 
-素晴らしいですね。勢いを維持しましょう！
+すばらしいですね。勢いを維持しましょう！
@@ -121,4 +121,4 @@ Angularには、`ngSubmit`というこの特定の目的に合わせたイベン
 
 このようにして、Angularのリアクティブフォームの使い方を学びました。
 
-このアクティビティは素晴らしいですね。フォームの検証について学ぶために進んでください。
+このアクティビティはすばらしいですね。フォームの検証について学ぶために進んでください。
@@ -53,4 +53,4 @@ profileForm = new FormGroup({
 
 これで、リアクティブフォームでの検証の仕方の基本を理解しました。
 
-Angularでのフォーム操作に関するこれらの基本的な概念を学ぶのは素晴らしいですね。さらに学びたい場合は、[Angularフォームドキュメント](guide/forms/form-validation) を参照してください。
+Angularでのフォーム操作に関するこれらの基本的な概念を学ぶのはすばらしいですね。さらに学びたい場合は、[Angularフォームドキュメント](guide/forms/form-validation) を参照してください。
@@ -51,4 +51,4 @@ template: `<p>Car Listing: {{ display }}</p>`,
 
 </docs-workflow>
 
-初めてサービスをコンポーネントに注入できました。素晴らしい取り組みです。
+初めてサービスをコンポーネントに注入できました。すばらしい取り組みです。
@@ -61,4 +61,4 @@ template: `{{username | lowercase }}`
 
 パイプは、出力の構成に使用できるパラメーターも受け取れます。次のアクティビティで詳しく説明します。
 
-追伸、あなたは素晴らしいです⭐️
+追伸、あなたはすばらしいです⭐️
@@ -67,7 +67,7 @@ template: `
 
 </docs-workflow>
 
-パイプに関する素晴らしい作業です。ここまで素晴らしい進歩を遂げてきましたね。
+パイプに関するすばらしい作業です。ここまですばらしい進歩を遂げてきましたね。
 
 アプリケーションで使用できる組み込みのパイプは他にもたくさんあります。[Angular ドキュメント](guide/templates/pipes)でそのリストを見つけることができます。
 

@@ -37,4 +37,4 @@ template: `<section><app-user /></section>`,
 </docs-workflow>
 必要なだけ多くのHTMLマークアップとコンポーネントを使用して、アプリのアイデアを実現できます。同じページにコンポーネントの複数のコピーを含めることもできます。
 
-これは素晴らしい導入ですね。データに基づいてコンポーネントを条件付きで表示するにはどうすればよいでしょうか？詳細については、次のセクションをご覧ください。
+これはすばらしい導入ですね。データに基づいてコンポーネントを条件付きで表示するにはどうすればよいでしょうか？詳細については、次のセクションをご覧ください。
@@ -57,4 +57,4 @@ NOTE: `track` の使用は必須です。`id` またはその他のユニーク
 
 </docs-workflow>
 
-このタイプの機能は、制御フローと呼ばれます。次に、コンポーネントをカスタマイズして通信する方法について学びます。ちなみに、あなたは素晴らしい仕事をしています。
+このタイプの機能は、制御フローと呼ばれます。次に、コンポーネントをカスタマイズして通信する方法について学びます。ちなみに、あなたはすばらしい仕事をしています。
@@ -43,6 +43,6 @@ export class App {
 
 </docs-workflow>
 
-これで、divは編集可能になりました。素晴らしいですね👍
+これで、divは編集可能になりました。すばらしいですね👍
 
 プロパティバインディングは、Angularの強力な機能の1つです。詳細については、[Angularドキュメント](guide/templates/property-binding)をご覧ください。
@@ -50,4 +50,4 @@ showSecretMessage() {
 
 </docs-workflow>
 
-これで、ほんの数ステップでAngularの最初のイベントハンドラーを作成できました。うまくいっているようです。素晴らしいですね。頑張ってください。
+これで、ほんの数ステップでAngularの最初のイベントハンドラーを作成できました。うまくいっているようです。すばらしいですね。頑張ってください。
@@ -52,6 +52,6 @@ export class App {}
 
 </docs-workflow>
 
-これは素晴らしいことですが、コンポーネント通信の片方向だけです。子コンポーネントから親コンポーネントに情報とデータを送信したい場合はどうでしょうか？次のレッスンでその方法を学びましょう。
+これはすばらしいことですが、コンポーネント通信の片方向だけです。子コンポーネントから親コンポーネントに情報とデータを送信したい場合はどうでしょうか？次のレッスンでその方法を学びましょう。
 
-P.S. あなたは素晴らしいです - 頑張ってください 🎉
+P.S. あなたはすばらしいです - 頑張ってください 🎉
@@ -66,6 +66,6 @@ addItem() {
 
 </docs-workflow>
 
-やりましたね、これでコンポーネントの基本を理解できました。素晴らしい👏
+やりましたね、これでコンポーネントの基本を理解できました。すばらしい👏
 
 さらに学び続けることで、Angularの優れた機能をさらに活用できます。
@@ -68,6 +68,6 @@ loginForm = form(this.loginModel);
 
 </docs-workflow>
 
-素晴らしい! フォームモデルを設定しました。`loginModel` シグナルがフォームデータを保持し、`loginForm` が型安全性を備えた各フィールドへのアクセスを提供します。
+すばらしい! フォームモデルを設定しました。`loginModel` シグナルがフォームデータを保持し、`loginForm` が型安全性を備えた各フィールドへのアクセスを提供します。
 
 次に、[フォームをテンプレートに接続する方法](/tutorials/signal-forms/2-connect-form-template)を学びます!
@@ -74,6 +74,6 @@ checkbox入力に `[field]` ディレクティブを追加します:
 
 </docs-workflow>
 
-素晴らしい! フォームをテンプレートに接続し、フォーム値を表示しました。`[field]` ディレクティブは双方向データバインディングを自動的に処理します - 入力すると、`loginModel` シグナルが更新され、表示される値が即座に更新されます。
+すばらしい! フォームをテンプレートに接続し、フォーム値を表示しました。`[field]` ディレクティブは双方向データバインディングを自動的に処理します - 入力すると、`loginModel` シグナルが更新され、表示される値が即座に更新されます。
 
 次に、[フォームにバリデーションを追加する方法](/tutorials/signal-forms/3-add-validation)を学びます!
@@ -56,6 +56,6 @@ password入力の下に、passwordエラーの同じパターンを追加しま
 
 </docs-workflow>
 
-素晴らしい! フォームにエラー表示を追加しました。エラーは、ユーザーがフィールドと対話した後にのみ表示され、邪魔にならずに役立つフィードバックを提供します。
+すばらしい! フォームにエラー表示を追加しました。エラーは、ユーザーがフィールドと対話した後にのみ表示され、邪魔にならずに役立つフィードバックを提供します。
 
 次に、[フォーム送信の処理方法](/tutorials/signal-forms/5-add-submission)を学びます!
Original file line number	Diff line number	Diff line change
Expand Up		@@ -102,4 +102,4 @@ providers: [

		このディレクティブをワークフローに追加することで、画像がAngularの助けを借りてベストプラクティスを使用して読み込まれるようになりました🎉

		詳細については、[NgOptimizedImageのドキュメント](guide/image-optimization) をご覧ください。素晴らしい仕事を続け、次はルーティングについて学びましょう。
		詳細については、[NgOptimizedImageのドキュメント](guide/image-optimization) をご覧ください。すばらしい仕事を続け、次はルーティングについて学びましょう。
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,4 +51,4 @@ import { RouterLink, RouterOutlet } from '@angular/router';

		これで、ナビゲーション内のリンクをクリックしてもちらつきはなく、ページの内容自体（つまり `router-outlet`）のみが変更されます🎉

		Angularでのルーティングについて学ぶことは素晴らしいことです。これは`Router` APIの表面的な部分に過ぎません。詳細については、[Angular Router ドキュメント](guide/routing)をご覧ください。
		Angularでのルーティングについて学ぶことはすばらしいことです。これは`Router` APIの表面的な部分に過ぎません。詳細については、[Angular Router ドキュメント](guide/routing)をご覧ください。
Original file line number	Diff line number	Diff line change
Expand Up		@@ -67,4 +67,4 @@ NOTE: `[()]`という構文は、「バナナインボックス」として知

		これで、Angularでフォームを構築するための重要な最初のステップを踏み出しました。

		素晴らしいですね。勢いを維持しましょう！
		すばらしいですね。勢いを維持しましょう！
Original file line number	Diff line number	Diff line change
Expand Up		@@ -121,4 +121,4 @@ Angularには、`ngSubmit`というこの特定の目的に合わせたイベン

		このようにして、Angularのリアクティブフォームの使い方を学びました。

		このアクティビティは素晴らしいですね。フォームの検証について学ぶために進んでください。
		このアクティビティはすばらしいですね。フォームの検証について学ぶために進んでください。
Original file line number	Diff line number	Diff line change
Expand Up		@@ -53,4 +53,4 @@ profileForm = new FormGroup({

		これで、リアクティブフォームでの検証の仕方の基本を理解しました。

		Angularでのフォーム操作に関するこれらの基本的な概念を学ぶのは素晴らしいですね。さらに学びたい場合は、[Angularフォームドキュメント](guide/forms/form-validation) を参照してください。
		Angularでのフォーム操作に関するこれらの基本的な概念を学ぶのはすばらしいですね。さらに学びたい場合は、[Angularフォームドキュメント](guide/forms/form-validation) を参照してください。
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,4 +51,4 @@ template: `<p>Car Listing: {{ display }}</p>`,

		</docs-workflow>

		初めてサービスをコンポーネントに注入できました。素晴らしい取り組みです。
		初めてサービスをコンポーネントに注入できました。すばらしい取り組みです。
Original file line number	Diff line number	Diff line change
Expand Up		@@ -61,4 +61,4 @@ template: `{{username \| lowercase }}`

		パイプは、出力の構成に使用できるパラメーターも受け取れます。次のアクティビティで詳しく説明します。

		追伸、あなたは素晴らしいです⭐️
		追伸、あなたはすばらしいです⭐️
Original file line number	Diff line number	Diff line change
Expand Up		@@ -57,4 +57,4 @@ NOTE: `track` の使用は必須です。`id` またはその他のユニーク

		</docs-workflow>

		このタイプの機能は、制御フローと呼ばれます。次に、コンポーネントをカスタマイズして通信する方法について学びます。ちなみに、あなたは素晴らしい仕事をしています。
		このタイプの機能は、制御フローと呼ばれます。次に、コンポーネントをカスタマイズして通信する方法について学びます。ちなみに、あなたはすばらしい仕事をしています。
Original file line number	Diff line number	Diff line change
Expand Up		@@ -50,4 +50,4 @@ showSecretMessage() {

		</docs-workflow>

		これで、ほんの数ステップでAngularの最初のイベントハンドラーを作成できました。うまくいっているようです。素晴らしいですね。頑張ってください。
		これで、ほんの数ステップでAngularの最初のイベントハンドラーを作成できました。うまくいっているようです。すばらしいですね。頑張ってください。