fix: migrate changes

Author: lacolaco

adev-ja/src/content/guide/elements.en.md

@@ -64,8 +64,8 @@ Component properties and logic maps directly into HTML attributes and the browse
   For example, for a component with `inputProp = input({alias: 'myInputProp'})`, the corresponding custom element defines an attribute `my-input-prop`.
 
 * Component outputs are dispatched as HTML [Custom Events](https://developer.mozilla.org/docs/Web/API/CustomEvent), with the name of the custom event matching the output name.
-    For example, for a component with valueChanged = output()`, the corresponding custom element dispatches events with the name "valueChanged", and the emitted data is stored on the event's `detail` property.
-    If you provide an alias, that value is used; for example, clicks = output<string>({alias: 'myClick'});` results in dispatch events with the name "myClick".
+    For example, for a component `with valueChanged = output()`, the corresponding custom element dispatches events with the name "valueChanged", and the emitted data is stored on the event's `detail` property.
+    If you provide an alias, that value is used; for example, `clicks = output<string>({alias: 'myClick'});` results in dispatch events with the name "myClick".
 
 For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events).
 

adev-ja/src/content/guide/http/making-requests.en.md

@@ -262,7 +262,9 @@ export class UserProfileComponent {
   private userService = inject(UserService);
 
   constructor(): void {
-    this.user$ = this.userService.getUser(this.userId());
+    effect(() => {
+      this.user$ = this.userService.getUser(this.userId());
+    });
   }
 }
 </docs-code>

adev-ja/src/content/guide/http/making-requests.md

@@ -262,7 +262,9 @@ export class UserProfileComponent {
   private userService = inject(UserService);
 
   constructor(): void {
-    this.user$ = this.userService.getUser(this.userId());
+    effect(() => {
+      this.user$ = this.userService.getUser(this.userId());
+    });
   }
 }
 </docs-code>

adev-ja/src/content/guide/http/testing.en.md

@@ -10,7 +10,7 @@ At the end, tests can verify that the app made no unexpected requests.
 
 To begin testing usage of `HttpClient`, configure `TestBed` and include `provideHttpClient()` and `provideHttpClientTesting()` in your test's setup. This configures `HttpClient` to use a test backend instead of the real network. It also provides `HttpTestingController`, which you'll use to interact with the test backend, set expectations about which requests have been made, and flush responses to those requests. `HttpTestingController` can be injected from `TestBed` once configured.
 
