はじめに Angular に Signal API が登場して以降、いろいろな API が signal に対応するようになっている。 この流れの中 signal based な form が v21 で experimental API として提供されようとしているため、next バージョンを使って少し試してみた。 サ…

はじめに 久しぶりに Angular のアプリケーションを新規作成したら AI ツールの設定をしてくれたことに驚いたのでその話を書く。 ng new をしたときに各 AI ツール向けの設定ファイルが配置される npm create @angular@latest my-app を実行すると次のように…

はじめに このブログを始めてから 8 年経ち、気づけば記事も 100 を超えている。 今年に入ったあたりから自分の記事を手元に置いておきたい欲がでてきていた。 道具が揃ったので GitHub リポジトリを作り、そこで管理するようにしたというお話。 ※ はてなブ…

はじめに 世の中の流れにのるべくいろんなツールを試している。これは 6 月に試した日報管理のふりかえり。 Obsidian はじめました 生成 AI と相性が良さそうな記事をよく見かけるようになっていたので Obsidian を使い始めた。 この時点ではまだ生成 AI ツ…

はじめに 流行りの Claude Code を使って Angular アプリケーションを作ってみる。 アプリケーションを作るところがメインなので、Claude Code の準備などは割愛する。 事前準備 Angular CLI があり、ゼロから Claude Code に頼ることもないので最低限の準備…

はじめに Angular には injection context と呼ばれる DI が可能なコンテキストが限られている。 アプリケーション実装中に DI するタイミングとしてよく目にするのは @Component や @Injectable のついた class の初期化時ではないだろうか？ あまり意識す…

はじめに 先日 Angular v20 が発表された。 Announcing Angular v20. The past couple of years have been… | by Minko Gechev | May, 2025 | Angular Blog 変更点は公式ブログに書いてある通りなので割愛し、実際に触ってみて気になったところをまとめてい…

はじめに Angular でフォームを使う時に対象のフォームが valid か invalid かということを気にすることは日常茶飯事である。 これらは FormControl のステータスとして管理されているが、実は valid と invalid の他にあと 2 つの状態がある。 昔からある A…

2024 年振り返り & 2025 年の抱負 - とんかつ時々あんどーなつ に月イチくらいで振り返ると書いていたのを思い出した。 思い出したときには 3 ヶ月経っていたが、ちょうどクォーターなのでここで振り返ってみる。 1 年の振り返りではないので省エネでいく。 …

はじめに 時間が経ってしまったが EMConf JP 2025 に参加してきたので感想を書く。 このカンファレンスの存在を知ったのは fukabori.fm #122 の回である。 ちなみに僕は EM をやっているわけではないが、日本中の EM が一斉に集い知見共有をするということで…

はじめに Angular のテンプレートは @if や @switch といった制御フローブロックがサポートされているため、条件に応じた表示の切り替えが簡単に実現できる。 一方で、これらは多用するとテンプレートファイルの肥大化にもつながる。 このようなとき compone…

大晦日なので今年も 1 年の振り返りをする。 2024 年振り返り 仕事 現職で丸 2 年経った。年々時の流れの早さを感じる… 採用関連で時間を使うようにもなり、去年とは別の忙しさもあった。忙しいのは相変わらずである。 プライベート 読書 毎年積ん読をどうに…

はじめに これは Angular Advent Calendar 2024 8 日目を代わりに投稿した記事です。 新規で Angular プロジェクトを作るときのコマンドは？ 突然だが、新規で Angular のプロジェクトを作るときどんなコマンドを実行するだろうか？公式ドキュメントを見ると…

はじめに 今年も Advent Calendar の季節がやってきました。これは Angular Advent Calendar 2024 1 日目の記事です。 今回は Angular チームが公式に提供している Angular DevTools について紹介します。 Angular DevTools とは Angular DevTools とは、Chr…

Content Security Policy とは Content Security Policy (CSP) は、クロスサイトスクリプティング (XSS) を始めとした content injection 攻撃を検知し、緩和するためのセキュリティ機能である。 CSP を利用することで、許可していない script や stylesheet…

