2026.04.19 覚書 / 2026.04.19 memo's
自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.
Angular
- Angular Q&Aで「selectorless（セレクタ不要コンポーネント）」はロードマップから一旦削除
- AIエージェントがコード生成しにくくなるリスクが理由
- 「Skills vs MCP」
- Skill（AIにコマンド知識を持たせる仕組み）がMCPを置き換えつつある
- CLI操作などをSkillで表現できるためツール依存が減る
- Zoneless Testing
- Zone.jsなしでテスト可能
fakeAsync/waitForAsyncは使えない
- Auto Tick
- タイマー系の非同期処理を簡略化するが
- fake timerとの併用でバグの原因になりやすい
👉まとめ
- Angularは「AI対応」「Zone.js脱却」に強く舵を切っている
- Angular Material の Tree でディレクトリ構造を表示する方法を解説
- Tree は「フラット」と「ネスト」の2種類がある
- フラットツリーはシンプルで扱いやすい
- ネストツリーはDOM階層で表現できる
- 旧API（treeControl / MatTreeFlattener）は非推奨
- 新API（childrenAccessor / levelAccessor）が推奨
- ネストデータは childrenAccessor を使用
- フラットデータは levelAccessor を使用
- childrenAccessor の方が実装が簡単
- 展開状態はAngular側で管理できる
- matTreeNodeDef の when で表示分岐
- matTreeNodePadding でインデント制御（フラット）
- ネストツリーは matTreeNodeOutlet が必要
- ネストツリーはインデントをCSSで制御
- 基本は「新API＋フラットツリー」が推奨構成
NgRx
- SignalStoreのCustom Featureの解説
- 共通ロジックを再利用可能にする仕組み
- 例：rank機能を複数Storeで共有
signalStoreFeature+withState+withComputedで構築- コピペを防ぎ、保守性向上
👉まとめ
- SignalStoreは「機能合成（composition）」でスケールする設計
- ComponentStoreをSignalsで再実装
- 結果：
- コード量が大幅削減
- RxJS依存が減る
- Signalsにより
- 状態更新が直感的
- subscribe管理が不要
👉まとめ
- Signalsは「軽量な状態管理」を実現する代替手段
- SignalStoreのテスト戦略
- 主な検証対象：
- state
- computed
- methods
- effects
- 特徴
- Signalsベースなので同期的にテストしやすい
- RxJSベースよりテストが簡単
👉まとめ
- SignalStoreは「テスト容易性」が大きなメリット
RxJS
- RxJSの包括的ガイド（初級〜上級）
- 基本概念
- Observable（複数値ストリーム）
- Operators（map / filterなど）
- Subscription
- Angularでの用途
- HTTP通信
- イベント処理
- フォーム
- Promiseとの違い
- 複数値・キャンセル可能・遅延実行
- 実践パターン
pipe+ operatorsでデータ変換fromEventでUIイベント処理
- ベストプラクティス
- メモリリーク対策（unsubscribe）
- 適切なoperator選択
👉まとめ
- RxJSは依然としてAngularの基盤だが
- Signalsとの役割分担が重要になっている
