From 046458829ff681f61c00d405a05364863d476dc1 Mon Sep 17 00:00:00 2001 From: mzkmnk Date: Mon, 24 Mar 2025 21:18:15 +0900 Subject: [PATCH 01/15] chore: rename `skipping-subtrees.md` `skipping-subtrees.en.md` --- .../{skipping-subtrees.md => skipping-subtrees.en.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename adev-ja/src/content/best-practices/runtime-performance/{skipping-subtrees.md => skipping-subtrees.en.md} (100%) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.en.md similarity index 100% rename from adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md rename to adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.en.md From 07b9181511856b5d3837e113563ed4ae7cc8d393 Mon Sep 17 00:00:00 2001 From: mzkmnk Date: Mon, 24 Mar 2025 23:05:17 +0900 Subject: [PATCH 02/15] =?UTF-8?q?feat:=20`skipping-subtrees.md`=E3=81=AE?= =?UTF-8?q?=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime-performance/skipping-subtrees.md | 132 ++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md new file mode 100644 index 000000000..10c177bca --- /dev/null +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -0,0 +1,132 @@ +# コンポーネントサブツリーをスキップする + +JavaScriptは、デフォルトでは、複数の異なるコンポーネントから参照できる可変データ構造を使用します。Angularは、データ構造の最新の状態がDOMに反映されるように、コンポーネントツリー全体で変更検知を実行します。 + +変更検知は、ほとんどのアプリケーションにとって十分に高速です。ただし、アプリケーションが特に大きなコンポーネントツリーを持っている場合、アプリケーション全体で変更検知を実行すると、パフォーマンスの問題が発生する可能性があります。これは、コンポーネントツリーのサブセットでのみ変更検知が実行されるように構成することで対処できます。 + +アプリケーションの一部が状態変化の影響を受けないと確信できる場合は、[OnPush](/api/core/ChangeDetectionStrategy)を使用して、コンポーネントのサブツリー全体の変更検知をスキップできます。 + +## `OnPush`の使用 + +OnPush変更検知は、Angularにコンポーネントのサブツリーの変更検知を次の場合**のみ**実行するように指示します。 + +* サブツリーのルートコンポーネントが、テンプレートバインディングの結果として新しいinputを受け取った場合。Angularは、inputの現在と過去の値を`==`で比較します。 +* Angularが、OnPush変更検知を使用しているかどうかに関係なく、サブツリーのルートコンポーネント、または、その子でイベント *(例えば、イベントバインディング、outputバインディング、または`@HostListener`を使用)* を処理する場合。 + +コンポーネントの変更検知戦略を`@Component`デコレーターで`OnPush`に設定できます。 + +```ts +import { ChangeDetectionStrategy, Component } from '@angular/core'; +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class MyComponent {} +``` + +## 一般的な変更検知のシナリオ + +このセクションでは、Angularの動作を説明するために、いくつかの一般的な変更検知のシナリオを検証します。 + +### デフォルトの変更検知を持つコンポーネントによってイベントが処理される場合 + +Angularが`OnPush`戦略なしでコンポーネント内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、新しいinputを受け取っていない、`OnPush`を使用しているルートを持つ子孫コンポーネントのサブツリーをスキップします。 + +例として、`MainComponent`の変更検知戦略を`OnPush`に設定し、ユーザーがルート`MainComponent`を持つサブツリーの外部のコンポーネントとやり取りする場合、`MainComponent`が新しいinputを受け取らない限り、Angularは下の図のすべてのピンク色のコンポーネント（`AppComponent`、`HeaderComponent`、`SearchComponent`、`ButtonComponent`）をチェックします: + +```mermaid +graph TD; + app[AppComponent] --- header[HeaderComponent]; + app --- main["MainComponent (OnPush)"]; + header --- search[SearchComponent]; + header --- button[ButtonComponent]; + main --- login["LoginComponent (OnPush)"]; + main --- details[DetailsComponent]; + event>Event] --- search + +class app checkedNode +class header checkedNode +class button checkedNode +class search checkedNode +class event eventNode +``` + +## OnPushを持つコンポーネントによってイベントが処理される場合 + +AngularがOnPush戦略を持つコンポーネント内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、新しいinputを受け取っておらず、イベントを処理したコンポーネントの外部にある、OnPushを使用しているルートを持つコンポーネントのサブツリーを無視します。 + +例として、Angularが`MainComponent`内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、ルートである`LoginComponent`を持つサブツリーを無視します。これは、`LoginComponent`が`OnPush`を持ち、イベントがそのスコープ外で発生したためです。 + +```mermaid +graph TD; + app[AppComponent] --- header[HeaderComponent]; + app --- main["MainComponent (OnPush)"]; + header --- search[SearchComponent]; + header --- button[ButtonComponent]; + main --- login["LoginComponent (OnPush)"]; + main --- details[DetailsComponent]; + event>Event] --- main + +class app checkedNode +class header checkedNode +class button checkedNode +class search checkedNode +class main checkedNode +class details checkedNode +class event eventNode +``` + +## OnPushを持つコンポーネントの子孫によってイベントが処理される場合 + +AngularがOnPushを持つコンポーネントでイベントを処理する場合、フレームワークはコンポーネントの祖先を含め、コンポーネントツリー全体で変更検知を実行します。 + +例として、下の図では、AngularはOnPushを使用する`LoginComponent`でイベントを処理します。Angularは、`MainComponent`に`OnPush`があるにもかかわらず、`MainComponent`（`LoginComponent`の親）を含め、コンポーネントのサブツリー全体で変更検知を呼び出します。Angularは、`LoginComponent`がそのビューの一部であるため、`MainComponent`もチェックします。 + +```mermaid +graph TD; + app[AppComponent] --- header[HeaderComponent]; + app --- main["MainComponent (OnPush)"]; + header --- search[SearchComponent]; + header --- button[ButtonComponent]; + main --- login["LoginComponent (OnPush)"]; + main --- details[DetailsComponent]; + event>Event] --- login + +class app checkedNode +class header checkedNode +class button checkedNode +class search checkedNode +class login checkedNode +class main checkedNode +class details checkedNode +class event eventNode +``` + +## OnPushを持つコンポーネントへの新しいinput + +Angularは、テンプレートバインディングの結果としてinputプロパティを設定するときに、`OnPush`を持つ子コンポーネント内で変更検知を実行します。 + +例えば、下の図では、`AppComponent`は`OnPush`を持つ`MainComponent`に新しいinputを渡します。Angularは`MainComponent`で変更検知を実行しますが、`LoginComponent`も`OnPush`を持っている場合でも、新しいinputを受け取らない限り、`LoginComponent`では変更検知を実行しません。 + +```mermaid +graph TD; + app[AppComponent] --- header[HeaderComponent]; + app --- main["MainComponent (OnPush)"]; + header --- search[SearchComponent]; + header --- button[ButtonComponent]; + main --- login["LoginComponent (OnPush)"]; + main --- details[DetailsComponent]; + event>Parent passes new input to MainComponent] + +class app checkedNode +class header checkedNode +class button checkedNode +class search checkedNode +class main checkedNode +class details checkedNode +class event eventNode +``` + +## エッジケース + +* **TypeScriptコードでinputプロパティを変更する**。`@ViewChild`や`@ContentChild`のようなAPIを使用して、TypeScriptでコンポーネントへの参照を取得し、`@Input`プロパティを手動で変更すると、AngularはOnPushコンポーネントの変更検知を自動的に実行しません。Angularに変更検知を実行させる必要がある場合は、コンポーネントに`ChangeDetectorRef`を注入し、`changeDetectorRef.markForCheck()`を呼び出して、Angularに変更検知をスケジュールするように指示できます。 +* **オブジェクト参照の変更**。inputが可変オブジェクトを値として受け取り、オブジェクトを変更しても参照を保持する場合、Angularは変更検知を呼び出しません。これは、inputの以前の値と現在の値が同じ参照を指しているため、予期される動作です。 From 4c35455ecca81940460f7d6325b33bac68e18a80 Mon Sep 17 00:00:00 2001 From: mzkmnk Date: Mon, 24 Mar 2025 23:17:54 +0900 Subject: [PATCH 03/15] =?UTF-8?q?chore:=20=E7=BF=BB=E8=A8=B3=E3=81=AE?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 10c177bca..1d7d8ea52 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -105,7 +105,7 @@ class event eventNode Angularは、テンプレートバインディングの結果としてinputプロパティを設定するときに、`OnPush`を持つ子コンポーネント内で変更検知を実行します。 -例えば、下の図では、`AppComponent`は`OnPush`を持つ`MainComponent`に新しいinputを渡します。Angularは`MainComponent`で変更検知を実行しますが、`LoginComponent`も`OnPush`を持っている場合でも、新しいinputを受け取らない限り、`LoginComponent`では変更検知を実行しません。 +例えば、下の図では、`AppComponent`が`OnPush`を持つ`MainComponent`に新しいinputを渡します。Angularは`MainComponent`で変更検知を実行しますが、`LoginComponent`も`OnPush`を持っている場合でも、新しいinputを受け取らない限り、`LoginComponent`では変更検知を実行しません。 ```mermaid graph TD; From 37e554e35b24dbdd21a75a450b7939a54c60e6cb Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:55:32 +0900 Subject: [PATCH 04/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 1d7d8ea52..a7de934ca 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -10,7 +10,7 @@ JavaScriptは、デフォルトでは、複数の異なるコンポーネント OnPush変更検知は、Angularにコンポーネントのサブツリーの変更検知を次の場合**のみ**実行するように指示します。 -* サブツリーのルートコンポーネントが、テンプレートバインディングの結果として新しいinputを受け取った場合。Angularは、inputの現在と過去の値を`==`で比較します。 +* サブツリーのルートコンポーネントが、テンプレートバインディングの結果として新しいインプットを受け取った場合。Angularは、インプットの現在と過去の値を`==`で比較します。 * Angularが、OnPush変更検知を使用しているかどうかに関係なく、サブツリーのルートコンポーネント、または、その子でイベント *(例えば、イベントバインディング、outputバインディング、または`@HostListener`を使用)* を処理する場合。 コンポーネントの変更検知戦略を`@Component`デコレーターで`OnPush`に設定できます。 From abf695afc5b98d2e655fae3622fc23ed419d24d7 Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:55:45 +0900 Subject: [PATCH 05/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index a7de934ca..7c5a309c9 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -11,7 +11,7 @@ JavaScriptは、デフォルトでは、複数の異なるコンポーネント OnPush変更検知は、Angularにコンポーネントのサブツリーの変更検知を次の場合**のみ**実行するように指示します。 * サブツリーのルートコンポーネントが、テンプレートバインディングの結果として新しいインプットを受け取った場合。Angularは、インプットの現在と過去の値を`==`で比較します。 -* Angularが、OnPush変更検知を使用しているかどうかに関係なく、サブツリーのルートコンポーネント、または、その子でイベント *(例えば、イベントバインディング、outputバインディング、または`@HostListener`を使用)* を処理する場合。 +* Angularが、OnPush変更検知を使用しているかどうかに関係なく、サブツリーのルートコンポーネント、または、その子でイベント *(例えば、イベントバインディング、アウトプットバインディング、または`@HostListener`を使用)* を処理する場合。 コンポーネントの変更検知戦略を`@Component`デコレーターで`OnPush`に設定できます。 From 6524e0af1615e08302ad483ed235e5b3558ebbd6 Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:55:54 +0900 Subject: [PATCH 06/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 7c5a309c9..9515a4bb7 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -29,7 +29,7 @@ export class MyComponent {} ### デフォルトの変更検知を持つコンポーネントによってイベントが処理される場合 -Angularが`OnPush`戦略なしでコンポーネント内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、新しいinputを受け取っていない、`OnPush`を使用しているルートを持つ子孫コンポーネントのサブツリーをスキップします。 +Angularが`OnPush`戦略なしでコンポーネント内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、新しいインプットを受け取っていない、`OnPush`を使用しているルートを持つ子孫コンポーネントのサブツリーをスキップします。 例として、`MainComponent`の変更検知戦略を`OnPush`に設定し、ユーザーがルート`MainComponent`を持つサブツリーの外部のコンポーネントとやり取りする場合、`MainComponent`が新しいinputを受け取らない限り、Angularは下の図のすべてのピンク色のコンポーネント（`AppComponent`、`HeaderComponent`、`SearchComponent`、`ButtonComponent`）をチェックします: From 13ff32b60599f1c625652551b1995aca34087e9b Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:56:24 +0900 Subject: [PATCH 07/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 9515a4bb7..54e3417e3 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -31,7 +31,7 @@ export class MyComponent {} Angularが`OnPush`戦略なしでコンポーネント内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、新しいインプットを受け取っていない、`OnPush`を使用しているルートを持つ子孫コンポーネントのサブツリーをスキップします。 -例として、`MainComponent`の変更検知戦略を`OnPush`に設定し、ユーザーがルート`MainComponent`を持つサブツリーの外部のコンポーネントとやり取りする場合、`MainComponent`が新しいinputを受け取らない限り、Angularは下の図のすべてのピンク色のコンポーネント（`AppComponent`、`HeaderComponent`、`SearchComponent`、`ButtonComponent`）をチェックします: +例として、`MainComponent`の変更検知戦略を`OnPush`に設定し、ユーザーが`MainComponent`をルートとするサブツリーの外部のコンポーネントとやり取りする場合、`MainComponent`が新しいインプットを受け取らない限り、Angularは下の図のすべてのピンク色のコンポーネント（`AppComponent`、`HeaderComponent`、`SearchComponent`、`ButtonComponent`）をチェックします: ```mermaid graph TD; From b7c09fcfa2e027f5799da3d95b148eeaa9f8cef7 Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:56:33 +0900 Subject: [PATCH 08/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 54e3417e3..feb182d51 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -52,7 +52,7 @@ class event eventNode ## OnPushを持つコンポーネントによってイベントが処理される場合 -AngularがOnPush戦略を持つコンポーネント内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、新しいinputを受け取っておらず、イベントを処理したコンポーネントの外部にある、OnPushを使用しているルートを持つコンポーネントのサブツリーを無視します。 +AngularがOnPush戦略を持つコンポーネント内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、新しいインプットを受け取っておらず、イベントを処理したコンポーネントの外部にある、OnPushを使用しているルートを持つコンポーネントのサブツリーを無視します。 例として、Angularが`MainComponent`内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、ルートである`LoginComponent`を持つサブツリーを無視します。これは、`LoginComponent`が`OnPush`を持ち、イベントがそのスコープ外で発生したためです。 From f21afce52a9d5a5e7eca977fca0e4d08db12d304 Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:56:48 +0900 Subject: [PATCH 09/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index feb182d51..40914541d 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -54,7 +54,7 @@ class event eventNode AngularがOnPush戦略を持つコンポーネント内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、新しいインプットを受け取っておらず、イベントを処理したコンポーネントの外部にある、OnPushを使用しているルートを持つコンポーネントのサブツリーを無視します。 -例として、Angularが`MainComponent`内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、ルートである`LoginComponent`を持つサブツリーを無視します。これは、`LoginComponent`が`OnPush`を持ち、イベントがそのスコープ外で発生したためです。 +例として、Angularが`MainComponent`内でイベントを処理する場合、フレームワークはコンポーネントツリー全体で変更検知を実行します。Angularは、`LoginComponent`をルートとするサブツリーを無視します。これは、`LoginComponent`が`OnPush`を持ち、イベントがそのスコープ外で発生したためです。 ```mermaid graph TD; From 40f5f4c7105f0a1207fca24ad7636a99d5c173f5 Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:57:00 +0900 Subject: [PATCH 10/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 40914541d..5e45a00fc 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -101,7 +101,7 @@ class details checkedNode class event eventNode ``` -## OnPushを持つコンポーネントへの新しいinput +## OnPushを持つコンポーネントへの新しいインプット Angularは、テンプレートバインディングの結果としてinputプロパティを設定するときに、`OnPush`を持つ子コンポーネント内で変更検知を実行します。 From ba87fcddbdac980ccd621ef67391f13f0fa98ff2 Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:57:12 +0900 Subject: [PATCH 11/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 5e45a00fc..3507efa8e 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -103,7 +103,7 @@ class event eventNode ## OnPushを持つコンポーネントへの新しいインプット -Angularは、テンプレートバインディングの結果としてinputプロパティを設定するときに、`OnPush`を持つ子コンポーネント内で変更検知を実行します。 +Angularは、テンプレートバインディングの結果としてインプットプロパティを設定するときに、`OnPush`を持つ子コンポーネント内で変更検知を実行します。 例えば、下の図では、`AppComponent`が`OnPush`を持つ`MainComponent`に新しいinputを渡します。Angularは`MainComponent`で変更検知を実行しますが、`LoginComponent`も`OnPush`を持っている場合でも、新しいinputを受け取らない限り、`LoginComponent`では変更検知を実行しません。 From b29dc1ab347b5d3767b22beb12ef240e416cd077 Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:57:36 +0900 Subject: [PATCH 12/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 3507efa8e..aa732f724 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -105,7 +105,7 @@ class event eventNode Angularは、テンプレートバインディングの結果としてインプットプロパティを設定するときに、`OnPush`を持つ子コンポーネント内で変更検知を実行します。 -例えば、下の図では、`AppComponent`が`OnPush`を持つ`MainComponent`に新しいinputを渡します。Angularは`MainComponent`で変更検知を実行しますが、`LoginComponent`も`OnPush`を持っている場合でも、新しいinputを受け取らない限り、`LoginComponent`では変更検知を実行しません。 +例えば、下の図では、`AppComponent`が`OnPush`を持つ`MainComponent`に新しいインプットを渡します。Angularは`MainComponent`で変更検知を実行しますが、同じく`OnPush`を持っている`LoginComponent` は新しいインプットを受け取らない限り、`LoginComponent`では変更検知を実行しません。 ```mermaid graph TD; From 1876305518e5e14f8dd2e732eb309c9883983a85 Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:57:56 +0900 Subject: [PATCH 13/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index aa732f724..c6d903e81 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -128,5 +128,5 @@ class event eventNode ## エッジケース -* **TypeScriptコードでinputプロパティを変更する**。`@ViewChild`や`@ContentChild`のようなAPIを使用して、TypeScriptでコンポーネントへの参照を取得し、`@Input`プロパティを手動で変更すると、AngularはOnPushコンポーネントの変更検知を自動的に実行しません。Angularに変更検知を実行させる必要がある場合は、コンポーネントに`ChangeDetectorRef`を注入し、`changeDetectorRef.markForCheck()`を呼び出して、Angularに変更検知をスケジュールするように指示できます。 +* **TypeScriptコードでインプットプロパティを変更する**。`@ViewChild`や`@ContentChild`のようなAPIを使用して、TypeScriptでコンポーネントへの参照を取得し、`@Input`プロパティを手動で変更すると、AngularはOnPushコンポーネントの変更検知を自動的に実行しません。Angularに変更検知を実行させる必要がある場合は、コンポーネントに`ChangeDetectorRef`を注入し、`changeDetectorRef.markForCheck()`を呼び出して、Angularに変更検知をスケジュールするように指示できます。 * **オブジェクト参照の変更**。inputが可変オブジェクトを値として受け取り、オブジェクトを変更しても参照を保持する場合、Angularは変更検知を呼び出しません。これは、inputの以前の値と現在の値が同じ参照を指しているため、予期される動作です。 From 92dc98d6615c7a7862202eea4abded8130b6058c Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 22:58:21 +0900 Subject: [PATCH 14/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index c6d903e81..15f4cb245 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -129,4 +129,4 @@ class event eventNode ## エッジケース * **TypeScriptコードでインプットプロパティを変更する**。`@ViewChild`や`@ContentChild`のようなAPIを使用して、TypeScriptでコンポーネントへの参照を取得し、`@Input`プロパティを手動で変更すると、AngularはOnPushコンポーネントの変更検知を自動的に実行しません。Angularに変更検知を実行させる必要がある場合は、コンポーネントに`ChangeDetectorRef`を注入し、`changeDetectorRef.markForCheck()`を呼び出して、Angularに変更検知をスケジュールするように指示できます。 -* **オブジェクト参照の変更**。inputが可変オブジェクトを値として受け取り、オブジェクトを変更しても参照を保持する場合、Angularは変更検知を呼び出しません。これは、inputの以前の値と現在の値が同じ参照を指しているため、予期される動作です。 +* **オブジェクト参照の変更**。インプットが可変オブジェクトを値として受け取り、オブジェクトを変更しても参照を保持する場合、Angularは変更検知を呼び出しません。これは、インプットの以前の値と現在の値が同じ参照を指していることによる想定通りの動作です。 From b78b99acdb90152155008b65109caa8761bb0d6c Mon Sep 17 00:00:00 2001 From: mizuki Date: Tue, 25 Mar 2025 23:01:21 +0900 Subject: [PATCH 15/15] Update adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md Co-authored-by: Suguru Inatomi --- .../best-practices/runtime-performance/skipping-subtrees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 15f4cb245..7b306a15a 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -105,7 +105,7 @@ class event eventNode Angularは、テンプレートバインディングの結果としてインプットプロパティを設定するときに、`OnPush`を持つ子コンポーネント内で変更検知を実行します。 -例えば、下の図では、`AppComponent`が`OnPush`を持つ`MainComponent`に新しいインプットを渡します。Angularは`MainComponent`で変更検知を実行しますが、同じく`OnPush`を持っている`LoginComponent` は新しいインプットを受け取らない限り、`LoginComponent`では変更検知を実行しません。 +例えば、下の図では、`AppComponent`が`OnPush`を持つ`MainComponent`に新しいインプットを渡します。Angularは`MainComponent`で変更検知を実行しますが、同じく`OnPush`を持っている`LoginComponent` は新しいインプットを受け取らない限り変更検知を実行しません。 ```mermaid graph TD;