はじめに Angular Signals の API が公開されてからある程度の時間が経過したが、signals によりアプリケーションの store の実装もアップデートが必要になってきた。 Angular アプリケーションで store 管理をするときに、よく選ばれる NgRx からも signals…

Angular v18 で Route.redirectTo に関数が渡せるようになったため、それを試した記事である。 はじめに Route.redirectTo とは、ルーティングの際にパスがマッチしたらリダイレクトするパスを指定するためのプロパティとして提供されていた。 v18 で Route.…

はじめに Angular アプリケーションで、ある class A で別の class B をインスタンス化して使いたい場合、class B に @Injectable() のデコレータをつけて注入可能にする。 オプションに providedIn: 'root' をつけることでどこからでもインスタンスを要求す…

2023 年振り返り 仕事 現職で丸 1 年過ごした。後半は珍しく休日出勤などもして、全体的に仕事の割合が多い一年だったかもしれない。 働くこと自体は嫌いではないが、仕事の割合が多いということは他に時間を割けなくなるということで、そういう意味では働き…

はじめに みなさん、Angular ルネサンスしてますか？ 最近、ロゴが大きく刷新されたり、新しい公式ドキュメントページが公開されたりと話題になっている Angular ですが、2023 年は 15.1.0 (2023-01-10) から 17.0.4 (2023-11-20) までアップデートされまし…

はじめに これは Cloudflare のアカウント作成から Cloudflare Workers にアプリケーションをデプロイするまでの備忘録となる。 今回試したアプリケーション 今回試したアプリケーションは https://hello-clw.kasaharu.workers.dev にデプロイされている。 k…

Angular Signalsとコンポーネント間通信 を読んで Signals を使ったコンポーネントの実装パターンを学んだ。component が複雑になるとロジックや状態管理を service に分離したくなる。ここで Angular Signals を使ったときの component と service の分離に…

はじめに ウェブフロントエンドアプリケーションを開発しているといくらユニットテストを書いていても、変更に不安を覚えるものがある。代表的なものがスタイルの変更かと思う。 このスタイルの変更にも安心感を与えてくれるテストの一つが Visual regressio…

はじめに Angular アプリケーションとレイヤードアーキテクチャとディレクトリ構成 - とんかつ時々あんどーなつ に書いたようにアーキテクチャやディレクトリ構成を考えるときに、そのメリットとしてテスタビリティの向上も期待の一つとすることが多い。プロ…

Angular v16 が出たので公式のリリースブログを見ながら軽く触ってみる。 Angular v16 is here!. Six months ago, we reached a… | by Minko Gechev | May, 2023 | Angular Blog 正直、機能紹介はリリースブログで十分なので、以下は個人的な備忘録である。 …

はじめに この記事で触れる page component は routed component のこと指している。 component の分類については下記でも少し記載しているので、リンクしておく。 Angular アプリケーションとレイヤードアーキテクチャとディレクトリ構成 - とんかつ時々あ…

はじめに ある程度の規模のアプリケーションのアーキテクチャを考えるときに開発時の影響範囲を限定的にしたりテスタビリティ向上のためにレイヤードアーキテクチャを適用することが多い。一方でどのレイヤーにどういう処理を置くのかや具体的なディレクトリ…

はじめに Angular v15.2 で RouterTestingHarness という API が追加された。これはルーテッドコンポーネントをテストするための Test Harness として提供されている。 この API は以下のブログで知ったので参考文献として貼っておく。 What’s new in Angula…

はじめに standalone API は v14 で開発者プレビューとして提供され v15.0 で正式にリリースされた機能である。 そもそも standalone とは、という点については今回は触れない。過去記事のリンクを載せておく。 Standalone based Tour of Heroes - とんかつ…

次のふたつを初めて試したので、その時の備忘録です。 registry に GitHub Packages を使う private で publish する 公開するための Node.js モジュールを用意 まずはモジュールを用意する。ここはあまり重要ではないので、Creating Node.js modules | npm …