#Angular

28 件の記事

Angular上級 #1 Change Detection — Default、OnPush、Zoneless
読了 9分

Angular上級 #1 Change Detection — Default、OnPush、Zoneless

Angular のパフォーマンスの心臓である Change Detection を最初から最後まで押さえます。Default と OnPush 戦略、NgZone と zone.js の役割、そして Signals を背に登場した Zoneless Angular まで扱います。

Angular中級 #7 テスト — TestBed とコンポーネントテスト
読了 11分

Angular中級 #7 テスト — TestBed とコンポーネントテスト

Angular の標準テスト環境である TestBed で Service とコンポーネントを検証する方法、mock の注入と HttpTestingController パターン、そして ComponentHarness までを整理します。

Angular中級 #6 Guards と Resolver
読了 9分

Angular中級 #6 Guards と Resolver

ルート進入前に流れを横取りする Angular の Guards と Resolver を見ていきます。関数型ガードを中心に canActivate、canMatch、canDeactivate、そしてデータをあらかじめ受け取っておく Resolver までを整理します。

Angular中級 #5 Standalone と Lazy Loading
読了 10分

Angular中級 #5 Standalone と Lazy Loading

Standalone コンポーネントの依存関係モデルを再確認し、loadComponent と loadChildren でルートを lazy に分割するパターン、そしてビルド分析と Preloading まで一度に整理します。

Angular中級 #4 コンポーネントライフサイクルフック
読了 8分

Angular中級 #4 コンポーネントライフサイクルフック

Angular コンポーネントが作られて消えるまでの流れと、その間に挟み込めるライフサイクルフックを見ていきます。ngOnInit、ngOnChanges、DestroyRef、そして Signals 時代の effect() まで扱います。

Angular中級 #3 RxJS 基礎 — Observable と Operator
読了 8分

Angular中級 #3 RxJS 基礎 — Observable と Operator

Angular の非同期標準ツールである RxJS の核となる概念を整理します。Observable の構造、よく使う operator、Subject と BehaviorSubject、そして Signals との関係まで一歩ずつ見ていきます。

Angular中級 #2 Template-driven Forms との比較
読了 9分

Angular中級 #2 Template-driven Forms との比較

Angular の 2 つ目のフォーム方式である Template-driven Forms を見ていき、直前に扱った Reactive Forms とどう違うのか、いつどちらを選べばよいかを比較します。

Angular中級 #1 Reactive Forms とフォームバリデーション
読了 8分

Angular中級 #1 Reactive Forms とフォームバリデーション

Angular の実務フォームの標準である Reactive Forms を整理します。FormGroup・FormControl・Validators はもちろん、カスタム Validator や FormArray、非同期バリデーションまで一度に見ていきます。

Angular基礎 #7 HttpClient で API 呼び出し
読了 7分

Angular基礎 #7 HttpClient で API 呼び出し

Angular の標準通信ツールである HttpClient を使ってバックエンド API と通信する方法を学び、Observable と toSignal を活用したモダン Angular のパターンまで整理します。

Angular基礎 #6 Router 基礎
読了 7分

Angular基礎 #6 Router 基礎

Angular Router で複数ページの SPA の骨組みを作る方法を見ていきます。provideRouter のセットアップから routerLink、動的パラメータ、子ルート、lazy loading まで一度に整理します。

Angular基礎 #5 Service と依存性注入
読了 8分

Angular基礎 #5 Service と依存性注入

Angular でビジネスロジックと共有状態をコンポーネントの外に抜き出すツール、Service と依存性注入 (DI) について見ていきます。

Angular基礎 #4 Directive と Pipe
読了 10分

Angular基礎 #4 Directive と Pipe

テンプレートの表現力を一段階引き上げる 2 つのツール、Directive と Pipe を整理します。Angular 17 の新しい制御フロー (@if、@for、@switch) を中心に、ビルトインのディレクティブとパイプ、そして自作する方法までを見ていきます。