2025.07.27 覚書 / 2025.07.27 memo's
自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.
Angular
- Angular v20.2で導入予定のネイティブなEnter／LeaveアニメーションAPIを紹介
- 要素がDOMに追加・削除される際に簡単にアニメーションを適用可能に
- CSSクラスの付け外しだけで実装でき、複雑な制御もコールバックでサポート
- Angular v20.2で
animate.enterやanimate.leave属性が新導入 animate.enter="クラス名"で出現時に指定CSSアニメーションを自動付与・解除- 動的クラス（文字列配列）やイベントバインディングによる柔軟制御も可能
- サードパーティアニメーションライブラリとも高い親和性あり
- 開発者プレビュー段階ながら期待が高まるAPI
- RxJS の BehaviorSubject から Angular Signal への置き換え手法
signal()：状態保持用、computed()：派生状態対応.next()の代わりに.set()または.update()を使用- シンプルな状態やUIフラグ、導出値管理におすすめ
- Observableとの併用は最小限にし、Signal中心の設計が推奨される
- Angular v20.1を対象にした簡易なAOS（Animate On Scroll）ライブラリの検証実装
- シンプル構造で1種類のアニメーションだけを提供
- 拡張性もあり、TailwindCSSなどとの組み合わせに向いている
- Angular v16以降で
setTimeoutを代替するSignal APIの活用法 - コンポーネントがクリーンでリアクティブ、予測可能になる
setTimeoutによるタイミング調整を不要とし、構造的な反応処理を実現
Develop
- 「AIはWeb開発者を置き換えるか？ 現在のツールと限界」についての分析
- WebAssemblyの現状と用途の整理
- 「State of Dev 2025」調査から得た知見
- アクセシビリティを早期に改善する３つの簡単な方法
- Babylon.jsを使った3D製品コンフィギュレーターの構築事例
- JavaScriptのTC39で提案されている「proposal‑composite」について解説
- proposal‑compositeは、内容が同じであれば異なる参照のオブジェクトも同一として扱える新機能を提案
- 従来のJavaScriptでは、
MapやSetに同じ内容のオブジェクトを登録しても異なるキーとして扱われてしまう問題があった
- 従来のJavaScriptでは、
- 比較戦略として、
SameValueZeroに基づく比較と、ネスト構造に対する再帰的な比較を採用 proposal-record-tupleやproposal-iterator-uniqueとの関連も説明し、JS標準の今後の発展を提示- 使い所としては、オブジェクトの重複検出、
includes／Set／Mapでの利用などのケースが想定される - Stage 1提案ながら、採用されればJSのオブジェクト比較の常識が変わる可能性があると期待される
State management
- Angularにおける状態管理手法として、Signals・NgRx・RxJSそれぞれを比較
- 「最新状態のみ追いたいならSignal、全て追跡したいならObservable」など用途別適材適所の提案
- 複雑なイベントやデータ取得には RxJS や Subject の方が向いているケースも多い
- Signals はシンプルでパフォーマンスにも優れるが、用途と設計に応じた選択が重要
