2026.02.24 覚書 / 2026.02.24 memo's

2026.02.24 覚書 / 2026.02.24 memo's

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

Angular

dev.to

• ベテランエンジニア向けに Modern Angular で“アンラーン（学び直すべきこと）” を解説（2026 年）
• 旧 Angular との違いを強調し、過去の知識のうち 現代 Angular では不要／逆効果な概念 を例示
• 典型的なアンラーン項目：古い DI パターン、手動 DOM 操作、Imperative な状態管理
• モダン構文、Signals（Signal ベースのリアクティブ性）、コンポーネント設計の最新ベストプラクティスを推奨
• 既存の Angular コードを 保守性と生産性を高めるよう再評価する視点 を提供

zenn.dev

• Angular の Pipe（パイプ）機能の基本と用途を整理 した技術解説記事。
• Pipe はテンプレート表示を整形する仕組みで、表示ロジックをコンポーネントから分離できる。
• よく使う場面：3桁区切り、通貨、割合、日付のフォーマットなど。
• 組み込み Pipe（CurrencyPipe、PercentPipe、DatePipe） の使い方を例示。
• カスタム Pipe の定義方法と活用例 をコード付きで紹介。

zenn.dev

• Angular Material の TreeControl（FlatTreeControl・NestedTreeControl）が deprecated（非推奨）になった現状を整理。
• 2025年5月に公式で deprecated 指定されたが、2026年2月時点ではまだ削除されていない。
• 公式ドキュメントや examples でもまだ deprecated API が使われている。
• 新しい代替 API の明確な移行パターンは現時点では十分に整理されていない。
• したがって、移行は急ぐ必要はなく、今後のリリース情報の追跡が重要。

Develop

cpojer.net

• フロントエンドの 開発体験とツールの速度最適化に関する意識的選択 を議論する内容の可能性
• “人と AI のための最速フロントエンドツール” というコンセプトを掲げている
• 効率化のために構築されたツールやテンプレート、ワークフロー改善例
• 具体的なツールセットやベンチマークよりも 哲学／生産性向上の考え方中心

zenn.dev

• AI コーディングのベストプラクティスを実践知として整理
• AI を活用したコーディングで特に重要な 4 原則を提示：
  1. プロンプト設計（何を・どう・なぜ）
  2. 計画とタスク分割（Think first）
  3. 反復ループ（フィードバックサイクル）
  4. コンテキスト運用（1 チャット 1 テーマ）
• AI への指示方法と、品質向上のための具体的な設計思考がポイント
• AI にコードを書かせるだけでなく 設計・テスト戦略・コンテキスト共有が重要

zenn.dev

• チームでの AI コード生成フロー改善の実体験レポート
• これまでの課題：AI 実装が場当たり的でレビューコストが高い
• 改善フロー：
  1. AI にデザインドキュメント（設計書）を生成させる
  2. チームでレビュー
  3. その設計を元に AI 実装
• 実装漏れや技術的負債（理解負債）が大幅に減り品質向上
• 設計先行・レビュー文化が AI 活用成功の鍵

Rust

blog.rust-lang.org

• Rust 公式ブログで Rust デバッグ体験に関するアンケート（Survey）を開始
• Rust 開発者がデバッグで困る点の把握と改善を目的
• 代表的な課題：
  • GDB / LLDB 等のデバッガー横断でのサポート差
  • async コードのデバッグ向上
  • Rust 型の可視化（visualizers）
  • デバッガ内で Rust 式評価のサポート
• アンケートは匿名で実施中（締切：2026/3/13）

dev.to

• Ladybird Browser が C++ から Rust へ一部コードを移行した事例 が話題に。
• Rust 採用の背景：メモリ安全性向上と保守性 を狙った選択。
• 一部コードは Rust で書き換えつつ、C++ と併存する形で進行中。
• AI などの支援により移行速度改善の可能性があるという議論も存在。

RxJS

dev.to

• Angular で HTTP リクエスト結果を RxJS の shareReplay オペレーターでキャッシュ する方法を解説。
• 単純なキャッシュ実装の問題点：複数呼び出しで複数リクエストが発生したり、メモリリークのリスク。
• shareReplay(1) を使うことで 最後のレスポンスを共有して再リクエストを防ぐ。
• 注意点として、エラーもキャッシュしてしまう可能性があるため retry / catchError と組み合わせるべき。

2026.02.08 覚書 / 2026.02.08 memo's

2026.02.08 覚書 / 2026.02.08 memo's

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

Angular

dev.to

