Startup Angular #11.LT

ngAfterViewInit を卒業しよう ― afterRenderEffect で View ロジックをシンプルに ― Startup Angular #11 バレンタインLT会

自己紹介 akihiko.KIgure a.k.a グレさん 渋谷とグンマー帝国の 2 拠点でフロントエンド開発をしています。 AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。

• https://share-me.design/lifewood

個人的推しOSS ※アルファベット順 Angular Nx RxJS

Q： @ViewChild から viewChild の移行していますか？ 1️⃣ 移行した／移行している 2️⃣ まだ未着手

今日話す事 ・ありがちな ngAfterViewInit + @ViewChildren ・afterRenderEffect での書き換え ・「何が楽になるのか」 今日話さない事 ・Signals の基礎 ・Angular 全ライフサイクルの網羅

afterXXX = Angular v18.x で導入された 「レンダー後に動く」新しいフック機能です API いつ呼ばれる？ 主な用途 afterNextRender 初回描画後 DOM 測定 / フォーカス afterRenderEffect 依存 Signal 変更時 DOM × リアクティブ afterEveryRender レンダー毎 ログ / UI 同期

ngAfterViewInit + ViewChildren.changes の実装例

ngAfterViewInit + ViewChildren.changes の特徴・課題 観点 内容 呼ばれるタイミング View 初期化後 + list が変更されたとき DOM の状態 CSS / レイアウトが確定する前の可能性あり 記述量 多い（Observable・destroy 管理） 設計思想 Angular 従来の「ライフサイクル + RxJS」 よくあるツラさ ・ViewChildren.changes は初回に来ない ・DOM サイズ / scroll がズレる ・RxJS + lifecycle = 脳内スタックオーバーフロー

afterNextRender の実装例

afterNextRender の特徴・課題 観点 内容 呼ばれるタイミング 初回レンダリング完了後に1回 DOM の状態 CSS / レイアウト反映後 破棄処理 不要 設計思想 「初回描画後の DOM を安全に触る」 向いている用途 ・DOM サイズ測定 ・focus() / scrollIntoView() ・初期レイアウト調整 注意点 ・2回目以降の再レンダリングでは呼ばれない ・「DOM が変わるたびに処理したい」用途には不向き

effect + runInInjectionContext + afterNextRender の実装例

effect + runInInjectionContext + afterNextRender の特徴・課題 観点 内容 呼ばれるタイミング Signal 変更 → 次回レンダー完了後 DOM の状態 CSS / レイアウト反映後（描画後） 破棄処理 不要（effect が自動管理） 設計思想 「Signal 変化後の DOM を安全に触る」構成 向いている用途 ・初回描画後の focus / scrollIntoView ・list 件数変化後のスクロール調整 ・ViewChild 変更に追従する DOM 後処理 注意点 ・effect 再実行のたびに afterNextRender が登録される（多重実行に注意） ・runInInjectionContext が入り、コードが読みにくい ・「初回だけ」なら afterNextRender 単体で十分な場合もある

effect + runInInjectionContext + afterNextRender のまとめ できるけど、ちょっと重い構成。 もっとシンプルに書きたい・・・・。

afterRenderEffect の実装例

afterRenderEffect の特徴・課題 観点 内容 呼ばれるタイミング レンダリング後・依存 Signal が変わるたび DOM の状態 常に最新 & レイアウト確定後 destroy 管理 自動 設計思想 「DOM × Signal × 再レンダリング」 向いている用途 ・DOM 要素数に応じた再計算 ・Resize / 再配置 ・ViewChildren.changes の置き換え

3つの違いを一目で比較 1. 初回だけ → afterNextRender 2. 毎回 → afterEveryRender 3. DOM × 状態 → afterRenderEffect （今回の主役） 今日覚えて帰ってほしいのは、上記 3 です 項目 Before 初回実行 afterNextRender afterRenderEffect （changes依存） 再実行 changes時のみ DOM安定性 △ ◎ ◎ RxJS 必要 不要 不要 destroy管理 手動 不要 不要 Signal対応

公式ドキュメント afterRenderEffect AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。

• https://angular.jp/api/core/afterRenderEffect

参考記事 Understanding afterNextRender(), afterEveryRender(), and afterRenderEffect() in Angular 18+ AI QR 生 コ ー 成 ド コ ンテンツは誤り を含む可能性があり ます。

• https://dev.to/kafeel-ahmad/understanding-afternextrender-aftereveryrender-and-afterrendereffect-in-angular-18-3bjj

ま と め ・ngAfterViewInit は、もう主役じゃない ・ViewChildren + subscribe は不要 ・afterRenderEffect は DOM × Signal の最適解

ngAfterViewInit を卒業できるよ にんげんだもの ぐれを

ご静聴ありがとうございました！