Skip to content

Commit 1133f33

Browse files
author
mzkmnk
committed
refactor: 全体的な改行の修正
1 parent b007ae5 commit 1133f33

File tree

1 file changed

+31
-9
lines changed

1 file changed

+31
-9
lines changed

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

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,13 @@ export class AppModule {}
3030

3131
## ZoneJSの削除
3232

33-
Zonelessアプリケーションは、バンドルサイズを削減するために、ビルドからZoneJSを完全に削除する必要があります。ZoneJSは通常、`angular.json``polyfills`オプションを介して、`build``test`の両方のターゲットでロードされます。ビルドから削除するには、両方から`zone.js``zone.js/testing`を削除します。明示的な`polyfills.ts`ファイルを使用するプロジェクトは、ファイルから`import 'zone.js';``import 'zone.js/testing';`を削除する必要があります。
33+
Zonelessアプリケーションは、バンドルサイズを削減するために、ビルドからZoneJSを完全に削除する必要があります。ZoneJSは通常、
34+
`angular.json``polyfills`オプションを介して、`build``test`の両方のターゲットでロードされます。ビルドから削除するには、
35+
両方から`zone.js``zone.js/testing`を削除します。明示的な`polyfills.ts`ファイルを
36+
使用するプロジェクトは、ファイルから`import 'zone.js';``import 'zone.js/testing';`を削除する必要があります。
3437

35-
ビルドからZoneJSを削除すると、`zone.js`の依存関係も不要になり、パッケージを完全に削除できます。
38+
ビルドからZoneJSを削除すると、`zone.js`の依存関係も不要になり、
39+
パッケージを完全に削除できます。
3640