• レガシーAngularプロジェクトのための実用的なリファクタリングガイド 古いAngularコードベースで、Angularの推奨スタイルガイド（v21以降）にある .component / .service などの サフィックス削除を安全に実行する方法 を解説。
• 手作業でのリネーム vs 自動化ツール
  • 手作業で重要な箇所を管理しつつリネームするDeterministic（決定論的）アプローチ
  • AIアシストでcollision（名前衝突）を解決する方法、AIプロンプト活用まで紹介。
• Namespace Collision（名前衝突）の問題点と対策 同じ名前になってしまうケースの例とそれを防ぐための戦略を説明。
• 狙いは Angular v21+ のスタイルガイドへ安全に移行すること。

dev.to

• Angular v21.2でテンプレート内のアロー関数が直接使えるように
  • これまで難しかったテンプレート内での関数定義やSignalの更新を インラインのアロー関数で書けるようになる。
• メリット
  • コンポーネントクラスに余計なメソッドを用意する必要がなくなる
  • Signalsなどの状態更新をテンプレート直書きでき ボイラープレート削減
• 注意点（Gotchas）
  • テンプレート内で使う際の制限やパフォーマンス面での注意もあるため、乱用は避けるべきとの指摘。
• Angularのテンプレート表記がよりモダンになる進化 への一歩。

Design

qiita.com

• AIを活用したUIデザイン生成ツール「Pencil」についての体験記事 Claude Code や Cursor と連携し、AIにUIを自動生成させることができる新ツール「Pencil」 の紹介。
• Pencilの特徴
  • FigmaのようなUIデザインツールだが、AI（Claude Code／Cursor）と連携して AI主体でUIを作成・編集可能
  • IDEやコードベースと連携して作業できる点が特徴的。
• 体験感想
  • 通常のUIデザインツールと異なり、コードからデザインを生成・編集できる点が魅力
  • 既存デザインツールと比べると細かな調整はまだ課題あり。
• 結果、AIを前提としたデザイン生成と開発の統合を実感する内容。

note.com

• 「デザイン変更（リデザイン）はなぜ起きるのか？」という考察記事 日常で目にする様々なデザイン更新について、変化の背景と周期を分析。
• 主な内容
  • WebアプリやアプリUIは約 3〜5年 程度で大きく変わる傾向
  • 企業ロゴは 企業戦略や価値観の変化 として 10〜20年 に一度更新される
  • モノやファッションは 世代交代/流行の再来 という形で周期的に変化
• デザイン変化の理由は「飽き」ではなく 技術進化／ユーザー行動／価値観変化 にある、という説明。 ([note（ノート）][4])

NgRx

dev.to

• 主な追加内容
  • withDevtools() を通じて Redux Devtoolsへ直結しやすくする支援機能
  • withStorageSync() で Web Storage/IndexedDB と状態同期
  • minorで追加された withResource() / withEntityResources() などのリソース対応
  • Mutations API の導入など、実装パターン強化
• 主要改善点
  • イベントやReducerの統合、Undo/Redo なども扱いやすくなっている傾向。
• NgRx SignalStore をより柔軟・便利に使うためのツールセット。

Nx

nx.dev

• 主なロードマップの方向性
  • 自律AIエージェント統合：コードベース全体を理解し、最適な変更を自動提案/適用
  • Self-Healing CI：失敗したCIを自動修正する機能強化
  • Synthetic Monorepo：複数レポジトリを統合してモノレポの利点を享受
  • タスク分散・最適化の強化：CIタスクを効率的に実行
  • Polyglot対応：Python、.NET、Gradle/Maven といった JS以外の言語サポート強化
  • インクリメンタルプロジェクトグラフ やツールチェーン対応の改善
• ゴール
  • 単なるビルド・モノレポツールから、AI時代の統合開発・CI基盤へシフト。

2026.02.03 覚書 / 2026.02.03 memo's

2026.02.03 覚書 / 2026.02.03 memo's

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

Angular

dev.to

• Angular 21 で導入された Signal Forms を利用した 型安全な動的フォーム構築の解説記事。
• Signal Forms は Angular の新しい信号（signal）ベースのリアクティブフォーム API で、フォームのモデル・バリデーション・状態管理を シグナルで統一する。([angular.dev][2])
• form() 関数にシグナルで持つモデルを渡すことで、UI と状態がリアクティブに連動するフォームが作れる。([angular.dev][2])
• ただし Signal Forms はまだ低レベル API で、テンプレートやバリデーションロジックを手動で書く必要があり、汎用的な抽象化は不足。
• 記事では ng-forge Dynamic Forms というツールを使って、Signal Forms をより 設定・型安全に使える動的フォーム構築の仕組みを紹介。
• ng-forge を使うことで、フォームフィールド・条件付きロジック・計算フィールド・複数ページフローなどを 宣言的に定義可能にする。

