らいふうっどの閑話休題

興味のあることをゆる~く書いていく

2026.05.22 覚書 / 2026.05.22 memo's

2026.05.22 覚書 / 2026.05.22 memo's

自分が参考になったブログの紹介します。

Angular

dev.to

概要

Angular Material v22 において、ボタンのローディング状態(Loading State)の実装体験が改善されたという内容です。

従来はローディング対応を行うために、

  • ボタンの無効化
  • スピナー表示
  • レイアウト崩れ防止
  • 二重送信防止

などを個別実装するケースが多く、コンポーネントや CSS の責務が増えがちでした。

Angular Material v22 では、これらをより簡潔に扱える方向へ改善されています。

実務で嬉しいポイント

  • loading 管理のボイラープレート削減
  • API 多重送信防止
  • ローディング中でも UI 崩れしにくい
  • Angular Signals と組み合わせやすい

個人的な感想

Angular では、

<button [disabled]="loading()">
  <mat-spinner *ngIf="loading()" />
</button>

のような記述を見かけます。

今後は UI コンポーネント側に責務を寄せられそうです。

dev.to

概要

Angular の Zoneless Change Detection(Zone.js を使わない変更検知) を解説した記事です。

従来 Angular は zone.js に依存し、

  • Promise
  • setTimeout
  • DOM Event
  • HTTP

などを監視して、自動的に Change Detection を実行していました。

Zoneless モードでは、必要なタイミングだけ明示的に UI 更新を行います。

更新トリガ

  • Signal 更新
  • input()
  • UI イベント
  • async
  • ChangeDetectorRef

実務で嬉しいポイント

メリット

  • 不要な Change Detection 削減
  • Core Web Vitals 改善
  • デバッグしやすい

注意点

  • RxJS 主体アプリは移行コストあり
  • 暗黙更新に依存した実装は見直しが必要

個人的な感想

Angular は徐々に、

Observable
↓
Signal
↓
Zoneless

へ移行している印象があります。

Firefox

blog.mozilla.org

概要

Firefox の新デザイン方針を説明した記事です。

単なる見た目変更ではなく、

  • 軽快な操作感
  • 設定の見つけやすさ改善
  • プライバシー導線強化
  • AI 機能の透明化

が目的とされています。

主な変更点

  • 丸みを帯びた UI
  • タブデザイン変更
  • カスタマイズ性向上
  • 設定画面整理

実務で見るポイント

最近のブラウザは機能追加競争より、

「迷わせない体験」

へシフトしている印象があります。

hacks.mozilla.org

概要

Firefox 151 Desktop が Web Serial API を正式サポートした発表です。

これによりブラウザから直接、

  • マイコン
  • 開発ボード
  • 計測機器
  • シリアルコンソール

へ接続できるようになります。

できること

  • ファームウェア書込み
  • センサー制御
  • デバイス設定
  • ログ取得

実務で嬉しいポイント

これまでは、

Chrome 系中心

でしたが、

Chrome
+
Firefox

へ広がる可能性があります。

個人的な感想

今後は、

if ('serial' in navigator)

のような機能検出ベースの設計が重要になりそうです。

RxJS

dev.to

概要

「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