2025.12.01 覚書 / 2025.12.01 memo's

自分が参考になったブログの紹介します。 / Here are some blogs that I found helpful.

Angular

Angular 21 がリリースされ、Signal Forms／@angular/aria／Vitest の3つが大きな新機能として追加された。
Signal Forms は Reactive / Template Driven の後継となる統一フォーム API で、フォームの値・状態・エラーなどすべてが Signal 化され、シンプルな構造で扱える。
HTML 側では [field] ディレクティブを付けるだけで動作し、隠れた仕組みがないため理解しやすい（ただし submit のデフォルト動作はページリロード）。
@angular/aria はアクセシビリティのみを提供するミニマルなコンポーネント群で、UI デザインは完全に開発者が自由に構築できる。
Vitest が Angular の新しいデフォルトテストフレームワークとなり、Jasmine からの移行用スクリプトも提供されるが、テストの手動修正が必要。
Jasmine の spy, clock は Vitest の fn, useFakeTimers に置き換える必要があり、fakeAsync など一部 API は利用できない。
本格的な Vitest 機能を使いたい場合は Nx / Analog がより適している。
その他、Resources API（experimental）や MCP server の改善など、多数のアップデートが含まれている。

こちらは Angular 21 + Vitest を使って、コンポーネントのユニット／統合テストを行う方法をステップ・バイ・ステップで解説するガイド記事。
Vitest をテストランナーとして使うことで、従来の Karma/Jasmine に比べてテスト速度が速く、設定がシンプルかつメンテナブルになる点を強調。
テストのセットアップ例、ブラウザモードでの実行、モック／スタブの使い方、DOM 操作確認、非同期テスト、コードカバレッジ設定など、実践的な情報が含まれており、新規／既存プロジェクトでの移行にも対応できる構成。
つまり、Angular 21 での “Vitest デフォルト化” に伴い、実際にどうテストを書いていくかを知るには非常に有用な “実践ガイド”。

2025年は AI を使った開発が一般化し、Angular 公式から AI Tutor を使って学べるチュートリアルが公開された。
Angular CLI は MCP Server を提供し、その中に AI 学習支援ツール ai_tutor が含まれている。
ai_tutor では「スマートレシピボックス」アプリを作りながら、Angular v20 の最新ベストプラクティスを学べる。
チュートリアルは GitHub（angular/ai-tutor）から開始でき、Firebase Studio でもローカル環境でも実行可能。
プロジェクト作成時に AI ツール設定が可能で、今回は Claude Code を MCP Server と連携して使用。
MCP Server を claude mcp add で登録すると、ai_tutor を使った学習が開始でき、プロジェクトを自動解析してレベルに応じた指導が受けられる。
ai_tutor はコードを読み込み、進捗管理や判断まで行い、ベストプラクティスに沿ったアドバイスもしてくれる。
演習を進めるたびに丁寧に褒めてくれるなど、実際の「チューター」のように対話的に学習を進められる点が特徴。
途中で中断しても、同じプロンプトを送るだけで続きから再開できるため、学習体験が非常にスムーズ。
AI Tutor により「写経」から「対話しながら理解して書く」学習体験へ進化し、初学者にとっても深い理解につながる仕組みとなっている。

Develop

AI を利用した開発が増える中で、AI によるコード生成／補助を使う開発者は「型のある言語」を選びやすくなっている、という指摘。
特に TypeScript やその他の静的型付け言語は、AI による「ハルシネーション（誤った／不正確なコード生成）」が起きにくいため、好まれる傾向がある。
こうした流れにより、AI ツールを導入するプロジェクトでは、開発者の「好み」よりも「AIとの親和性」が言語選定における重要なファクターとなってきている。
また、AI の利用が普及すればするほど、型付き言語がさらに広がり、AIとの相性がよい言語が主流となる「フィードバックループ」が起こるだろう、という予想。
記事によれば、実際に GitHub 上での使用言語ランキングで、最近では TypeScript が Python を抜いてトップになった — これはAIを使う開発者の増加と関係があると論じられている。
つまり、AI 支援下での開発効率、安全性、補完精度などを重視するなら、TypeScript のような静的型付け言語が「ベターな選択肢」とされる時代になってきている。

RxJS

Angular における新たなリアクティブ手法「Signals」を使って、従来の RxJS に依存しない設計を目指す完全ガイド。
Signals は状態管理と UI 再レンダリングを簡潔かつ明示的に扱えるため、RxJS のような購読 / 解除の煩雑さが減り、学習コストやバグ原因の低減につながる。
同じ機能の多くを Signals で代替でき、「event-driven」な設計や、複数の RxJS パターン（Subject / BehaviorSubject 等）を Signals で再現する試みも紹介されている。
非同期処理（API 呼び出し、リクエスト、レスポンスなど）を扱う場合でも、Signals の resource や computed / effect を組み合わせることで、安全かつ宣言的に管理できる。
Signals を使う設計では「命令型コードを避け、宣言的パターンを保つ」ことが推奨されており、コードの可読性と予測可能性が高くなる。
RxJS に比べて依存関係のトラッキングがフレームワークに深く統合されており、UI 更新や状態変化がより直感的かつパフォーマンス効率よく反映される。
ただし、RxJS のようなストリーム操作（複雑なイベント結合、Debounce、タイミング制御など）が必要な場合は、Signals 単体では不得意 — RxJS と併用する設計も考慮すべき、という注意もある。

この第2部は、Signals を使って「イベント駆動 (Event-Driven) アーキテクチャ」を実現する方法を解説。Signal を “イベント” のトリガーとして扱い、状態変更や副作用を declarative（宣言的）に処理する手法を紹介。
たとえば、signal< T | undefined > をイベント用に使い、effect() を使ってイベント発火時に特定の処理（状態リセット、ロジック実行など）を行う。RxJS の Subject に近い使い方が可能。
source() というユーティリティ関数を紹介 — 過去のイベントを再通知しないように設計されており、遅れてサブスクライブしたリスナーでも前のイベントを受け取らない。これにより、イベントの過剰反応や不整合を防げる。
この仕組みによって、ログアウト時の状態リセットや、複数ストアの同時更新など、イベント連携が必要なケースも、Signals だけで実装できる可能性がある。
ただしこの手法はまだ“実験的 / パターンとして提案された”もので、すべてのユースケースに万能ではない — 余裕を持って設計 / 評価する必要がある。

らいふうっどの閑話休題