zenn.dev

• Angular プロジェクトにおける Vitest の Browser Mode + Testing Library の組み合わせについて説明。
• 結論：Vitest の Browser Mode で実行するテストでは、DOM 向けのカスタムアサーション（例：toBeVisible, toBeDisabled）が標準で利用できるため、従来の追加パッケージ @testing-library/jest-dom は不要。
• Angular CLI 公式の Vitest サポートを利用すれば、Angular でも Vitest + Testing Library のテスト環境構築が可能。
• テストライブラリとして Angular Testing Library は引き続き有用で、DOM テストを快適に書ける。
• Browser Mode の expect には、Testing Library 相当の DOM カスタムマッチャが最初から統合されており、追加設定なしでリトライ機能付きアサーションが使える。
• Vitest Browser Mode へ移行することで、Jest や Karma/Jasmine からの脱却が進む可能性や、モダンな開発者体験の向上が期待できるという趣旨。

RxJS

dev.to

• Angular の RxJS を利用した状態管理の総合ガイド。Observables・Subjects・BehaviorSubjects を使った管理方法を解説。
• RxJS は Angular の 非同期データストリーム処理の基盤ライブラリであり、State 管理にも適している。
• BehaviorSubject を状態の「源（state store）」として使い、コンポーネント側には Observable を暴露することで購読させる設計が基本。
• このパターンにより、外部ライブラリ（例：NgRx）に頼らずとも、単純で強力な状態管理が RxJS のみで構築できる。
• RxJS 演算子を利用することで、派生状態 (derived state) やデータ変換ロジックを効率的に実装可能。
• 記事全体を通じて、RxJS の基本概念と Angular との統合方法を丁寧に説明している。

2026.01.25 覚書 / 2026.01.25 memo's

2026.01.25 覚書 / 2026.01.25 memo's

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

Angular

dev.to

• Angular の公式ニュースシリーズ “Ng-News” の Angular 21.1 に関する更新まとめ。
• このリリースでは Signal Forms（信号ベースのフォームAPI） の成熟や改善点が話題になっている。Signal Forms はAngularチームが ng-Poland 2024で発表し、1年をかけて本格搭載された。
• Angularチームがどのように機能を段階的に提供しているか、コミュニティやエコシステムのトピックも含めて紹介されている。

dev.to

• ルーティングは単にパス定義や遷移だけでなく、状態・制御フロー・アーキテクチャの重要な部分として扱う必要がある点を説明。
• 実際のアプリでの ルートパラメータやクエリパラメータの流れ、データの流れ、正しく安全に消費する方法 を解説。
• Router や ActivatedRoute、RxJS を組み合わせて、複雑なルーティング状態を管理する「実運用志向のリファレンス」として構成されている。

dev.to

• Angular 21.1 で導入されたテンプレート記法の強化についての記事。
• テンプレート内で 配列やオブジェクトを直接組み立てる機能（スプレッド構文 ... のサポート）が追加された。
• これにより、従来必要だったヘルパーメソッドや補助コードを減らし、UIロジックをテンプレート内に集約できるようになった。
• 実例として、複数配列の結合やテンプレート内オブジェクト拡張が紹介されている。

yogeshraghav3043.medium.com

• Zoneless Angular（Zone.js非依存モード） は「単純な drop-in（入れ替え）」ではなく、従来の Zone.js 前提の仕組みとの違いに注意が必要と指摘。
• アップグレード後に ユニットテストが失敗したり、ビルド・ツール周りで予期せぬ問題 が発生し生産性に影響が出た点も共有。
• こうした変更点はドキュメントだけで把握しづらく、現場での検証と対策が重要であると述べられている。

Rust

blog.rust-lang.org

• Rust 1.93.0 が正式リリース。安定版アップデート。
• 静的リンク向け musl 1.2.5 への更新（DNS リゾルバー改善など）。
• グローバルアロケータがスレッドローカルストレージを使用可能に。
• asm! 内の個々の行に cfg 属性を付与可能にする改善。
• 複数の API を安定化（std::fmt::from_fn など）。
• その他コンパイラ／標準ライブラリの細かな改善。

dev.to

• FFI（Foreign Function Interface）とは：Rust で他言語関数を呼び出したり、他言語からRustを呼べる仕組み。
• 通常 C ABI を利用し、extern "C" を介して関数を定義／宣言。
• 名前マングリングを防ぐ #[no_mangle] などの属性が重要。
• データレイアウトやポインタ、メモリ管理／所有権の扱いに注意が必要。
• FFI は 安全性とパフォーマンスのトレードオフを扱う際に有効。