-Keep in mind to provide `provideHttpClient()` **before** `provideHttpClientTesting()`, as `provideHttpClientTesting()` will overwrite parts of `provideHttpCient()`. Doing it the other way around can potentially break your tests.
+Keep in mind to provide `provideHttpClient()` **before** `provideHttpClientTesting()`, as `provideHttpClientTesting()` will overwrite parts of `provideHttpClient()`. Doing it the other way around can potentially break your tests.
 
 <docs-code language="ts">
 TestBed.configureTestingModule({

adev-ja/src/content/guide/http/testing.md

@@ -10,7 +10,7 @@
 
 `HttpClient` の使用のテストを開始するには、`TestBed` を構成してテストの設定に `provideHttpClient()` と `provideHttpClientTesting()` を含めます。これにより、`HttpClient` が実際のネットワークではなくテストバックエンドを使用するように構成されます。また、`HttpTestingController` も提供され、これを使用してテストバックエンドとやり取ります。そして、どのリクエストが行われたかについての期待を設定し、それらのリクエストに対するレスポンスを流します。`HttpTestingController` は、構成されたら `TestBed` から注入できます。
 
-`provideHttpClientTesting()` は `provideHttpCient()` の一部を上書きするため、`provideHttpClient()` を `provideHttpClientTesting()` の**前**に提供することに留意してください。これを逆に行うと、テストが壊れてしまう可能性があります。
+`provideHttpClientTesting()` は `provideHttpClient()` の一部を上書きするため、`provideHttpClient()` を `provideHttpClientTesting()` の**前**に提供することに留意してください。これを逆に行うと、テストが壊れてしまう可能性があります。
 
 <docs-code language="ts">
 TestBed.configureTestingModule({

adev-ja/src/content/guide/hydration.en.md

@@ -177,7 +177,7 @@ Application stability is an important part of the hydration process. Hydration a
 
 ## I18N
 
-HELPFUL: Support for internationalization with hydration is currently in [developer preview](/reference/releases#developer-preview). By default, Angular will skip hydration for components that use i18n blocks, effectively re-rendering those components from scratch.
+HELPFUL: By default, Angular will skip hydration for components that use i18n blocks, effectively re-rendering those components from scratch.
 
 To enable hydration for i18n blocks, you can add [`withI18nSupport`](/api/platform-browser/withI18nSupport) to your `provideClientHydration` call.
 
@@ -203,7 +203,7 @@ There are a number of third party libraries that depend on DOM manipulation to b
 
 ## Third Party Scripts with DOM Manipulation
 
-Many third party scripts, such as ad trackers and analytics, modify the DOM before hydration can occur. These scripts may cause hydration errors because the page no longer matches the structure expected by Angular. Prefer deferring this type of script until after hydration whenever possible. Consider using [`AfterNextRender`](api/core/afterNextRender) to delay the script until post-hydration processes have occured.
+Many third party scripts, such as ad trackers and analytics, modify the DOM before hydration can occur. These scripts may cause hydration errors because the page no longer matches the structure expected by Angular. Prefer deferring this type of script until after hydration whenever possible. Consider using [`AfterNextRender`](api/core/afterNextRender) to delay the script until post-hydration processes have occurred.
 
 ## Incremental Hydration
 

adev-ja/src/content/guide/hydration.md

@@ -177,7 +177,7 @@ HELPFUL: これによりレンダリングの問題は修正されますが、
 
 ## I18N {#i18n}
 
-HELPFUL: ハイドレーションによる国際化のサポートは、現在 [開発者プレビュー](/reference/releases#developer-preview) 段階です。デフォルトでは、Angularはi18nブロックを使用するコンポーネントのハイドレーションをスキップし、それらのコンポーネントを最初から再レンダリングします。
+HELPFUL: デフォルトでは、Angularはi18nブロックを使用するコンポーネントのハイドレーションをスキップし、それらのコンポーネントを最初から再レンダリングします。
 
 i18nブロックのハイドレーションを有効にするには、`provideClientHydration` の呼び出しに [`withI18nSupport`](/api/platform-browser/withI18nSupport) を追加します。
 
@@ -203,7 +203,7 @@ bootstrapApplication(AppComponent, {
 
 ## DOM操作を伴うサードパーティスクリプト {#third-party-scripts-with-dom-manipulation}
 
-広告トラッカーやアナリティクスなど、多くのサードパーティスクリプトは、ハイドレーションが行われる前にDOMを変更します。これらのスクリプトは、ページがAngularが期待する構造と一致しなくなるため、ハイドレーションエラーを引き起こす可能性があります。可能な限り、この種のスクリプトをハイドレーション後まで遅らせることを推奨します。`AfterNextRender` を使用して、ハイドレーション後のプロセスが発生するまでスクリプトを遅延させることを検討してください。
+広告トラッカーやアナリティクスなど、多くのサードパーティスクリプトは、ハイドレーションが行われる前にDOMを変更します。これらのスクリプトは、ページがAngularが期待する構造と一致しなくなるため、ハイドレーションエラーを引き起こす可能性があります。可能な限り、この種のスクリプトをハイドレーション後まで遅らせることを推奨します。[`AfterNextRender`](api/core/afterNextRender) を使用して、ハイドレーション後のプロセスが完了するまでスクリプトを遅延させることを検討してください。
 
 ## インクリメンタルハイドレーション {#incremental-hydration}
 

adev-ja/src/content/guide/routing/common-router-tasks.en.md

@@ -11,7 +11,7 @@ To edit an item, users click an Edit button, which opens an `EditGroceryItem` co
 You want that component to retrieve the `id` for the grocery item so it can display the right information to the user.
 
 Use a route to pass this type of information to your application components.
-To do so, you use the [withComponentInputBinding](api/router/withComponentInputBinding) feature with `provideRouter` or the `bindToComponentInputs` option of `RouterModule.forRoot`.
+To do so, you use the [`withComponentInputBinding`](api/router/withComponentInputBinding) feature with `provideRouter` or the `bindToComponentInputs` option of `RouterModule.forRoot`.
 
 To get information from a route:
 
@@ -29,23 +29,39 @@ providers: [
 
 </docs-step>
 
-<docs-step title="Add an `Input` to the component">
+<docs-step title="Add an `input` to the component">
 
 Update the component to have an `input()` property matching the name of the parameter.
 
 ```ts
 id = input.required<string>()
-hero = computed(() => this.service.getHero(heroId));
+hero = computed(() => this.service.getHero(id));
 ```
 
-NOTE: You can bind all route data with key, value pairs to component inputs: static or resolved route data, path parameters, matrix parameters, and query parameters.
-If you want to use the parent components route info you will need to set the router `paramsInheritanceStrategy` option:
-`withRouterConfig({paramsInheritanceStrategy: 'always'})`
-
 </docs-step>
+<docs-step title="Optional: Use a default value">
+The router assigns values to all inputs based on the current route when `withComponentInputBinding` is enabled.
+The router assigns `undefined` if no route data matches the input key, such as when an optional query parameter is missing.
+You should include `undefined` in the `input`'s type when there's a possibility that an input might not be matched by the route.
+
+Provide a default value by either using the `transform` option on the input or managing a local state with a `linkedSignal`.
+
+```ts
+id = input.required({
+  transform: (maybeUndefined: string | undefined) => maybeUndefined ?? '0',
+});
+// or
+id = input<string|undefined>();
+internalId = linkedSignal(() => this.id() ?? getDefaultId());
+```
 
+</docs-step>
 </docs-workflow>
 
+NOTE: You can bind all route data with key, value pairs to component inputs: static or resolved route data, path parameters, matrix parameters, and query parameters.
+If you want to use the parent components route info you will need to set the router `paramsInheritanceStrategy` option:
+`withRouterConfig({paramsInheritanceStrategy: 'always'})`
+
 ## Displaying a 404 page
 
 To display a 404 page, set up a [wildcard route](guide/routing/common-router-tasks#setting-up-wildcard-routes) with the `component` property set to the component you'd like to use for your 404 page as follows:
@@ -61,51 +77,6 @@ const routes: Routes = [
 The last route with the `path` of `**` is a wildcard route.
 The router selects this route if the requested URL doesn't match any of the paths earlier in the list and sends the user to the `PageNotFoundComponent`.
 
-## Preventing unauthorized access
-
-Use route guards to prevent users from navigating to parts of an application without authorization.
-The following route guards are available in Angular:
-
-<docs-pill-row>
-  <docs-pill href="api/router/CanActivateFn" title="`canActivate`"/>
-  <docs-pill href="api/router/CanActivateChildFn" title="`canActivateChild`"/>
-  <docs-pill href="api/router/CanDeactivateFn" title="`canDeactivate`"/>
-  <docs-pill href="api/router/CanMatchFn" title="`canMatch`"/>
-  <docs-pill href="api/router/ResolveFn" title="`resolve`"/>
-  <docs-pill href="api/router/CanLoadFn" title="`canLoad`"/>
-</docs-pill-row>
-
-To use route guards, consider using [component-less routes](api/router/Route#componentless-routes) as this facilitates guarding child routes.
-
-Create a file for your guard:
-
-```bash
-ng generate guard your-guard
-```
-
-In your guard file, add the guard functions you want to use.
-The following example uses `canActivateFn` to guard the route.
-
-```ts
-export const yourGuardFunction: CanActivateFn = (
-  next: ActivatedRouteSnapshot,
-  state: RouterStateSnapshot
-) => {
-  // your  logic goes here
-}
-```
-
-In your routing module, use the appropriate property in your `routes` configuration.
-Here, `canActivate` tells the router to mediate navigation to this particular route.
-
-```ts
-{
-  path: '/your-path',
-  component: YourComponent,
-  canActivate: [yourGuardFunction],
-}
-```
-
 ## Link parameters array
 
 A link parameters array holds the following ingredients for router navigation:

adev-ja/src/content/guide/routing/common-router-tasks.md

@@ -11,7 +11,7 @@
 そのコンポーネントは、食料品アイテムの `id` を取得して、ユーザーに正しい情報を表示できるようにする必要があります。
 
 ルートを使用して、このタイプの情報をアプリケーションコンポーネントに渡します。
-これを行うには、`provideRouter` を使用した [withComponentInputBinding](api/router/withComponentInputBinding) 機能、または `RouterModule.forRoot` の `bindToComponentInputs` オプションを使用します。
+これを行うには、`provideRouter` を使用した [`withComponentInputBinding`](api/router/withComponentInputBinding) 機能、または `RouterModule.forRoot` の `bindToComponentInputs` オプションを使用します。
 
 ルートから情報を取得するには:
 
@@ -29,23 +29,39 @@ providers: [
 
 </docs-step>
 
-<docs-step title="コンポーネントに `Input` を追加する">
+<docs-step title="コンポーネントに `input` を追加する">
 
 パラメータ名と一致する `input()` プロパティを持つようにコンポーネントを更新します。
 
 ```ts
 id = input.required<string>()
-hero = computed(() => this.service.getHero(heroId));
+hero = computed(() => this.service.getHero(id));
 ```
 
-NOTE: 静的なルートデータ、解決されたルートデータ、パスパラメータ、マトリックスパラメータ、クエリパラメータなど、すべてのルートデータをキーと値のペアでコンポーネントの入力にバインドできます。
-親コンポーネントのルート情報を使用する場合は、ルーターの `paramsInheritanceStrategy` オプションを設定する必要があります。
-`withRouterConfig({paramsInheritanceStrategy: 'always'})`
-
 </docs-step>
+<docs-step title="Optional: Use a default value">
+`withComponentInputBinding` が有効な場合、ルーターは現在のルートに基づいてすべての入力に値を割り当てます。
+オプションのクエリパラメータが欠落している場合など、ルートデータが入力キーと一致しない場合、ルーターは `undefined` を割り当てます。
+入力がルートによって一致しない可能性がある場合は、`input` の型に `undefined` を含める必要があります。
+
+`input` の `transform` オプションを使用するか、`linkedSignal` でローカル状態を管理することで、デフォルト値を提供します。
+
+```ts
+id = input.required({
+  transform: (maybeUndefined: string | undefined) => maybeUndefined ?? '0',
+});
+// or
+id = input<string|undefined>();
+internalId = linkedSignal(() => this.id() ?? getDefaultId());
+```
 
+</docs-step>
 </docs-workflow>
 
+NOTE: 静的なルートデータ、解決されたルートデータ、パスパラメータ、マトリックスパラメータ、クエリパラメータなど、すべてのルートデータをキーと値のペアでコンポーネントの入力にバインドできます。
+親コンポーネントのルート情報を使用する場合は、ルーターの `paramsInheritanceStrategy` オプションを設定する必要があります。
+`withRouterConfig({paramsInheritanceStrategy: 'always'})`
+
 ## 404 ページの表示 {#displaying-a-404-page}
 
 404ページを表示するには、[ワイルドカードルート](guide/routing/common-router-tasks#setting-up-wildcard-routes) を設定します。このルートの `component` プロパティは、404ページに使用したいコンポーネントに設定します。
@@ -61,51 +77,6 @@ const routes: Routes = [
 `path` が `**` の最後のルートは、ワイルドカードルートです。
 ルーターは、要求されたURLがリストの先頭にあるパスと一致しない場合、このルートを選択し、ユーザーを `PageNotFoundComponent` にルーティングします。
 
-## 権限のないアクセスの防止 {#preventing-unauthorized-access}
-
-ルートガードを使用して、ユーザーが権限なしでアプリケーションの特定の部分にナビゲートできないようにします。
-Angularでは、次のルートガードを使用できます。
-
-<docs-pill-row>
-  <docs-pill href="api/router/CanActivateFn" title="`canActivate`"/>
-  <docs-pill href="api/router/CanActivateChildFn" title="`canActivateChild`"/>
-  <docs-pill href="api/router/CanDeactivateFn" title="`canDeactivate`"/>
-  <docs-pill href="api/router/CanMatchFn" title="`canMatch`"/>
-  <docs-pill href="api/router/ResolveFn" title="`resolve`"/>
-  <docs-pill href="api/router/CanLoadFn" title="`canLoad`"/>
-</docs-pill-row>
-
-ルートガードを使用するには、[コンポーネントレスルート](api/router/Route#componentless-routes) を使用することを検討してください。これにより、子ルートのガードが容易になります。
-
-ガードのファイルを作成します。
-
-```bash
-ng generate guard your-guard
-```
-
-ガードファイルに、使用するガード関数を追加します。
-次の例では、`canActivateFn` を使用してルートをガードしています。
-
-```ts
-export const yourGuardFunction: CanActivateFn = (
-  next: ActivatedRouteSnapshot,
-  state: RouterStateSnapshot
-) => {
-  // your  logic goes here
-}
-```
-
-ルーティングモジュールで、`routes` 構成の適切なプロパティを使用します。
-ここでは、`canActivate` は、ルーターに、この特定のルートへのナビゲーションを制御するよう指示します。
-
-```ts
-{
-  path: '/your-path',
-  component: YourComponent,
-  canActivate: [yourGuardFunction],
-}
-```
-
 ## リンクパラメータ配列 {#link-parameters-array}
 
 リンクパラメータ配列には、ルーターナビゲーションの次の要素が含まれています。