自分が参考になったブログの紹介します。
概要
Angular Material v22 において、ボタンのローディング状態(Loading State)の実装体験が改善されたという内容です。
従来はローディング対応を行うために、
- ボタンの無効化
- スピナー表示
- レイアウト崩れ防止
- 二重送信防止
などを個別実装するケースが多く、コンポーネントや CSS の責務が増えがちでした。
Angular Material v22 では、これらをより簡潔に扱える方向へ改善されています。
実務で嬉しいポイント
loading管理のボイラープレート削減- API 多重送信防止
- ローディング中でも UI 崩れしにくい
- Angular Signals と組み合わせやすい
個人的な感想
Angular では、
<button [disabled]="loading()"> <mat-spinner *ngIf="loading()" /> </button>
のような記述を見かけます。
今後は UI コンポーネント側に責務を寄せられそうです。
概要
Angular の Zoneless Change Detection(Zone.js を使わない変更検知) を解説した記事です。
従来 Angular は zone.js に依存し、
- Promise
- setTimeout
- DOM Event
- HTTP
などを監視して、自動的に Change Detection を実行していました。
Zoneless モードでは、必要なタイミングだけ明示的に UI 更新を行います。
更新トリガ
- Signal 更新
input()- UI イベント
asyncChangeDetectorRef
実務で嬉しいポイント
メリット
- 不要な Change Detection 削減
- Core Web Vitals 改善
- デバッグしやすい
注意点
- RxJS 主体アプリは移行コストあり
- 暗黙更新に依存した実装は見直しが必要
個人的な感想
Angular は徐々に、
Observable ↓ Signal ↓ Zoneless
へ移行している印象があります。
概要
Firefox の新デザイン方針を説明した記事です。
単なる見た目変更ではなく、
- 軽快な操作感
- 設定の見つけやすさ改善
- プライバシー導線強化
- AI 機能の透明化
が目的とされています。
主な変更点
- 丸みを帯びた UI
- タブデザイン変更
- カスタマイズ性向上
- 設定画面整理
実務で見るポイント
最近のブラウザは機能追加競争より、
「迷わせない体験」
へシフトしている印象があります。
概要
Firefox 151 Desktop が Web Serial API を正式サポートした発表です。
これによりブラウザから直接、
- マイコン
- 開発ボード
- 計測機器
- シリアルコンソール
へ接続できるようになります。
できること
- ファームウェア書込み
- センサー制御
- デバイス設定
- ログ取得
実務で嬉しいポイント
これまでは、
Chrome 系中心
でしたが、
Chrome + Firefox
へ広がる可能性があります。
個人的な感想
今後は、
if ('serial' in navigator)
のような機能検出ベースの設計が重要になりそうです。
概要
「RxJS は便利だが、全部に使う必要はない」という記事です。
単純な通知用途なら、
- EventEmitter
- EventTarget
- 独自イベント
でも十分なケースがあります。
使い分け例
| 用途 | 推奨 |
|---|---|
| 単純通知 | EventEmitter |
| DOM イベント | EventTarget |
| 状態通知 | Typed Event |
| 複雑ストリーム | RxJS |
| 合成・キャンセル | RxJS |
記事の主張
悪い例(単純用途に RxJS 過剰利用)
search$ .pipe( debounceTime(300), switchMap(...) )
単純なら、
EventEmitter
でも十分。
実務での感想
RxJS は不要ではなく、
問題に対して適切な抽象化を選ぶ
という考え方。
一方で以下は RxJS が依然として強いです。
- Stream 合成
- Retry
- Cancellation
- Reconnect
- Multiplex
- Backpressure