2026.01.21 覚書 / 2026.01.21 memo's

2026.01.21 覚書 / 2026.01.21 memo's

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

Angular

dev.to

• 2026年に向けたフレームワーク動向と競争の最新ニュースをまとめたエピソード。
• Ryan Carniato（Solid.js クリエイター）の視点を紹介し、フレームワーク間で SSR（サーバーサイドレンダリング） や非同期処理統合が重要になると予想。
• Angular の インクリメンタルハイドレーション（断片的なクライアント水和）が注目されている点を解説。
• フレームワークの競争は単純な機能差ではなく、開発者体験や設計哲学の違いが鍵になるとの意見。
• Angular チーム内部からの話として テンプレート型チェックの挙動 や Angular 21.1 の内部動作解説が含まれる。
• コミュニティ／エコシステムアップデート（例: Angular Three v4、ngx-dev-toolbar など）の紹介もあり。

dev.to

• 大規模 Angular アプリを NgModule なしの Standalone アーキテクチャへ移行する上での DI（依存性注入）の落とし穴とベストプラクティス を解説。
• 旧来の NgModule で成立していた DI が Standalone では 偶然うまく動いていただけ と著者が評価。
• DI の基本として providedIn: 'root' を使い singleton サービスを管理 すべき点を強調。
• bootstrapApplication に入れるべきもの／入れるべきでないものの区別（フレームワークオーバーライド vs ビジネスロジックサービス）を説明。
• Subject / BehaviorSubject を使った状態サービスの誤用と正しいルートスコープ配置の例。
• コンポーネントを providers に登録して DI する アンチパターン の指摘と代替。
• テストファイル内の DI は分離された世界なので許容される、といった実践上の注意も解説。

dev.to

• Angular の Signals（信号） はイベントストリームではなく 値の状態を表す決定論的プリミティブ であり、RxJS のようなタイミングベースの操作とは根本的に性質が異なる点を強調。
• debounce（時間遅延による入力平滑化）を そのまま Signals に適用するのは設計上アンチパターン との主張。
• なぜ Signals では debouncing が不適切か：Signals は同期再計算を前提としており、遅延や非同期を扱うべきではないため。
• 正しい構造としては、debounce を状態そのものではなく「入力ソース」に対して適用する べきと提案。
• Angular v21+ では フォームスキーマレベルでの first-class debounce のサポート など、Signal 依存性と非同期統合の改善が進んでいる。
• 記事全体は 単なるチュートリアルではなく、アーキテクチャ的な位置づけと原理論 を重視した技術ガイド。

2026.01.18 覚書 / 2026.01.18 memo's

2026.01.18 覚書 / 2026.01.18 memo's

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

Angular

dev.to

• Angular 21.1 リリースについての解説記事。
• 主要な改善点：
  • Signal Forms の強化：formField 指令やフォーカス制御メソッドの追加。
  • Control Flow: @switch ブロックで複数条件をまとめて扱えるように。
  • 画像ローダー の CDN 向けカスタム変換対応。
  • Router API：isActive が Signal化、ルート injectors の自動クリーンアップ実験的対応。
  • 開発者ツール の SSR/ハイドレーション用の安定性デバッガー追加。
  • テンプレート式で スプレッド・レスト がサポート。

dev.to

• AI エージェントにモダン Angular コードを書かせる方法 の紹介。
• 従来の AI アシスタントは 古い Angular パターン（例：コンストラクタ DI）を生成してしまう課題。
• Agent Skills（エージェント用スキル） は、AI に Angular の最新パターン（signals、inject() 等）を徹底させる “ルール集”。
• スキルは Markdown 形式 (SKILL.md) で管理し、特定条件下で AI に適用する。
• 実例として、依存注入に常に inject() を使わせる指示などが紹介。

dev.to

• Angular Material Blocks に新しい Flyout Menu（フライアウトメニュー） ブロックが追加。
• Angular CDK Overlay を使い、Tailwind CSS と組み合わせた UI パターン。
• マーケティングやナビゲーション向けのリッチなメニュー表現が可能。
• アクセシビリティ対応・実戦向け で、Angular アプリへの組み込みが容易。

qiita.com

• Angular v20 → v21 へのアップデート手順と課題 を Nx ワークスペースでの実務的観点から記録した記事。
• 更新前後の環境・依存パッケージバージョン一覧。
• Nx 特有の注意点（ライブラリバージョン整合、テスト修正など）。
• テスト修正例（async → waitForAsync、mock 対応など）や、公式チェック項目の取り扱い。
• Angular v21 の 注目変更点 もケースごとに整理。

