らいふうっどの閑話休題

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

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 APIisActive が 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 なしで表示/非表示 を制御可能。
  • ChromeSafari では先行対応済みだった 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 を自前で書く必要がなくなる

2026.01.08 覚書 / 2026.01.08 memo's

2026.01.08 覚書 / 2026.01.08 memo's

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

Angular

dev.to

  • Angular 18+ で導入された新しいレンダー関連フック機能を中心に解説している記事。
  • afterNextRender()初回の DOM 描画完了後にコールされ、DOM 測定・フォーカス制御などに便利。ngAfterViewInit と違い、ブラウザ側のスタイル適用後の正確な DOM 情報を扱える。
  • afterEveryRender()コンポーネントレンダリングされるたびに呼ばれる。レンダーごとのログや UI 同期に適する。
  • afterRenderEffect():Signal の依存関係を自動トラッキングし、シグナルが変わるたびに再実行されるリアクティブ効果。DOM と再レンダーを結びつける最適な方法。
  • 旧ライフサイクル(例:ngAfterViewInit())との違い、各フックのベストユースケースも実例付きで説明。

dev.to

  • NgRx のような複雑な状態管理を、Angular Signals に置き換える方法を紹介。
  • Signals を使うメリット
    • よりシンプルで直感的なリアクティブモデル
    • ボイラープレートの削減
    • 状態更新が即座に UI に反映される
    • NgRx のようなアクション・リデューサー体系に依存しない
  • 置き換えのポイント
    • Signals を単体で状態ソースとして設計
    • Angular のコンポーネント内で直接信号の読み書きを行い、ストア抽象化を過度に持たせない
    • よくある NgRx のパターン(アクション、エフェクト管理)を Signals で表現する工夫例を提示
  • 制御を失わないためのテクニック
    • Signals のカプセル化方法
    • 外部 API との非同期処理をどう扱うか
    • 大規模アプリでも状態の追跡可能性を維持する考え方
  • 結論として NgRx の全てを完全に否定せず、Signals を自然に導入する手法を示す内容。

medium.com

  • Angular の @ViewChild() を使う際に実際のバグにつながりやすい典型的なミスを紹介。
  • よくある誤りと注意点
    1. static: true/false の誤った設定によるレンダリングタイミングのズレ。
    2. View 初期化前に DOM 要素にアクセスしてしまうパターン。
    3. 不適切な null チェックの欠如。
    4. コンポーネントの再描画後に古い参照が残る問題。
    5. ViewChild で参照した DOM を変更して Angular の変更検知を壊す振る舞い。
  • プロダクションコードで ViewChild を安全に使うための実践的なベストプラクティスも提示。
Rust

kobzol.github.io

  • Rust コントリビュータ Kobzol による 2025 年の Rust コミット / PR 活動の振り返りログ。
  • 年間統計
    • 2025 年に Kobzol が開いた PR は 1497 件。うち 1160 件が Rust コミュニティ関連。
    • 50 以上の Rust 公式リポジトリに貢献。
    • コードレビューやドキュメント修正も多数実施。
  • メンテナンス寄りの貢献が中心
    • CI 修正、設定改善、書類整理など、地味だがプロジェクト継続に必要な作業が多い。
  • コミュニティ関与
    • Rust Foundation のプロジェクト改善や、Rust Week などイベント参加歴も紹介。

2026.01.04 覚書 / 2026.01.04 memo's

2026.01.04 覚書 / 2026.01.04 memo's

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

Angular

dev.to

  • 2025年のAngularの主要トピックは Signal周りの進化(特にResource APIとSignal Forms)と AI対応の方向性 が中心。
  • Signal Forms がAngular 21に登場。旧来のtemplate-driven/Reactive formsを統合した形で、Signalベースでフォーム定義できる。
  • Signal FormsはTypeScript側でバリデーション定義し、柔軟な制約が可能。旧来のControlValueAccessorの必要性が減少。
  • Resource API(signalと非同期処理をつなぐ仕組み)も改善されている(例: httpResource)。
  • AngularチームはAIとの親和性も重視し、コード生成などの開発者体験を改善している(MCP Serverなど)。

dev.to

  • Cursor Rules はAI(Cursor)に対して常に守らせるルールセットで、プロジェクト固有のコーディング基準やパターンを定義する仕組み。
  • Angularプロジェクトで特に効果的で、コンポーネント構造、命名規則、リアクティブパターン、Signals/Observablesの使い分け、State管理など をルール化できる。
  • ルールを追加することで、AI支援コード生成がプロジェクト標準に一致するようになる。

dev.to

  • Angularの新しいSignal Formsによるフォーム送信方法 を解説していると思われる。
  • submit() API を使い、Signal Formsで効率よくフォーム送信/処理を行う方法を紹介。
  • Signal Formsの構造を利用し、バリデーションや値管理をSignalベースで行う利点を説明。
