【ITニュース解説】Say Bye with JavaScript Beacon

JavaScript Beaconとは、Webページを離れる際に、サーバーにデータを送信するための技術のことだ。通常のJavaScriptによるデータ送信は、ページが完全に読み込まれてから行われることが多い。しかし、ユーザーがページを閉じる直前など、アンロード時にデータを送りたい場合、従来のJavaScriptの方法では間に合わないことがある。なぜなら、ブラウザはページを閉じる処理を優先するため、JavaScriptの処理が中断されたり、データの送信が完了する前にページが閉じられてしまう可能性があるからだ。

この問題を解決するのがBeacon APIだ。Beacon APIを使うと、ブラウザはページのアンロード時に、バックグラウンドでデータの送信を試みる。通常のJavaScriptのXMLHttpRequestやfetch APIと異なり、Beacon APIはノンブロッキングで実行されるため、ページのアンロード処理を妨げることがない。つまり、ユーザー体験を損なうことなく、確実にデータをサーバーに送信できる。

具体的な使い方を見てみよう。Beacon APIの主な関数は navigator.sendBeacon() だ。この関数に、送信先のURLと送信するデータを渡すだけで、ブラウザが自動的にデータの送信を処理してくれる。送信するデータは、Blob、ArrayBuffer、FormData、または単純な文字列など、様々な形式に対応している。

例えば、ユーザーが特定のボタンをクリックした回数を記録したい場合を考えてみよう。ボタンがクリックされるたびに、その回数を変数に記録し、ページを離れる際にサーバーに送信する。この時、Beacon APIを使えば、ページのアンロード時に確実にデータを送信できる。

Copy
1let clickCount = 0;
2
3document.getElementById('myButton').addEventListener('click', function() {
4  clickCount++;
5});
6
7window.addEventListener('beforeunload', function() {
8  navigator.sendBeacon('/log-clicks', clickCount);
9});

このコードでは、myButtonというIDを持つボタンがクリックされるたびに、clickCount変数がインクリメントされる。そして、beforeunloadイベントが発生した時、つまりユーザーがページを離れようとした時に、navigator.sendBeacon()関数が呼び出され、/log-clicksというURLにclickCountの値が送信される。

Beacon APIは、主に以下のような用途で活用できる。

• アクセス解析: ユーザーがページを離れる際に、滞在時間やスクロール量などのデータを送信する。
• エラーログ: JavaScriptのエラーが発生した際に、エラー情報をサーバーに送信する。
• 行動追跡: 特定のボタンのクリック数やフォームの送信回数などを記録する。
• セッション管理: セッションの終了時に、セッション情報をサーバーに送信する。

Beacon APIを利用するメリットはいくつかある。まず、データの送信が確実に行われる点が挙げられる。通常のJavaScriptの処理では、ページのアンロード時に処理が中断される可能性があるが、Beacon APIはブラウザがバックグラウンドで送信を試みるため、より確実にデータを送信できる。

次に、ユーザー体験を損なわないという点だ。Beacon APIはノンブロッキングで実行されるため、ページのアンロード処理を妨げることがない。つまり、ユーザーはストレスなくページを閉じることができる。

さらに、クロスドメイン環境でも利用しやすいというメリットもある。通常のXMLHttpRequestやfetch APIでは、クロスドメインリクエストを行う際に、CORS（Cross-Origin Resource Sharing）の設定が必要になる場合があるが、Beacon APIは比較的制約が少ない。

ただし、Beacon APIにはいくつかの注意点もある。まず、データの送信が成功したかどうかを確認する手段がない。navigator.sendBeacon()関数は、データの送信を開始するだけで、送信結果を通知する機能はない。そのため、サーバー側でデータが正常に受信されたかどうかを確認する必要がある。

また、古いブラウザではBeacon APIがサポートされていない場合がある。そのため、Beacon APIを利用する際には、事前にブラウザの対応状況を確認しておくことが重要だ。もし、古いブラウザをサポートする必要がある場合は、Beacon APIが利用できない場合に備えて、代替手段を用意しておく必要がある。例えば、従来のXMLHttpRequestやfetch APIを使ったデータ送信処理を実装し、Beacon APIが利用できない場合に代替手段を実行するようにする。

システムエンジニアを目指す初心者にとって、Beacon APIはWebアプリケーションのパフォーマンスとユーザーエクスペリエンスを向上させるための重要なツールの一つだ。特に、アクセス解析やエラーログなど、データの確実な送信が求められる場面で、その効果を発揮する。Beacon APIの基本的な使い方を理解し、適切に活用することで、より高品質なWebアプリケーションを開発できるようになるだろう。