Angular
Angular実践 #6 テストとデプロイ — トラック総仕上げ
実践講座の最終回です。作ったダッシュボードにテストを埋め、Docker でまとめて Cloudflare Pages にデプロイしたあと、GitHub Actions で CI/CD まで一周回します。そして Angular トラック 27 編をひと所で振り返ります。
Angular実践 #5 チャートとデータテーブル
ダッシュボードの肝は結局のところ可視化です。Angular Material の MatTable で並び替え・ページネーション・検索を備えたデータテーブルを作り、ng2-charts で売上・カテゴリのチャートを描いて、このダッシュボードを本物の「見える」画面に仕上げていきます。
Angular実践 #4 状態管理 — SignalStore で整理する
前回 ProductService に直接埋め込んでいたシグナル状態を、今回は @ngrx/signals の SignalStore に移して整理します。withState/withComputed/withMethods/withHooks の 4 兄弟で、状態・派生値・メソッド・ライフサイクルを 1 カ所にまとめる流れを順を追って見ていきます。
Angular実践 #3 フォーム + API で Product CRUD
実践講座の 3 本目では、認証を済ませたアプリに本格的なデータ操作を載せます。Reactive Forms と HttpClient、Resolver を組み合わせて Product を Create/Read/Update/Delete する画面を最初から最後まで作ります。
Angular実践 #2 認証と HTTP Interceptor
ダッシュボードの骨格に認証フローを埋め込みます。Reactive Forms ベースのログイン、トークンを signal で持つ AuthService、関数型 Auth Guard、そしてすべてのリクエストにトークンを自動で付ける HTTP Interceptor まで — モダン Angular で認証をひと回りします。
Angular実践 #1 ダッシュボードの骨格を作る
実践シリーズの最初の記事です。ng new でプロジェクトを作り、Angular Material を載せたあと、mat-toolbar と mat-sidenav でメインレイアウトを組み、lazy loading ルートまで骨格を整えていきます。
Angular上級 #7 パフォーマンスチューニング — Virtual Scroll、Image、Profiler
Angular アプリのパフォーマンスをビルド、ランタイム変更検知、リソースの 3 つの layer に分けて整理します。Virtual Scroll と NgOptimizedImage、Angular DevTools Profiler、Defer block まで、大きなアプリで実際に効果を出すツールを一箇所にまとめて見ていきます。
Angular上級 #6 SSR — Angular Universal とハイドレーション
Angular の SSR モデルとハイドレーション、TransferState、Pre-rendering まで — モダン Angular のサーバーサイドレンダリングを一度に整理します。
Angular上級 #5 NgRx 入門 — Store、Action、Reducer、Effect
大きなアプリの状態の流れを明示的に統べるツール、NgRx。Store/Action/Reducer/Effect の役割を 1 つの絵に置き、モダン Angular の SignalStore と Component Store まで並べて比較します。
Angular上級 #4 RxJS 深掘り — カスタム operator と Scheduler
中級で扱った RxJS の基礎の上に、実戦で本当の差を作る深掘りトピックを整理します。higher-order Observable、並行性制御 operator、カスタム operator、Scheduler、marble testing まで扱います。
Angular上級 #3 動的コンポーネントと ViewContainerRef
ランタイムにコンポーネントを動的に生成するパターンを整理します。ViewContainerRef と createComponent から @defer、ngComponentOutlet、CDK Portal、動的インジェクター、そしてメモリ管理まで一度に扱います。
Angular上級 #2 Signals 深掘り — computed、effect、model
Angular の新しいリアクティブモデルである Signals を本格的に覗き込みます。computed、effect、input/output/model、linkedSignal、RxJS との連携まで一箇所に整理します。