Playwright

zenn.dev

  • 年末年始に Playwright MCP を触ってみた体験記で、従来のPlaywrightとは根本的に異なることに気づいたという内容。
  • Playwright はコードを書いてブラウザ操作するフレームワークだが、Playwright MCP はLLMがブラウザを操作するための「翻訳レイヤー」として設計されている。
  • MCPLinux Foundation配下に移管されたニュースに触発され、この仕組みを改めて理解。
  • MCP対応版によって、アクセシビリティ情報(ARIA Snapshot)などを使った探索的テスト/自動化の新しいパラダイム が出てきている。
  • 従来のE2E(回帰)テストを超え、AIがページを理解しながら自動テスト/探索ができる可能性への感触。

dev.to

  • Rubyは30年以上続く言語であり、Ruby 4.0 は成熟した構造的言語へと進化している。
  • 4.0では内部構造に大きな改善が入り、言語自体の整合性・拡張性・保守性が高まった点が評価されている。
  • パフォーマンス、標準ライブラリの強化、メタプログラミングや型システム周りの改善などが変化点。
  • 記事はRubyの歴史的背景、4.0での改善内容、今後の展望について解説している。
Rust

dev.to

  • 著者が Rustの学習を始めたきっかけや動機 を述べた初心者向け記事。
  • Rustの特徴(所有権、借用、コンパイル時保証など)が最初の学習ポイントとして挙がる。
  • 具体的な学習方法、困った点、ツールやドキュメントの活用法を共有。
  • シンプルな例コードを用いながら、Rustの基本構造や型システムに触れている。

dev.to

  • Rustにおける Struct(構造体)とEnum(列挙型) の基礎を丁寧に解説。
  • Struct:複数のフィールドをまとめるデータ構造で、所有権とライフタイムの概念を持つ。
  • Enum:値のバリエーションを表現する列挙型で、Rust独自の強力なマッチング機構(match式)と組み合わせて使う。
  • 実例付きで定義方法、使い方、マッチ式による分岐処理方法などを紹介。

2025 年振り返り & 2026 年の抱負

2025 年振り返り

2023-2024, 2024-2025 の振り返りと抱負をサボってしまったので
心機一転振り返りたいと思います。

Advent Calendar 2025

今年は技術系から趣味のガジェット系まで、計7本の記事を執筆しました。

2025 OSS コントリビュート

コミュニティ活動では、運営スタッフとしての参加やプルリクエストを通じた貢献を継続できました。

2025 登壇

2025 年は、エンジニア達の「完全に理解した」運営の皆様に大変お世話になりました。
計 5 回の LT 登壇を通じ、アウトプットの習慣化に繋げることができました。

2025 体重

目標体重 70 kg を掲げてスタートしましたが、途中でモチベーションが維持できず、結果としてリバウンドしてしまいました。
数値で見ると悔しさが残ります。

2024

2025

2025 読書

今年は読書記録を 4 冊分しか残せませんでした。
インプットの量と質、共に来年の課題です。

2025 音楽・ライブ

2025 年は、色々なアーティストのライブを体感しました。

  • ライブ
    • Crossfatih 02/01-02
    • BAND-MAID 02/03, 02/17, 05/10, 07/12, 11/01, 12/07
    • majiko 12/14
    • Perfume 02/14-15, 03/19-20, 09/21-22
    • RIZE 06/03-04, 06/17
    • 紫今 11/06

2025 は、活動休止のニュースが多かった事が印象的です。

大好きなアーティストたちがまた万全な姿でステージに戻り
再会できる日を心待ちにしています。

2025 まとめ

例年に比べ、技術的なアウトプットはかなり積極的に行えたと感じています。
一方で、健康管理や読書など、自分自身のメンテナンスに関する「継続」には課題が残る 1 年となりました。

2026 年の抱負

継続がテーマです。

  • 個人開発をリリースを 3 つほど予定しています。
  • 目標体重 70kg に向け、一喜一憂せず地道にトレーニングを継続します。
  • SNS の時間を少し削り、1 冊でも多くの本に触れる時間を作ります。
  • 来年も心に響く音楽やライブを積極的に体感し、感性を養いたいと思います。

2025.12.23 覚書 / 2025.12.23 memo's

2025.12.23 覚書 / 2025.12.23 memo's

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

Angular

dev.to

  • Angular Ng-News 25/50 のまとめ記事(Angular 最新情報)
  • Router Providers の自動破棄(Auto-Destroy)機能 が Angular 21.1 で導入予定
    • コンポーネントレベルで提供されたサービスが Router でも破棄可能に
    • これにより不要なインジェクタのクリーンアップとメモリ管理改善が期待される
  • Signal Forms 関連のコミュニティ記事 へのリンク紹介
    • Signal Forms を既存 FormControl/FormGroup と併用できる compatForm の解説記事など
  • Angular チームメンバーの ライブ配信やコミュニティトーク の紹介
    • Signal Forms の設計意図やフィーチャー成熟度の説明あり
  • Angular コミュニティイベント情報
    • ng-Glühwein、Ng-Belgrade 2026 といったカンファレンス情報も掲載

