【ITニュース解説】Ng-News 25/35: @for tracking strategies, Future of Angular at Angular Space

今回のニュースは、AngularというWebアプリケーション開発のための人気フレームワークに関する、様々な最新情報が詰まっている。システムエンジニアを目指す皆さんにとって、今後の技術トレンドや開発のヒントが隠されているため、一つずつ見ていこう。

まず、Angularでリスト（複数の項目が並んだ一覧表示）を効率よく表示するための重要な技術「追跡戦略（Tracking Strategies）」について。Angularを使って、たとえばお店のメニューリストやSNSの投稿リストのように、多数の項目を画面に表示する場面はよくある。これらのリストの項目が頻繁に増えたり、減ったり、並び順が変わったりする場合、Angularは画面上の要素（DOMノード）をどのように更新するかがパフォーマンスに大きく影響する。

AngularチームのメンバーであるMatthieu Riegler氏は、多くの開発者がこの「@forループ」での追跡戦略の働きを誤解していると感じているようだ。そこで彼は、Angularが異なる追跡戦略に基づいて、どのように画面上の要素を操作するかを示すインタラクティブなデモを作成した。

彼のデモでは、リストのデータが一定時間ごとに新しいオブジェクトとして再作成される状況を想定している。つまり、各項目の「実体」が毎回新しくなる、という状況だ。 この場合、「オブジェクト同一性」による追跡は最もパフォーマンスが悪いとされている。これは、Angularがリストの項目を「オブジェクトそのもの」が同じかどうかで判断するためだ。もしリストのデータが新しいオブジェクトとして再作成されると、Angularはたとえ中身が同じでも、それを「全く新しい項目」と見なし、画面上の古い要素を破棄して新しい要素をゼロから作り直してしまう。これは非常に非効率的な処理となる。

次に、「$index」による追跡方法だ。これは、リスト内での項目の「順番（インデックス）」に基づいて追跡する方法である。このデモの例では、オブジェクト同一性による追跡よりも優れたパフォーマンスを示した。なぜなら、Angularはインデックスが変わらなければ、画面上の要素を再利用し、その中身（表示されているテキストや画像など）だけを更新するからだ。オブジェクト自体が新しくなっても、そのリスト内での順番が変わらなければ、画面上の要素は再利用されるため、無駄な再構築が減る。

そして、最もパフォーマンスが良いとされたのが、項目に固有の「プロパティ」（例えばID）で追跡する方法だ。このデモでは、10個の項目のうち9個が前のサイクルと同じIDを持っていた。AngularはIDが同じであれば、画面上の要素も同じものと判断し、その要素を再利用する。リスト内での位置が変わったとしても、Angularはその要素を適切な位置に移動させるだけで済ませる。プロパティの値が変更されない限り、中身の更新すら行われない。新しいIDを持つ項目だけが、新しい画面上の要素として作成される。これにより、画面上の要素の再構築が最小限に抑えられ、非常にスムーズで高速な更新が可能になる。

ただし、これらの追跡戦略は、常にどれか一つがベストというわけではない。アプリケーションで扱うリストのデータがどのように変化するかによって、最適な戦略は異なる。Angularがこれらの異なる追跡戦略の指定を開発者に求めているのはそのためであり、それぞれの動作原理を理解し、状況に応じて適切な戦略を選択することが重要だ。

次に、Angular開発で人気のツールである「Nx」に関するセキュリティ問題について見ていこう。Nxは、Angular CLI（コマンドラインインターフェース）を拡張し、大規模なAngularプロジェクトの開発や、複数の関連プロジェクトを管理するワークスペース開発を効率化するためのツールである。 最近、このNxのソフトウェア配布プロセスにセキュリティ侵害が発生し、悪意のある攻撃者が有害なソフトウェアパッケージを公開してしまったという。これは深刻な問題だが、Nxチームの対応は非常に適切だったと言える。彼らは侵害の発生から対処までの詳細なタイムラインを公開し、悪意のあるパッケージはわずか約4時間で完全に削除された。 もし皆さんが、特定の時間帯（ヨーロッパ時間で8月27日午前0時30分から午前4時30分の間）にNx関連の依存関係をインストールしていた場合、影響を受けている可能性があるため、公式のセキュリティアドバイザリを確認し、指示に従ってシステムの安全性を確認する必要がある。困ったときのために、直接問い合わせるためのサポートメールも提供されている。

続いて、Angularの将来の方向性に関する興味深いニュースだ。「Angular Space」というAngular学習プラットフォームが初のライブポッドキャストを配信し、Angularの未来について議論が行われた。特に話題の中心となったのは「Signals（シグナル）」という新しい概念である。Signalsは、Angularがアプリケーションの状態変化を検知し、画面を更新する方法をより効率的かつ直感的に変える可能性を秘めている。 ポッドキャストには、AngularのGitHubリポジトリ（Angularの開発状況が日々公開されている場所）を密に追っているMichael Small氏が招待され、Signalsをベースにした新しいフォーム機能「Signal Forms」について、多くの洞察が共有された。これは、将来のAngularにおけるフォーム開発のあり方を大きく変えるかもしれない、非常に期待される機能だ。

また、Angularエコシステムには新しい情報源も誕生した。Gerome Grignon氏によって、「Angular Digest」という新しいニュースレターが創刊されたのだ。これは、Angularに関する最新のニュース、イベント情報、重要なアップデートなどをまとめて提供し、開発者が常に最新情報をキャッチアップするための新たな手段となるだろう。

ソフトウェアの品質を確保するために不可欠な「テスト」の分野でも動きがあった。特に「E2E（End-to-End）テスト」と呼ばれる、ユーザーがアプリケーションを実際に使うのと同じように、最初から最後までアプリケーション全体の動作を確認するテスト手法がある。このE2Eテストでよく使われる二大フレームワーク「Cypress」と「Playwright」が、それぞれバージョンアップを果たした。Cypressはバージョン15に、Playwrightはバージョン1.55になった。 Playwrightは、Google Chromeだけでなく、FirefoxやSafariといった異なるWebブラウザでのテスト実行能力を強化し続けている。一方、Cypressは、特にAngularプロジェクトでE2Eテストを始める多くのチームにとって、依然として好まれる選択肢である。これは、その使いやすさや、開発者がテストを効率的に記述できる設計にあるためと考えられる。

最後に、Angular開発を加速させる新しいツール「Zard UI」の登場だ。「UIライブラリ」とは、ボタンや入力欄、ナビゲーションメニューなど、アプリケーションのユーザーインターフェース（UI）を構成する部品をまとめたものである。これらを活用することで、開発者はUI部品を一から作る手間を省き、一貫性のあるデザインと機能を持ったアプリケーションを素早く構築できる。 今回リリースされたZard UIは、「@shadcn/ui」というモダンで洗練されたデザイン哲学を持つフレームワークのスタイルと、「ng-zorro」というAngular向けの強力なUIライブラリの機能を組み合わせたものとして紹介されている。これは、Angular開発者が、美しく機能的なUIを効率的に構築するための新たな選択肢として注目されるだろう。

今回のニュースは、Angularのパフォーマンス最適化、セキュリティ対策の重要性、将来の機能進化、そして開発をサポートする新しいツールや情報源の登場など、多岐にわたるトピックをカバーしている。システムエンジニアを目指す皆さんにとって、これらの情報はWeb開発の現場で直面する課題や、将来の技術トレンドを理解する上で非常に役立つはずだ。常に最新の情報を学び、自身のスキルアップに繋げていってほしい。