はじめに 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 …
はじめに Angular で単体テストを書いているとき、テストケースは pass するがコンソールエラーが出ていることがしばしばある。 例えば次のようなエラーだ。 ERROR: 'NG0304: 'app-home-child' is not a known element (used in the 'HomeComponent' compone…
2022 年振り返り 仕事 転職が一大イベントだった。 前職ではコロナ禍以降 2 年くらいフルリモートだったが、現職は週 2 くらいで出社している。 久しく忘れていた通勤電車に体力を奪われつつ、オフラインコミュニケーションの良さを思い出している。 まだ試…
はじめに これは 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 で開発者プレビューとして使えるようになったので、試してみる。 なお、開発者プレビューであるため後…
大晦日なので今年も一年を振り返ることにする。 2021 年振り返り 目標を振り返る まずは目標を振り返ることにする。 今年の目標は これ インプット / アウトプット 読書をすると意気込んでいたのに去年より少ない 7 冊だった。 が、前のブログにも書いたとお…
はじめに 毎年気になる本が出てはそれを買い、積ん読を増やし続けていた… なんとか時間を作っては「まえがき」読むが、「まえがき」だけを読んだ本が本棚に並んでいく。 そんな状態を打破しようと、去年の年末に読書目標を立てた。 年初は気合を入れて読んで…
これは 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…
読んだ本 https://www.amazon.co.jp/dp/4798103683 メモ チームが機能するために必要なことが物語形式でまとめられていた。 5 つの機能不全として「信頼の欠如、衝突への恐怖、責任感の不足、説明責任の回避、結果への無関心」が挙げられていたが、チームと…
Angular のコンポーネント分割について考えていることや実践していることをメモ。 Presentation Domain Separation 前提として Angular アプリケーションは Presentation Domain Separation を推している。(と、僕は考えている) コンポーネント内のロジック…