dev.to

  • Angular プロジェクトで Jasmine + Karma から Vitest へ移行する手順ガイド
  • Vitest を使うことで 高速テスト実行・簡易な設定 が可能になるメリット
  • 移行ステップ:
    • Vitest のインストール・設定
    • Angular コンフィグ調整
    • テストコードの書き換え
    • Mock/Spy の置き換え方法
  • 環境差異や注意点(既存テストとの互換性など)について解説

zenn.dev

  • Angular における Zone.js と変更検知の仕組みを分かりやすく解説した記事
  • Zone.js の役割
    • JavaScript の非同期処理(例: setTimeout, setInterval, fetch など)を検知し、終了後に Angular の変更検知を走らせる仕組み
  • 変更検知のサンプル比較
    • 通常の値表示・ユーザーイベント・非同期更新(インターバル)のコンポーネントを例に
    • 非同期更新では Zone.js がなければ View への反映が行われないケースを説明
  • Zone.js のデメリット
    • バンドルサイズ増加や不要な変更検知によるパフォーマンス負荷
    • デバッグ時のスタックトレースが長くなり、原因特定がしづらくなる点
  • 背景
    • Angular v21 から新規プロジェクトで Zoneless モード(Zone.js を使わない)がデフォルトになった流れにも触れる

zenn.dev

  • Angular MCP(Model Context Protocol) を使ったリファクタリング体験記
  • Angular v20 CLI に搭載された MCP サーバーを試す
  • コードベースに対して 自動アシストによるリファクタリング提案 を実行
  • 実際のプロジェクトで CoreModule の廃止・プロバイダー移行を試すと精度の高いコード 生成あり
  • 所感として 個人プロジェクトでも十分役立つ可能性 に言及

zenn.dev

  • A2UI プロトコル(AI エージェントと UI をつなぐ仕組み)を触ってみた記事
  • AI エージェントがテキストではなく JSONプロトコルで UI を生成 → クライアントで描画 する仕組み
  • 既存のテキストベースエージェントと比較して 効率性・セキュリティ面の改善
  • サンプルを手元で動かし、最終的に UI が動的に構築される体験 を紹介

zenn.dev

  • Angular の signal()ソースコード初解読レポート
  • signal() が内部でどう実装されているのかを解析
    • get, set, update を返す仕組み
    • TypeScript 上で関数とオブジェクトの性質を併せ持つ構造
  • 特に update メソッドが便利な役割 を持つことに着目
  • Angular のリアクティビティの内部動作を深掘り
CSS

webkit.org

  • CSS の新しいレイアウト機能 grid-lanes を紹介 ([WebKit][5])
  • これは Masonry(ピンタレスト風)レイアウトを CSS のみで実現するための新しい仕様
  • 既存の CSS grid を拡張し、柔軟な列(レーン)レイアウトが可能に
  • レスポンシブデザインで JS を使わずに複雑な並び順を実現
  • 将来的にブラウザ実装が広がることが期待される新機能
NgRx

medium.com

  • NgRx の冗長コード(約 5,000 行)を Angular Signals で置き換えた経験談記事
  • NgRx 利用時の課題
    • 多量のボイラープレートコードがプロジェクトの理解と保守を難しくしていた点
  • Signals へ置き換えるメリット
    • Signals はよりシンプルなリアクティブモデルで、状態更新の明快さがある
    • Reducer / Action / Effect といった複雑な概念が不要になり、開発速度が向上した点
  • パフォーマンス改善
    • 記事内では「主要な部分で速度が 3 倍 になった」という表現あり
  • 移行戦略
    • なぜ Signals で十分代替できるか、どのようにコード構造が変わったかについて実践観点の解説あり
  • 総評
    • 状態管理における複雑さの削減と開発効率の向上を主な成果として強調している
Rust

dev.to

  • Rust における Slice(スライス)の概念解説
  • Slice は配列・文字列などの データ領域への参照(所有権なし)
  • JavaScript との mental model 比較で学びやすく説明
  • 実際のコード例で 部分文字列を返す関数 を通じて基本理解
  • メモリ効率や所有権モデルの関係を解説

dev.to

  • Rust で Raspberry Pi Zero 2W 向けホームオートメーションシステムを自作した話
  • 制約ある環境(512MB RAM, 低消費電力)で 約3MB バイナリ・20MB RAM 程度で動作
  • Zigbee2mqtt, MQTT broker, 自作 Rust サーバーによる構成
  • 外部依存の Node.js は重いため、Rust で軽量ソリューションを構築
  • 現実の IoT 制御・監視 UI を低負荷で実装