Angular
はじめに みなさん、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…
突然だが、NgRx の ComponentStore を使ったときのアーキテクチャを考えている。 https://ngrx.io/guide/component-store ComponentStore 自体については以前のブログや発表などで何度か説明をしているのでどういうものかはそちらに譲ることにする。 NgRx Co…
ng-japan OnAir vol.37 でフォームについて考える機会があったので改めて Angular のフォームと向き合ってみた。 ng-japan OnAir で取り上げられた記事はこちら。 timdeschryver.dev 題材 個人的にフォームって素振りしにくいなとずっと思っていたのでなんか…
はじめに タイトル以上の情報はないが、使っていない ngOnInit を消すと assets size を 0.01 kB ずつ削減できるよ、という話。 下準備 サンプルアプリの用意 とりあえず下記コマンドでサンプルアプリを用意する。 $ npx @angular/cli new ng-sample --packa…
Angular のコンポーネント分割について考えていることや実践していることをメモ。 Presentation Domain Separation 前提として Angular アプリケーションは Presentation Domain Separation を推している。(と、僕は考えている) コンポーネント内のロジック…
はじめに 今回は Angular アプリケーションの単体テストフレームワークを Jasmine / Karma から Jest に変更する方法を調べてみた。 Jest にする理由は「早いらしい」「ナウい」とかそんな感じだが、使ってみたいので試してみる。 Angular アプリケーション…
はじめに この記事は Classi Advent Calendar 2020 の 10 日目の記事です。 昨日はそーだいさんが書いてくれました。 soudai.hatenablog.com 今回は Angular アプリケーションの E2E テストフレームワークを Cypress に変更する方法について紹介します。 Ang…
はじめに この記事は Angular Advent Calendar 2020 の 1 日目の記事です。 今日は Angular CLI の v10 でオプションとして追加され v11 でプロンプトにも表示されるようになった strict mode について紹介します。 angular.jp 公式ドキュメントを見ると str…
Angular v11 で karma-coverage-istanbul-reporter が deprecated になってるんだった…— わたる (@kasaharu) 2020年11月15日 この話があったので実際に移行してみた。 事前準備 v10 系でプロジェクトを作成 $ npx @angular/cli@10 new karma-reporter-update…
10/17 に GDG DevFest 2020-Track3 / mini ng-japan 2020 があった。 当日は発表前でそわそわしたり、発表終わって疲れてたりでところどころ見れてなかったのでアーカイブを見直した。 改めて見ると結構長いから 1.25 倍で見るのがよさそう。 Youtube の配信…
全部公式ドキュメントに書いてあるが、章立ても多くてまぁまぁな分量だったのでまとめた。 Angular の依存性の注入 サービス(@Injectable() デコレータが付与された class)は injector の範囲内でシングルトンインスタンスを提供する injector の範囲内なの…
NgRx の ComponentStore を試したのでメモ https://ngrx.io/guide/component-store サンプルはこちら https://stackblitz.com/edit/angular-ngrx-component-store @ngrx/component-store の特徴 @ngrx/store と違い component などの local な状態管理するの…
今回のサンプルアプリ $ npx @angular/cli new ng-sample --packageManager yarn $ yarn ng version yarn run v1.22.4 $ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / _…
