𝓗𝓪𝓹𝓹𝔂 𝓜𝓮𝓻𝓻𝔂 𝓒𝓱𝓻𝓲𝓼𝓽𝓶𝓪𝓼... 𝟚𝟘𝟚𝟜

本記事は[Angular Advent Calendar 2024](https://qiita.com/advent-calendar/2024/angular)の24日目の記事です❗

23日目は[@ringtail003](https://tech.quartetcom.co.jp/2024/12/23/angular/)さんで25日目は[@lacolaco](https://zenn.dev/lacolaco/articles/angular-signal-forms-prototype)さんです❗

---

ハッピーメリークリスマス！
[Angular Advent Calendar](https://qiita.com/advent-calendar/2024/angular)、賑わっておりますね！

それでは、あかいちゃんと一緒に**全部**見ていきましょう！！👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀

## 1日目 [Angular DevTools について](https://kasaharu.hatenablog.com/entry/20241201/000000) @kasaharu
Angularのデバッグをしやすくするための **[Angular DevTools](https://angular.jp/tools/devtools)** について紹介している記事です。
私も導入はしているのですが、なかなか使いこなせておらず……。 この記事を読んで、もっと使いこなせるようになりたいです！

個人的には、紹介されているProfiler機能が実務上のパフォチューで便利そうだと感じました。

:::note info
ちなみに、こういう拡張機能は開発ビルドをしてるときのみアクセスできる、`ng`というグローバル変数を使って実装されています。(多分)
コンソール上からこちらにアクセスすると色々便利なので覚えておくとはかどります！
私は `ng.getComponent($('app-root'))` のようなスクリプトで、特定のコンポーネントにコンソールからアクセスしてデバッグしたりします。
![20241224145926.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104311/b36da973-08a8-c5b5-015d-d3d534f87077.png)
::: 

## 2日目 [Angular CDK の AriaDescriber を使ったアクセシビリティ対応 Tooltip の作り方](https://qiita.com/KOHETs/items/fca95ea378780ba76fdd) @KOHETs
Angular CDKを利用してアクセシビリティに考慮したツールチップを実装する実例です。
通常のツールチップの実装と、アクセシビリティ文脈のdiffが分かれてるので非常に理解しやすい内容でした！

昨今はテンプレートのARIA属性にフォーカスしたアクセシビリティの内容が多いですが、このようにコーダブルにハンドリングできるのは便利な場面が多そうです。

## 3日目 [ドメインロジックをシグナル化する①](https://zenn.dev/lacolaco/articles/angular-signalized-counter) @lacolaco
関心の分離をするうえで、どこにどうやってコードを書くかの手段にシグナルを用いてみるというおはなしです。

`(click)="counter.increment()"`のような実装、非常に読みやすいのでかなり大好きですね。 私も似たような実装をクラスベースでよくやっていました。

こういうパターンが周知されて、ひと目で「あーあれね」みたいになると開発体験よさそうです。

## 4日目 [signalの監視を調整する：Angularのuntrackedの基本と実践](https://qiita.com/beltway7/items/282680e7b440836596b6) @beltway7
シグナルの変更検知タイミングを最適化するための手法の一つ、`untracked`関数について述べた記事です。

私がまだあまりシグナルを触れていないこともあり、こちらのAPIを存じ上げておりませんでした。
とくにeffectを利用すると複雑な変更検知が生まれがちですから、いつでも`untracked`を思い出してパフォーマンスに気を使えるようにしたいですね。

## 5日目 [Angular v19 で始める、Chrome拡張機能作り](https://zenn.dev/kazumeat/articles/579ca123e6d937) @kazumeat
オ、オー！ なんとなく気にはなっていたがやったことはなかった拡張機能作成の実例！
記事として書いてくれると想像しやすくてありがたいですね、めちゃくちゃ興味出てきました。

こういう、サービスの提供の場のいろんなところでAngularが浸透していくのはいいな〜と思います。

## 6日目 [AngularでJamstackなブログサイトをつくる](https://zenn.dev/nishitaku/articles/6bfb92d54c6402) @nishitaku
microCMS/VercelでAngularのブログを構築する記事です。

ゴリゴリにAngularの最新機能を使いながらも簡潔にまとまっており、似たようなことをやるときにすごく参考となる記事になりそうです！

しかしSSGブログシステムの作成-デプロイ、随分かんたんになったなぁ……。

## 7日目 [Observable の状態に応じたUI表示を行う構造ディレクティブ](https://zenn.dev/twogate/articles/c97fff183495a8) @kash
twogateさんがpublishする、`@twogate/ngx-suspense`ライブラリの実例です。

最近のAngularではこのへんのサスペンス的機能はテンプレートで非常に書きやすくなりましたが、
たしかにこの辺の実装って、Observableの 未解決/解決/エラー だけ見ることが多いですもんね。

汎用的な部分の切り出し方が巧いなーと感じました。 ReactのSuspenceAPIとかの構造に似ててとっつきやすいとかもあるかも？(あんまり詳しくないので想像)

## 8日目 [新規で Angular のプロジェクトを作るときは `@angular/create` が便利](https://kasaharu.hatenablog.com/entry/20241222/1734839047) @kasaharu
全く知りませんでした！

Angularで新しくアプリを立ち上げる際、つどつどグローバル`ng`コマンドのアップグレードをしていたのですが、こちらを利用したら新しいものを利用できそうなのでいいかもしれません。

## 9日目 [Angular CDKの地味だけど便利な活用方法](https://qiita.com/KOHETs/items/6263592d95e43487f7fc) @KOHETs
HTMLを書いていると必ずぶち当たる「id属性」……。 をいい感じにAngular CDKで管理する機能があるぜという紹介です。

Angularを書いていると、基本的にDOMはリファレンスのオブジェクトとしてしか取り扱わないので、label.forとかの兼ね合いを考えるとウェ〜ってなること多いですよね。

そういうのを解決するのに私も独自で絶対にかぶらないユニークID生成サービスみたいなのを実装したりしていました。 CDK入ってるプロジェクトでは今後はこれも利用してみようかな……？

(ただ、サービス名のprefixに`_`が入ってるのは気になりマスネ。)

## 10日目 [SymfonyとAngularでSPAフォーム機能をゼロから構築する方法](https://tech.quartetcom.co.jp/2024/12/11/symfony-angular-form/) @mako5656
Symfony(PHPのフレームワーク)をAPIサーバーとして利用して、フロントエンドに最新のAngularを使って構築してみた！な記事です。

シンプルな構築を1から実装していくので、はじめて触ってみる人とかはいろいろ参考になりそうです！
サーバーとの疎通を絡める必要があり、proxyConfigの設定とかはあんまり書いてる人見ないので、その辺も要チェック！

:::note info
ちなみに、記事中で次のようにフォームの値をasで型アサインしている箇所があります。
```ts
      const param = {
         pokemonName: formValue.pokemonName as string,
      };
```
NgFormのvalueは、コントロールがdisabledだった場合にundefinedとなりうるため、そのままstringなどで受け取ることができません。

これを回避するために`as string`としていると思われますが、こういう場合の型アサインは多少不健全なので、`const formValue = this.homeForm.value;`ではなくて、`const formValue = this.homeForm.getRawValue();`として値を取ってやると想定通りの値と型が返ってきていい感じになると思います！
:::


## 11日目 [ドキュメントの修正から始めるAngularへの貢献](https://zenn.dev/da1chi/articles/43c4a9538a177f) @da1chi
公式ドキュメント翻訳してみた！ な記事です。

私も以前似たような記事を書いたのですが、そのときはローカルで開発環境を整えたりする必要があったりで結構大変だったんですよね。(今も本腰入れた翻訳をするときは構築が必要だとは思いますが)

ドキュメントの翻訳はとても尊い行為です！！ みなさんもどんどんコントリビューションしましょう🙏🙏🙏

## 12日目 [AngularでHTTP通信をするコンポーネントのユニットテストを書いて色々掴んだ話](https://qiita.com/http_kato83/items/0997a292643a991b92fa) @http_kato83
今回のアドベントカレンダー唯一のテストの記事です。
jestサポートどうなったんだろうと思っていたのですが、まだむずかしいのかな。

Angularはテストスイートが充実しているので、テスト文化がもっと広がるといいな〜と思っています。
(最近はぼちぼち書いたり書かなかったりしている。)

## 13日目 [[Angular Commit Message Format] 森羅万象を飲み込むchoreからの脱却](https://zenn.dev/rysiva/articles/angular-commit-message-format) @rysiva
私はConventional Commitsをよく参照していて、Angular Commit Message Formatについては「Conventional Commitの祖」くらいの理解だったのでとても興味深かったです。

とくに「summaryは命令形・現在形を使う」とかはConventional Commitでは定められていなかったので、ちょっと意識してみたいなと思ったりしました

## 14日目 [個人制作サイトを Angular 17→19 にアップデートした記録](https://scrpgil.github.io/doc/angular-17-to-19/) @scrpgil
こういうのまとめてくださると結構助かるんですよね〜！
ちょうど、私が去年のアドベントカレンダーで公開したアプリも17のはずなので、こちらを参照しながらパッと公開しようかな！

- おかげさまでできました！ → [24日目 𝓗𝓪𝓹𝓹𝔂 𝓜𝓮𝓻𝓻𝔂 𝓒𝓱𝓻𝓲𝓼𝓽𝓶𝓪𝓼... 𝟚𝟘𝟚𝟜 @ver1000000](https://qiita.com/ver1000000/items/261d1abd6badf558a67c#24%E6%97%A5%E7%9B%AE-%F0%9D%93%97%F0%9D%93%AA%F0%9D%93%B9%F0%9D%93%B9%F0%9D%94%82-%F0%9D%93%9C%F0%9D%93%AE%F0%9D%93%BB%F0%9D%93%BB%F0%9D%94%82-%F0%9D%93%92%F0%9D%93%B1%F0%9D%93%BB%F0%9D%93%B2%F0%9D%93%BC%F0%9D%93%BD%F0%9D%93%B6%F0%9D%93%AA%F0%9D%93%BC-%F0%9D%9F%9A%F0%9D%9F%98%F0%9D%9F%9A%F0%9D%9F%9C-ver1000000)

## 15日目 [Angular,  Nx, Rust, Tauri で始めるデスクトップアプリ開発入門](https://qiita.com/ic_lifewood/items/914e5bf181b15628a030) @ic_lifewood
最近ときどきTauriの名前を耳にしていましたが、Angularと協調できたりするんですね。

デスクトップアプリでの実装ができるようになると、Windows StoreとかでのPublishが現実的になるのかな？
この辺はあまり知見がないので、機会があったら挑戦してみたいですね、面白そう。

## 16日目 [Post-Renaissance Angular Architecture 2024](https://zenn.dev/fusho_takahashi/articles/6bc9a0ebb6d969be374e) @fusho-takahashi
最新のAngularで、Twitter-Likeなアプリケーションアーキテクチャを実際に実装してみての提案と紹介です。
アーキテクチャ図を用意されていたりとかなりの力作！

中-大規模開発を視野に入れた設計のようです、1からプロジェクト作るとき参考にさせていただきたいと思います。

## 17日目 [signals使った無限スクロールみたいなの書きます](https://zenn.dev/nao50/articles/angular-infinite-scroll-with-signals) @nao_y
`@defer (on viewport)`を知ったときにみんな考える「これで無限スクロール実装したらめっちゃ気持ちよく実装できそう！」という気持ちは、人間の三大欲求であるとして広く知れ渡っています。
この記事はそういった欲求を満たすための実例です。

無限スクロールは、実装するときにいろいろ考えることが多いので、こういうシンプルな実装例があるといいですね。


## 18日目 [Angular v19のハイブリッドレンダリングを試す](https://zenn.dev/voicy/articles/6c1a76652c15f3) @komura_c
いわゆる、routesに設定する`renderMode: RenderMode.Prerender`とかの深堀です。

実際に動作させてみての考察がよくされていて素晴らしいです！
この記事を読んで「あ、これもう実運用できるな」というのを感じました。 ぜひ試してみたいですね。


## 19日目 [今さら聞けないAngularのフック詳説](https://zenn.dev/seapolis/articles/d42aff1904242d) @seapolis
App Initializer / Guard / Resolverに着目して、それぞれのポイントを解説している記事です。

この辺は実際に触ってみると、なんだかんだアプリの根幹の動作に食い込んでくるんですが、あまり情報がないのでこういう記事もありがたいですね。

結構なんでもできてしまうので、私もそれ故の難解さを感じます。

## 20日目
未投稿のようです！ お待ちしております！

## 21日目 [Markuplintでbuilt-in control flowを解釈できるプラグインを試作した](https://qiita.com/m-nagashima-zdf/items/484d1f122fb6b3c4358e) @m-nagashima-zdf
`@angular/compiler`を利用するような、例えばライブラリ周りなどの実装はしたことがなかったので、記事をよんでいてこういう問題点があるということが興味深かったです。

その上で、記事のような対応ができるところにAngularの懐の深さを感じました。

## 22日目 [AngularのスタンドアロンコンポーネントとSignalsを使用したアプリケーション設計](https://tech.quartetcom.co.jp/2024/12/22/angular-standalone-example/) @dddsuzuki
とくにBehaviorSubjectとシグナルのあり方について考察されている記事です。

> Observableの変数の命名は末尾に\\$を付ける文化がありましたが、Signalsの変数の場合は先頭に\\$を付けるのが一般的なようです。

記事にコメント機能がなかったので弊記事上で言及してしまうんですが、こちらの文化、日本ユーザー会での雑談上だと、一般的にならないんじゃないかな〜のような雰囲気でした。

![20241224165828.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104311/1e79f5c6-c89e-fd5d-34ee-9e45988705b3.png)


## 23日目 [AngularとHTTPキャッシュと私](https://tech.quartetcom.co.jp/2024/12/23/angular/) @ringtail003
記事タイトルと冒頭の概要からは想像できないほど、WebのHTTPキャッシュについて体系的に考察されています。(びっくり)

経験上、Angular開発をしていて「ブラウザのキャッシュ」が問題になったことはなかったので、こういう問題が起こってハードリロードで解決される可能性があるというのは興味深いですね。
なんどか腰を据えて読み直させていただきたいなと思いました。

## 24日目 [𝓗𝓪𝓹𝓹𝔂 𝓜𝓮𝓻𝓻𝔂 𝓒𝓱𝓻𝓲𝓼𝓽𝓶𝓪𝓼... 𝟚𝟘𝟚𝟜](https://qiita.com/ver1000000/items/261d1abd6badf558a67c) @ver1000000
この記事です！
最初は「テストの記事書こうかな〜」「あ〜、Angular Elementsも最近話題あがってないからこれにしようかなぁ」と考えていました。

が、当日になって、24日といういい感じの日付をもらえたことなので、 ~~他人の褌で相撲をとる~~ 総括っぽくみなさんの記事を全部見ていって思ったことを共有する形式にすることにしました！

今回時間がなかったので新しくアプリの作成とかはできなかったのですが、 [14日目 個人制作サイトを Angular 17→19 にアップデートした記録](https://qiita.com/ver1000000/items/261d1abd6badf558a67c#14%E6%97%A5%E7%9B%AE-%E5%80%8B%E4%BA%BA%E5%88%B6%E4%BD%9C%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92-angular-1719-%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E3%81%97%E3%81%9F%E8%A8%98%E9%8C%B2-scrpgil) を読んで、ササッとマイグレーションできそうだなと思ったので、去年のアドベントカレンダーで作ったものを流用してGitHub Pagesで公開だけしました。 よかったらチラ見してください。

- https://ver-1000000.github.io/angular-advent-calendar-2024/
  - GitHub: https://github.com/ver-1000000/angular-advent-calendar-2024

(v18/19の機能への変更提案や、もろもろの挙動の修正など、PRあったら、いいな！！)

## 25日目 [AngularのSignal Forms（プロトタイプ）をチラ見する](https://zenn.dev/lacolaco/articles/angular-signal-forms-prototype) @lacolaco
シグナルをベースにした新時代のFormAPIである「Signal Forms」で議論されているアイディアの紹介です。

現行のFormsModuleはRxJSベースですから、今後シグナル化が加速していくAngularではForm周りの設計についてシグナルによる見直しが必須というわけですね。

「あーこうなるよな」という感じですが、紹介されている「スキーマベース」のFormなんかは結構難しそうです。

個人的には、現行のFormArray周りとかに機能の不足を感じることがあるので、(なんか素直に値をリセットできないんですよね、FormArrayって)ついでにそういうところもイチから見直してもらえたらいいな〜とか思ってます。(シグナル化との本筋とはあんま関係ないのですが)

# あとがき

それではみなさま、𝓗𝓪𝓹𝓹𝔂 𝓜𝓮𝓻𝓻𝔂 𝓒𝓱𝓻𝓲𝓼𝓽𝓶𝓪𝓼...💫