CSS

zenn.dev

• Firefox 147 以降の全ブラウザ対応 でついに CSS だけでポップオーバーの位置指定が可能に。
• Popover API を使うと JavaScript なしで表示/非表示 を制御可能。
• Chrome・Safari では先行対応済みだった CSS Anchor Positioning が全対応。
• ポップオーバーの基準となるアンカー要素の指定方法（anchor-name）と位置調整の仕組みを丁寧に解説。
• 画面端ではみ出さない配置制御（position-try-fallbacks） など UI 実装例あり。

Develop

prettier.io

• Prettier 3.8 の公式リリースブログ。
• Angular v21.1 の構文対応 が強化（@switch…@case の連続記述など）。
• テンプレートにおける スプレッド要素の整形 も prettier 側でサポート。
• Markdown 内の Angular コードもより美しく整形。
• その他一般的なフォーマット改善・整形ルールの追加。

2026.01.11 覚書 / 2026.01.11 memo's

2026.01.11 覚書 / 2026.01.11 memo's

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

Angular

dev.to

• Signals は Observables を完全に置き換えるものではなく、「意図」を明確化する手段。
• 自分の判断基準として、
  • 状態(state) → Signal
  • 時系列的・非同期 (async over time) → Observable の使い分けが有効。
• 実践として、
  • データ取得は Observable で行い、
  • 結果を Signals に変換して UI に反映する という “両方をバランスよく使う” パターンを推奨。

dev.to

• 従来の Angular は Zone.js により、あらゆる非同期処理で自動的に変更検知を実行していた
• Zone.js は便利だが、不要な変更検知・パフォーマンス低下・デバッグの難しさ が課題
• Zoneless Angular は Zone.js を使わず、変更検知を 明示的なトリガー に限定
• 変更検知のトリガー例
  • Signals の更新
  • コンポーネントのイベント（click など）
  • Input の変更
  • 明示的な ChangeDetectorRef 呼び出し
• 非同期処理だけでは UI は更新されず、状態更新が明確に起きた時のみ再描画
• 利点
  • パフォーマンス向上
  • 変更検知の挙動が予測しやすい
  • 大規模アプリに向く
• Zoneless は必須ではなく、Signals ベース設計と相性の良い選択肢

dev.to

• Signal Forms は大規模フォーム構造を簡潔に定義・再利用できる API。
• モデル定義を分離 し再利用可能な関数化が最初のステップ。
• フォームフィールドをコンポーネント側に直接定義する代わり、共通のモデル定義を作る ことで可読性・保守性を高める。
• Signal Forms は Reactive Forms に比べて：
  • ボイラープレート削減
  • 検証ロジックをデータモデル側に集約
  • 再利用とテストが容易

medium.com

• Angular 21 では従来の ngOnDestroy に代わる DestroyRef API が利用可能。
• DestroyRef を使うと、ライフサイクルのクリーンアップ処理を明示的に登録 するだけで済む。
  • subscribe の解除やリソース解放を別途 ngOnDestroy で書く必要がなくなる。
• コード例では、タイマーや subscription を簡潔に破棄する方法を示す。

Rust

dev.to

• Rust で長年未安定な specialization（特化実装） についての思考実験。
• 特化を実装すると、特定ケースで最適化コードを書けるメリットがある（例: T: Copy なら最速 clone）。
• しかし、「特殊化実装」は Rust の所有権・ライフタイム規則と衝突し、 実行時安全性（use-after-free等）を保証しづらい という根本的な理由がある。
• 記事は具体例を通じて、そのジレンマとトレードオフを探る。

dev.to

• Rust では unsafe を使うとコンパイラの安全保証が効かなくなる（メモリ安全やデータ競合の防止が開かれる）。
• unsafe を使う主なリスク：
  • コンパイル時保証の喪失
  • 未定義動作（UB）によるクラッシュや脆弱性
  • コードの複雑性および保守性低下
• 安全に unsafe を使うためのガイドラインとして、
  • できるだけ局所化して書く
  • コメント・ドキュメントを追加
  • 十分なテスト

RxJS

dev.to

• Angularでよくある RxJS Subscription のメモリリーク問題 を解決するためのデコレーターを紹介。
• 従来は手動で unsubscribe() や takeUntil() を書く必要があり、
  • ボイラープレートが多い
  • 書き忘れや漏れが起きやすい
• 提案された @AutoUnsubscribe デコレーター をクラスに付与すると、
  • コンポーネント破棄時に全ての Subscription を自動で解除
  • ngOnDestroy を自前で書く必要がなくなる