【ITニュース解説】⚡ Conditional Interceptors in Angular 20

Angularアプリケーションを開発する際、外部のサーバーとデータをやり取りすることは日常的に発生する。このデータ通信を「HTTPリクエスト」と呼ぶ。アプリケーションには、これらのHTTPリクエストに対して共通の処理を加えたい場面が数多くある。例えば、すべてのリクエストに認証情報（トークン）を自動的に付加したり、すべての通信のログを残したり、あるいはネットワークが不安定な場合に失敗したリクエストを自動的に再試行したりといった具合だ。このような共通の処理を、個々のリクエストごとに記述するのではなく、一箇所にまとめて管理する仕組みが「HTTPインターセプター」である。インターセプターは、HTTPリクエストが送信される前や、サーバーからの応答（レスポンス）がアプリケーションに届く前に、特定の処理を挟み込むことができる。

HTTPインターセプターは非常に便利な機能だが、すべてのリクエストに対して一律に同じ処理を適用することが常に適切とは限らない。たとえば、ユーザーがログインしようとしているときにネットワークエラーが発生し、システムが自動的にログインリクエストを何回も再試行するとどうなるだろうか。何度もパスワードを間違えたとみなされ、アカウントがロックされてしまう危険性がある。また、ウェブサイトのアクセス状況を分析するためのAPIに、過去のデータを再利用する「キャッシュ」の仕組みを適用しても、常に最新の情報が必要なためあまり意味がない。一方で、商品のカタログ情報を取得するAPIのように、同じデータが頻繁にリクエストされ、かつ少し前のデータでも問題ない場合には、リトライやキャッシュの仕組みを適用することが非常に有効で、ユーザー体験の向上につながる。

このように、リクエストの種類や目的によって適用したい処理が異なる場合に役立つのが「条件付きインターセプター」という考え方だ。これは、特定の条件を満たすHTTPリクエストに対してのみインターセプターの処理を適用し、それ以外のリクエストはそのまま通過させる仕組みである。これにより、無駄な処理を省き、アプリケーションのパフォーマンスを向上させ、コードをより明確に保つことができる。

具体的な例として、ネットワークの不安定さに対応するための「リトライ機能」を考えてみよう。先述のログインAPIのような機密性の高いエンドポイントではリトライは避けるべきだが、商品カタログのようなAPIでは、一時的なネットワーク障害でデータ取得に失敗しても自動的に再試行することで、ユーザーは快適に商品閲覧を続けられる。条件付きリトライインターセプターでは、リクエストのURLが「/api/catalog」を含む場合にのみ、失敗したリクエストを最大3回まで再試行するように設定できる。それ以外のURLへのリクエストは、リトライ処理なしでそのまま進むため、ログインAPIなどが意図せず再試行される心配はない。

次に、アプリケーションの応答速度を高める「キャッシュ機能」も条件付きで適用できる。ユーザーが同じ商品の情報を何度も参照する場合、毎回サーバーに問い合わせるのではなく、一度取得したデータをアプリケーション側で一時的に保存しておき、再利用できれば読み込み時間を大幅に短縮できる。条件付きキャッシュインターセプターは、HTTPメソッドが「GET」であり、かつリクエストのURLが「/api/catalog」を含む場合にのみキャッシュを適用する。初めて「/api/catalog」へのGETリクエストがあった場合、サーバーからデータを取得し、そのデータを一時的にアプリケーションのメモリに保存する。次に同じURLへのリクエストがあったときには、保存されたデータをすぐに返すため、ネットワーク通信を発生させることなく、瞬時に結果をユーザーに提示できる。他のリクエスト、例えば商品の追加や削除のようなデータ変更を伴うリクエストや、他のAPIへのリクエストにはキャッシュを適用しないため、常に最新のデータが適切に処理される。

これらのリトライインターセプターとキャッシュインターセプターは、それぞれ独立して機能するだけでなく、組み合わせて使用することも可能だ。例えば、「/api/catalog」へのリクエストに対しては、まずキャッシュを試み、キャッシュがなければサーバーへリクエストを送り、もしそのリクエストが失敗した場合にはリトライする、といった複合的な処理を一つの条件付きインターセプターとして実現できる。これは、キャッシュ処理を行うインターセプターがリクエストを次のインターセプター（この場合はリトライインターセプター）に渡すような形で、複数のインターセプターを連携させることで実現される。これにより、同じ「/api/catalog」へのリクエストに対して、キャッシュによる高速化と、リトライによる信頼性向上の両方の恩恵をもたらすことができる。

Angular 20では、これらのインターセプターの登録方法もシンプルになっている。アプリケーションの起動時にbootstrapApplication関数を使用し、その設定の中でprovideHttpClientとwithInterceptorsを使って、作成した条件付きインターセプターを登録するだけだ。これにより、アプリケーション全体で定義した条件付きロジックがHTTPリクエストに適用されるようになる。

このように条件付きインターセプターを利用する主な利点は、以下の点にある。まず、「きめ細かな制御」が可能になる。リトライやキャッシュといった処理を、本当にそれが必要で安全なHTTPリクエストにのみ適用できるため、誤動作や予期せぬ挙動を防ぐことができる。次に、「パフォーマンスの向上」が挙げられる。不要なネットワーク呼び出しを避けたり、一度取得したデータを再利用したりすることで、アプリケーションの応答速度が向上し、ユーザー体験が改善される。そして、「コードの整理」にもつながる。アプリケーションの様々な場所に散らばりがちな条件分岐をインターセプターに集約できるため、コードが読みやすく、管理しやすくなる。

実際の開発現場では、このパターンは様々な場面で活用される。例えば、商品リストやユーザープロファイル情報など、比較的静的なデータをキャッシュしてスムーズな画面遷移を実現したり、開発環境ではすべてのAPIリクエストのログを詳細に出力する一方で、本番環境ではログを抑制するといった、環境ごとのロジックの切り替えにも応用できる。

結論として、Angular 20における条件付きインターセプターは、HTTPリクエスト処理のパイプラインをより賢く、高速に、そして安定したものにするための強力なツールである。すべてのリクエストに対して画一的な処理を適用するのではなく、各リクエストの特性や目的に合わせて最適な処理を選択的に適用することで、アプリケーションの信頼性とパフォーマンスを大きく向上させることができる。このパターンを適切に活用することで、開発者はクリーンで信頼性が高く、将来の拡張にも対応しやすいアプリケーションを構築できる。さらに、ランタイムでインターセプターの動作を切り替える「フィーチャーフラグ」といった仕組みと組み合わせれば、アプリケーションの再デプロイなしで機能を制御することも可能になる。