本記事はAngular Advent Calendar 2024の24日目の記事です❗
23日目は@ringtail003さんで25日目は@lacolacoさんです❗
ハッピーメリークリスマス！
Angular Advent Calendar、賑わっておりますね！
それでは、あかいちゃんと一緒に全部見ていきましょう！！👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
1日目 Angular DevTools について @kasaharu
Angularのデバッグをしやすくするための Angular DevTools について紹介している記事です。
私も導入はしているのですが、なかなか使いこなせておらず……。 この記事を読んで、もっと使いこなせるようになりたいです！
個人的には、紹介されているProfiler機能が実務上のパフォチューで便利そうだと感じました。
ちなみに、こういう拡張機能は開発ビルドをしてるときのみアクセスできる、ngというグローバル変数を使って実装されています。(多分)
コンソール上からこちらにアクセスすると色々便利なので覚えておくとはかどります！
私は ng.getComponent($('app-root')) のようなスクリプトで、特定のコンポーネントにコンソールからアクセスしてデバッグしたりします。
2日目 Angular CDK の AriaDescriber を使ったアクセシビリティ対応 Tooltip の作り方 @KOHETs
Angular CDKを利用してアクセシビリティに考慮したツールチップを実装する実例です。
通常のツールチップの実装と、アクセシビリティ文脈のdiffが分かれてるので非常に理解しやすい内容でした！
昨今はテンプレートのARIA属性にフォーカスしたアクセシビリティの内容が多いですが、このようにコーダブルにハンドリングできるのは便利な場面が多そうです。
3日目 ドメインロジックをシグナル化する① @lacolaco
関心の分離をするうえで、どこにどうやってコードを書くかの手段にシグナルを用いてみるというおはなしです。
(click)="counter.increment()"のような実装、非常に読みやすいのでかなり大好きですね。 私も似たような実装をクラスベースでよくやっていました。
こういうパターンが周知されて、ひと目で「あーあれね」みたいになると開発体験よさそうです。
4日目 signalの監視を調整する：Angularのuntrackedの基本と実践 @beltway7
シグナルの変更検知タイミングを最適化するための手法の一つ、untracked関数について述べた記事です。
私がまだあまりシグナルを触れていないこともあり、こちらのAPIを存じ上げておりませんでした。
とくにeffectを利用すると複雑な変更検知が生まれがちですから、いつでもuntrackedを思い出してパフォーマンスに気を使えるようにしたいですね。
5日目 Angular v19 で始める、Chrome拡張機能作り @kazumeat
オ、オー！ なんとなく気にはなっていたがやったことはなかった拡張機能作成の実例！
記事として書いてくれると想像しやすくてありがたいですね、めちゃくちゃ興味出てきました。
こういう、サービスの提供の場のいろんなところでAngularが浸透していくのはいいな〜と思います。
6日目 AngularでJamstackなブログサイトをつくる @nishitaku
microCMS/VercelでAngularのブログを構築する記事です。
ゴリゴリにAngularの最新機能を使いながらも簡潔にまとまっており、似たようなことをやるときにすごく参考となる記事になりそうです！
しかしSSGブログシステムの作成-デプロイ、随分かんたんになったなぁ……。
7日目 Observable の状態に応じたUI表示を行う構造ディレクティブ @kash
twogateさんがpublishする、@twogate/ngx-suspenseライブラリの実例です。
最近のAngularではこのへんのサスペンス的機能はテンプレートで非常に書きやすくなりましたが、
たしかにこの辺の実装って、Observableの 未解決/解決/エラー だけ見ることが多いですもんね。
汎用的な部分の切り出し方が巧いなーと感じました。 ReactのSuspenceAPIとかの構造に似ててとっつきやすいとかもあるかも？(あんまり詳しくないので想像)
8日目 新規で Angular のプロジェクトを作るときは @angular/create が便利 @kasaharu
全く知りませんでした！
Angularで新しくアプリを立ち上げる際、つどつどグローバルngコマンドのアップグレードをしていたのですが、こちらを利用したら新しいものを利用できそうなのでいいかもしれません。
9日目 Angular CDKの地味だけど便利な活用方法 @KOHETs
HTMLを書いていると必ずぶち当たる「id属性」……。 をいい感じにAngular CDKで管理する機能があるぜという紹介です。
Angularを書いていると、基本的にDOMはリファレンスのオブジェクトとしてしか取り扱わないので、label.forとかの兼ね合いを考えるとウェ〜ってなること多いですよね。
そういうのを解決するのに私も独自で絶対にかぶらないユニークID生成サービスみたいなのを実装したりしていました。 CDK入ってるプロジェクトでは今後はこれも利用してみようかな……？
(ただ、サービス名のprefixに_が入ってるのは気になりマスネ。)
10日目 SymfonyとAngularでSPAフォーム機能をゼロから構築する方法 @mako5656
Symfony(PHPのフレームワーク)をAPIサーバーとして利用して、フロントエンドに最新のAngularを使って構築してみた！な記事です。
シンプルな構築を1から実装していくので、はじめて触ってみる人とかはいろいろ参考になりそうです！
サーバーとの疎通を絡める必要があり、proxyConfigの設定とかはあんまり書いてる人見ないので、その辺も要チェック！
ちなみに、記事中で次のようにフォームの値をasで型アサインしている箇所があります。
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への貢献 @da1chi
公式ドキュメント翻訳してみた！ な記事です。
私も以前似たような記事を書いたのですが、そのときはローカルで開発環境を整えたりする必要があったりで結構大変だったんですよね。(今も本腰入れた翻訳をするときは構築が必要だとは思いますが)
ドキュメントの翻訳はとても尊い行為です！！ みなさんもどんどんコントリビューションしましょう🙏🙏🙏
12日目 AngularでHTTP通信をするコンポーネントのユニットテストを書いて色々掴んだ話 @http_kato83
今回のアドベントカレンダー唯一のテストの記事です。
jestサポートどうなったんだろうと思っていたのですが、まだむずかしいのかな。
Angularはテストスイートが充実しているので、テスト文化がもっと広がるといいな〜と思っています。
(最近はぼちぼち書いたり書かなかったりしている。)
13日目 [Angular Commit Message Format] 森羅万象を飲み込むchoreからの脱却 @rysiva
私はConventional Commitsをよく参照していて、Angular Commit Message Formatについては「Conventional Commitの祖」くらいの理解だったのでとても興味深かったです。
とくに「summaryは命令形・現在形を使う」とかはConventional Commitでは定められていなかったので、ちょっと意識してみたいなと思ったりしました
14日目 個人制作サイトを Angular 17→19 にアップデートした記録 @scrpgil
こういうのまとめてくださると結構助かるんですよね〜！
ちょうど、私が去年のアドベントカレンダーで公開したアプリも17のはずなので、こちらを参照しながらパッと公開しようかな！
- おかげさまでできました！ → 24日目 𝓗𝓪𝓹𝓹𝔂 𝓜𝓮𝓻𝓻𝔂 𝓒𝓱𝓻𝓲𝓼𝓽𝓶𝓪𝓼... 𝟚𝟘𝟚𝟜 @ver1000000
15日目 Angular, Nx, Rust, Tauri で始めるデスクトップアプリ開発入門 @ic_lifewood
最近ときどきTauriの名前を耳にしていましたが、Angularと協調できたりするんですね。
デスクトップアプリでの実装ができるようになると、Windows StoreとかでのPublishが現実的になるのかな？
この辺はあまり知見がないので、機会があったら挑戦してみたいですね、面白そう。
16日目 Post-Renaissance Angular Architecture 2024 @fusho-takahashi
最新のAngularで、Twitter-Likeなアプリケーションアーキテクチャを実際に実装してみての提案と紹介です。
アーキテクチャ図を用意されていたりとかなりの力作！
中-大規模開発を視野に入れた設計のようです、1からプロジェクト作るとき参考にさせていただきたいと思います。
17日目 signals使った無限スクロールみたいなの書きます @nao_y
@defer (on viewport)を知ったときにみんな考える「これで無限スクロール実装したらめっちゃ気持ちよく実装できそう！」という気持ちは、人間の三大欲求であるとして広く知れ渡っています。
この記事はそういった欲求を満たすための実例です。
無限スクロールは、実装するときにいろいろ考えることが多いので、こういうシンプルな実装例があるといいですね。
18日目 Angular v19のハイブリッドレンダリングを試す @komura_c
いわゆる、routesに設定するrenderMode: RenderMode.Prerenderとかの深堀です。
実際に動作させてみての考察がよくされていて素晴らしいです！
この記事を読んで「あ、これもう実運用できるな」というのを感じました。 ぜひ試してみたいですね。
19日目 今さら聞けないAngularのフック詳説 @seapolis
App Initializer / Guard / Resolverに着目して、それぞれのポイントを解説している記事です。
この辺は実際に触ってみると、なんだかんだアプリの根幹の動作に食い込んでくるんですが、あまり情報がないのでこういう記事もありがたいですね。
結構なんでもできてしまうので、私もそれ故の難解さを感じます。
20日目
未投稿のようです！ お待ちしております！
21日目 Markuplintでbuilt-in control flowを解釈できるプラグインを試作した @m-nagashima-zdf
@angular/compilerを利用するような、例えばライブラリ周りなどの実装はしたことがなかったので、記事をよんでいてこういう問題点があるということが興味深かったです。
その上で、記事のような対応ができるところにAngularの懐の深さを感じました。
22日目 AngularのスタンドアロンコンポーネントとSignalsを使用したアプリケーション設計 @dddsuzuki
とくにBehaviorSubjectとシグナルのあり方について考察されている記事です。
Observableの変数の命名は末尾に\$を付ける文化がありましたが、Signalsの変数の場合は先頭に\$を付けるのが一般的なようです。
記事にコメント機能がなかったので弊記事上で言及してしまうんですが、こちらの文化、日本ユーザー会での雑談上だと、一般的にならないんじゃないかな〜のような雰囲気でした。
23日目 AngularとHTTPキャッシュと私 @ringtail003
記事タイトルと冒頭の概要からは想像できないほど、WebのHTTPキャッシュについて体系的に考察されています。(びっくり)
経験上、Angular開発をしていて「ブラウザのキャッシュ」が問題になったことはなかったので、こういう問題が起こってハードリロードで解決される可能性があるというのは興味深いですね。
なんどか腰を据えて読み直させていただきたいなと思いました。
24日目 𝓗𝓪𝓹𝓹𝔂 𝓜𝓮𝓻𝓻𝔂 𝓒𝓱𝓻𝓲𝓼𝓽𝓶𝓪𝓼... 𝟚𝟘𝟚𝟜 @ver1000000
この記事です！
最初は「テストの記事書こうかな〜」「あ〜、Angular Elementsも最近話題あがってないからこれにしようかなぁ」と考えていました。
が、当日になって、24日といういい感じの日付をもらえたことなので、 他人の褌で相撲をとる 総括っぽくみなさんの記事を全部見ていって思ったことを共有する形式にすることにしました！
今回時間がなかったので新しくアプリの作成とかはできなかったのですが、 14日目 個人制作サイトを Angular 17→19 にアップデートした記録 を読んで、ササッとマイグレーションできそうだなと思ったので、去年のアドベントカレンダーで作ったものを流用してGitHub Pagesで公開だけしました。 よかったらチラ見してください。
(v18/19の機能への変更提案や、もろもろの挙動の修正など、PRあったら、いいな！！)
25日目 AngularのSignal Forms（プロトタイプ）をチラ見する @lacolaco
シグナルをベースにした新時代のFormAPIである「Signal Forms」で議論されているアイディアの紹介です。
現行のFormsModuleはRxJSベースですから、今後シグナル化が加速していくAngularではForm周りの設計についてシグナルによる見直しが必須というわけですね。
「あーこうなるよな」という感じですが、紹介されている「スキーマベース」のFormなんかは結構難しそうです。
個人的には、現行のFormArray周りとかに機能の不足を感じることがあるので、(なんか素直に値をリセットできないんですよね、FormArrayって)ついでにそういうところもイチから見直してもらえたらいいな〜とか思ってます。(シグナル化との本筋とはあんま関係ないのですが)
あとがき
それではみなさま、𝓗𝓪𝓹𝓹𝔂 𝓜𝓮𝓻𝓻𝔂 𝓒𝓱𝓻𝓲𝓼𝓽𝓶𝓪𝓼...💫