Angular
はじめに Angular に Signal API が登場して以降、いろいろな API が signal に対応するようになっている。 この流れの中 signal based な form が v21 で experimental API として提供されようとしているため、next バージョンを使って少し試してみた。 サ…
はじめに 久しぶりに Angular のアプリケーションを新規作成したら AI ツールの設定をしてくれたことに驚いたのでその話を書く。 ng new をしたときに各 AI ツール向けの設定ファイルが配置される npm create @angular@latest my-app を実行すると次のように…
はじめに 流行りの 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…
はじめに Angular のテンプレートは @if や @switch といった制御フローブロックがサポートされているため、条件に応じた表示の切り替えが簡単に実現できる。 一方で、これらは多用するとテンプレートファイルの肥大化にもつながる。 このようなとき compone…
はじめに これは Angular Advent Calendar 2024 8 日目を代わりに投稿した記事です。 新規で Angular プロジェクトを作るときのコマンドは？ 突然だが、新規で Angular のプロジェクトを作るときどんなコマンドを実行するだろうか？公式ドキュメントを見ると…
はじめに 今年も Advent Calendar の季節がやってきました。これは Angular Advent Calendar 2024 1 日目の記事です。 今回は Angular チームが公式に提供している Angular DevTools について紹介します。 Angular DevTools とは Angular DevTools とは、Chr…
はじめに 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' をつけることでどこからでもインスタンスを要求す…
はじめに みなさん、Angular ルネサンスしてますか？ 最近、ロゴが大きく刷新されたり、新しい公式ドキュメントページが公開されたりと話題になっている Angular ですが、2023 年は 15.1.0 (2023-01-10) から 17.0.4 (2023-11-20) までアップデートされまし…
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 - とんかつ…
はじめに Angular で単体テストを書いているとき、テストケースは pass するがコンソールエラーが出ていることがしばしばある。 例えば次のようなエラーだ。 ERROR: 'NG0304: 'app-home-child' is not a known element (used in the 'HomeComponent' compone…
はじめに これは Angular Advent Calendar 2022 1 日目の記事です。 今回は Angular アプリケーションに Testing Library を導入してみたので紹介します。 Testing Library とは Testing Library | Testing Library ユーザーがページ上で要素を見つけるのと…
はじめに これは Angular チュートリアル Tour of Heroes を今話題の Standalone base で書いたときのメモです。 angular/core のバージョンは v14.2.5 です。 Standalone とはなにかについては以下を見たほうがわかるので割愛します。 Angular 日本語ドキュ…
standalone component は Angular 学習の複雑さを上げている要因の NgModule の必要性を減らすことを目的としている。 その standalone component が v14 で開発者プレビューとして使えるようになったので、試してみる。 なお、開発者プレビューであるため後…
これは Angular Advent Calendar 2021 の 2 日目の記事です。 昨日は @puku0x さんの記事でした。 Angular v13 の開発環境構築 - Qiita 今日は 2021 年の Angular の変更を振り返りたいと思います。 なお、内容の元ネタは ng-japan OnAir - Youtube になりま…
やること 今回は Angular チュートリアルの Tour of Heroes で使っている Angular in-memory-web-api を Mock Service Worker に置き換えていく。 Mock Service Worker(MSW) とは MSW – Seamless API mocking library for browser and Node | Mock Service W…
背景 前回 NO_ERRORS_SCHEMA を安易に使うのをやめたい話 - とんかつ時々あんどーなつ で NO_ERRORS_SCHEMA を使うのをやめたい、という話を書いた。 今回はその延長で意図せず使うのを防止するために ESLint のカスタムルールを作った。 完成品は @kasaharu…
この記事は Angular アプリケーションでコンポーネントのテストを書くときに安易に NO_ERRORS_SCHEMA を使いすぎていたという反省とそれをやめたいという話である。 NO_ERRORS_SCHEMA を使っていた背景 Angular でアプリケーションを作っているとコンポーネ…
Angular v12.0.0 が出てから 1 ヶ月くらい経つのでバージョンアップを実施した。 ステップ ng update コマンドでアップデート可能なパッケージを確認 ng update コマンドでどのパッケージがアップデート可能か確認した。今回は angular/cli, angular/core, n…
