【ITニュース解説】How to Do Polling Requests to an API in JavaScript (Beginner Guide)

APIと連携するシステムを開発していると、時にサーバーでの処理に時間がかかり、すぐに結果が返ってこない場面に遭遇する。アプリケーションがAPIにリクエストを送信しても、サーバー側でデータベースの更新、外部サービスとの連携、あるいは複雑な計算など、完了までに数秒から数分かかる処理を実行している場合があるからだ。例えば、ユーザーがオンライン決済を行った際に、実際に支払いが完了したかどうかを確認するケースや、大規模なファイルアップロードやレポート生成といったバックグラウンドで実行される処理の終了を待つケース、さらにサーバーやデバイスが現在オンライン状態にあるかを継続的に監視するケースなどがこれに該当する。これらの状況では、一度リクエストを送ってすぐに結果を待つだけでは不十分であり、何らかの方法でサーバーの処理状況を継続的に確認する必要が生じる。

このような状況で役立つのがポーリングという技術である。ポーリングとは、アプリケーションがサーバーに対して一定の間隔で繰り返し問い合わせを行い、目的の結果が得られるまでその問い合わせを続ける仕組みを指す。これは、まるで目的の場所に到着するまで「まだ着かないの？」と繰り返し尋ねる子供のようなものだと考えると良い。サーバーが「まだ処理中だ」と応答する限り問い合わせを続け、最終的な結果、例えば「支払いが完了した」「ジョブが終了した」といった応答が得られた時点で問い合わせを停止する。

JavaScriptでポーリングを実装する際によく使われるのが、setInterval()関数である。この関数は、指定した時間間隔で繰り返し特定の関数を実行する機能を持つ。ポーリングではこのsetInterval()を使って、数秒ごとにAPIエンドポイント（サーバーの特定の機能への入り口）を呼び出す処理を記述する。例えば、pollStatusという関数を作成し、その中でfetch()APIを用いてサーバーのステータス確認エンドポイントにリクエストを送信する。fetch()はサーバーからの応答を受け取ると、そのデータをJSON形式で解析し、現在のステータス情報を取得する。このステータスが「PENDING」（処理中）のような最終ではない状態であれば、ポーリングを継続する。しかし、ステータスが「SUCCESS」（成功）や「FAILED」（失敗）といった最終的な結果に変わった場合、clearInterval()関数を使ってsetInterval()による繰り返し処理を停止する。これにより、無駄なリクエストの送信を防ぎ、処理が完了したことをユーザーに通知したり、画面を更新したりといった次のアクションに移れる。エラーが発生した場合にはcatch()ブロックでそのエラーを捕捉し、適切に処理を行うことも重要である。

具体的な動作フローは次のようになる。まず、アプリケーションは、支払い処理の開始のような、何らかの時間のかかるバックエンド処理を起動するAPIリクエストをサーバーに送信する。このリクエストが成功すると、サーバーは通常、その処理の状態を追跡するための識別子、例えばトランザクションIDのようなものをアプリケーションに返す。アプリケーションはこのIDを受け取り、先ほど説明したpollStatusのようなポーリングを開始する関数を呼び出し、取得したIDを渡す。ポーリング関数が実行されると、指定された間隔、例えば3秒ごとに、受け取ったトランザクションIDを使ってサーバーのステータス確認APIを繰り返し呼び出す。サーバーはこの問い合わせに対し、現在の処理状況、例えば「PENDING」や「SUCCESS」などのステータスを返す。アプリケーションは返ってきたステータスをチェックし、もし最終的な結果が得られていない「PENDING」状態であれば、次の問い合わせまで待機し、再びAPIを呼び出す。そして、ステータスが「PENDING」ではない、つまり最終的な結果がサーバーから返されたら、アプリケーションはポーリングを停止し、その結果に基づいてユーザーインターフェースを更新したり、次の処理に進んだりする。

HTMLとJavaScriptを組み合わせた具体的な例を見てみよう。まず、HTML側には「Pay Now」ボタンと、支払い状況を表示するための段落要素を用意する。ユーザーが「Pay Now」ボタンをクリックすると、initiatePayment()JavaScript関数が実行される。この関数は、バックエンドの支払い開始API（ここでは/api/payと仮定）を呼び出すことをシミュレートする。支払い開始APIからの応答として、支払い処理を識別するためのtransactionIdが返されると、画面上のメッセージを「Waiting for payment confirmation...」に更新し、そのtransactionIdを引数としてpollStatus()関数を呼び出す。pollStatus()関数は、setInterval()を使って3秒ごとに/api/statusエンドポイントにtransactionIdを付けてリクエストを送信し、現在のステータスを確認する。サーバーからの応答でステータスが「PENDING」でなければ、つまり支払い処理が完了（成功または失敗）していれば、clearInterval()でポーリングを停止し、画面のメッセージを「Payment SUCCESS」や「Payment FAILED」のように更新する。これにより、ユーザーは支払い処理の進行状況をリアルタイムに近い形で確認できる。

ポーリングを実装する際には、いくつか注意すべき点がある。一つはポーリングの頻度である。あまりに頻繁にポーリングするとサーバーに過度な負荷をかけ、ネットワークリソースも無駄に消費してしまうため、一般的には2〜5秒程度の適切な間隔を設定することが推奨される。次に、目的の最終結果を受け取ったら必ずclearInterval()を使ってポーリングを停止させること。これを忘れると、バックグラウンドで不必要なAPIリクエストがサーバーに送り続けられ、サーバーリソースの無駄遣いになるだけでなく、アプリケーションのパフォーマンス低下や予期せぬ挙動につながる可能性がある。また、大規模なシステムやリアルタイム性が非常に高く求められるアプリケーションでは、WebSocketやServer-Sent Eventsといった、サーバーからクライアントへ能動的に情報をプッシュする技術がより適している場合もある。しかし、ポーリングはこれらの技術と比較して実装が非常にシンプルで、システムエンジニアを目指す初心者にとっても手軽に扱えるという大きな利点がある。

このようにポーリングは、APIの応答待機をJavaScriptでシンプルに実現する強力な手法である。setInterval()とfetch()を組み合わせることで、支払い確認、バックグラウンドジョブの追跡、サーバー監視といった、サーバー側で時間のかかる処理の状態を効率的に追跡し、アプリケーションのユーザーインターフェースに反映させることができる。