3741
```shell
3842
npm uninstall zone.js
@@ -51,7 +55,8 @@ Angularは、変更検知をいつ、どのビューで実行するかを判断
5155

5256
### `OnPush`互換コンポーネント
5357

54-
コンポーネントが上記の正しい通知メカニズムを使用していることを確認する1つの方法は、[ChangeDetectionStrategy.OnPush](/best-practices/skipping-subtrees#using-onpush)を使用することです。
58+
コンポーネントが上記の正しい通知メカニズムを使用していることを確認する1つの方法は、
59+
[ChangeDetectionStrategy.OnPush](/best-practices/skipping-subtrees#using-onpush)を使用することです。
5560

5661
`OnPush`変更検知戦略は必須ではありませんが、アプリケーションコンポーネントのZoneless互換性への推奨されるステップです。ライブラリコンポーネントが`ChangeDetectionStrategy.OnPush`を使用することが常に可能であるとは限りません。
5762
ライブラリコンポーネントが`ChangeDetectionStrategy.Default`を使用する可能性のあるユーザーコンポーネントのホストである場合、子コンポーネントが`OnPush`互換ではなく、ZoneJSに依存して変更検知をトリガーする場合、子コンポーネントが更新されなくなるため、`OnPush`を使用できません。コンポーネントは、変更検知を実行する必要があるときにAngularに通知する限り(`markForCheck`の呼び出し、シグナルの使用、`AsyncPipe`など)、`Default`戦略を使用できます。
@@ -71,12 +76,17 @@ Angularは、変更検知をいつ、どのビューで実行するかを判断
7176
`MutationObserver`など、より簡単または直接的なDOM APIを代わりに使用できます。
7277

7378
<docs-callout title="NgZone.run and NgZone.runOutsideAngular are compatible with Zoneless">
74-
`NgZone.run``NgZone.runOutsideAngular`は、コードをZonelessアプリケーションと互換性を持たせるために削除する必要はありません。実際、これらの呼び出しを削除すると、ZoneJSに依然として依存しているアプリケーションで使用されるライブラリのパフォーマンスが低下する可能性があります。
79+
`NgZone.run``NgZone.runOutsideAngular`は、コードをZonelessアプリケーションと互換性を持たせるために
80+
削除する必要はありません。実際、これらの呼び出しを削除すると、ZoneJSに依然として依存しているアプリケーションで使用されるライブラリの
81+
パフォーマンスが低下する可能性があります。
7582
</docs-callout>
7683

7784
### サーバーサイドレンダリング(SSR)の`PendingTasks`
7885

79-
AngularでSSRを使用している場合、アプリケーションが「安定」しており、シリアライズできるかどうかを判断するために、ZoneJSに依存していることをご存知かもしれません。シリアライズを妨げる非同期タスクがある場合、ZoneJSを使用していないアプリケーションは、`PendingTasks`サービスを使用してAngularにこれらを認識させる必要があります。シリアライズは、保留中のすべてのタスクが削除された最初の瞬間まで待機します。
86+
AngularでSSRを使用している場合、アプリケーションが「安定」しており、シリアライズできるかどうかを判断するために、
87+
ZoneJSに依存していることをご存知かもしれません。シリアライズを妨げる非同期タスクがある場合、
88+
ZoneJSを使用していないアプリケーションは、`PendingTasks`サービスを使用してAngularにこれらを認識させる必要があります。シリアライズは、
89+
保留中のすべてのタスクが削除された最初の瞬間まで待機します。
8090

8191
```typescript
8292
const taskService = inject(PendingTasks);
@@ -85,13 +95,16 @@ await doSomeWorkThatNeedsToBeRendered();
8595
taskCleanup();
8696
```
8797

88-
フレームワークは、非同期タスクが完了するまでシリアライズを防ぐために、このサービスを内部的にも使用します。これには、進行中のルーターナビゲーションや未完了の`HttpClient`リクエストが含まれますが、これらに限定されません。
98+
フレームワークは、非同期タスクが完了するまでシリアライズを防ぐために、このサービスを内部的にも使用します。これには、
99+
進行中のルーターナビゲーションや未完了の`HttpClient`リクエストが含まれますが、これらに限定されません。
89100

90101
## テストとデバッグ
91102

92103
### `TestBed`でZonelessを使用する
93104

94-
Zonelessプロバイダー関数は、`TestBed`でも使用して、テスト対象のコンポーネントがZoneless Angularアプリケーションと互換性があることを確認できます。
105+
Zonelessプロバイダー関数は、`TestBed`でも使用して、
106+
テスト対象のコンポーネントがZoneless Angularアプリケーションと
107+
互換性があることを確認できます。
95108

96109
```typescript
97110
TestBed.configureTestingModule({
@@ -102,8 +115,17 @@ const fixture = TestBed.createComponent(MyComponent);
102115
await fixture.whenStable();
103116
```
104117

105-
テストが本番コードと最も類似した動作をすることを確認するには、可能な限り`fixture.detectChanges()`の使用を避けてください。これにより、Angularが変更検知をスケジュールしていない場合に、変更検知が強制的に実行されます。テストでは、これらの通知が発生していることを確認し、テストで手動で強制的に発生させるのではなく、Angularが状態を同期するタイミングを処理できるようにする必要があります。
118+
テストが本番コードと最も類似した動作をすることを確認するには、
119+
可能な限り`fixture.detectChanges()`の使用を避けてください。これにより、
120+
Angularが変更検知をスケジュールしていない場合に、
121+
変更検知が強制的に実行されます。テストでは、これらの通知が発生していることを確認し、
122+
テストで手動で強制的に発生させるのではなく、
123+
Angularが状態を同期するタイミングを処理できるようにする必要があります。
106124

107125
### 更新が検出されることを確認するためのデバッグモードチェック
108126

109-
Angularは、アプリケーションがZoneless互換の方法で状態を更新していることを確認するのに役立つ追加のツールも提供しています。`provideExperimentalCheckNoChangesForDebug`を使用すると、通知なしにバインディングが更新されていないことを定期的に確認できます。Zoneless変更検知によって更新されなかった更新されたバインディングがある場合、Angularは`ExpressionChangedAfterItHasBeenCheckedError`をスローします。
127+
Angularは、アプリケーションがZoneless互換の方法で状態を更新していることを
128+
確認するのに役立つ追加のツールも提供しています。`provideExperimentalCheckNoChangesForDebug`を 使用すると、
129+
通知なしにバインディングが更新されていないことを
130+
定期的に確認できます。Zoneless変更検知によって更新されなかった更新されたバインディングがある場合、 Angularは`ExpressionChangedAfterItHasBeenCheckedError`
131+
スローします。

0 commit comments

Comments
 (0)