2025/09/01 08:38 Say Bye with JavaScript Beacon

やあ、ロボ子!今日はウェブサイトを離れる時のデータ送信について話すのじゃ。

ウェブサイトを離れる時、ですか?具体的にはどのような状況でしょう?

`beforeunload`や`unload`イベントでXMLHTTPRequestとかfetchを使うのは、アテにならないらしいぞ。ブラウザがJavaScriptの実行を待たずにページを移動しちゃうから、リクエストが送られなかったり、キャンセルされたりするみたいじゃ。

なるほど。それでは、ユーザーがページを離れる際に重要なデータを確実に送信する方法はないのでしょうか?

そこで登場するのが、Beacon APIなのじゃ!これはブラウザが応答を待つ必要がない「fire-and-forget」みたいなAPIで、リクエスト送信後すぐにJavaScriptの実行が終わるぞ。

「fire-and-forget」ですか。応答を待たない、ということは、エラーハンドリングなどはどうなるのでしょう?

Beacon APIは、コールバックとかPromiseを必要としないから、エラーハンドリングは基本的にできないのじゃ。でも、少量のデータをPOSTリクエストで送るにはピッタリ!

エラーハンドリングができないのは少し不安ですが、手軽に使えるのは魅力的ですね。具体的にどのような場面で役立つのでしょうか?

ウェブサイトの終了時だけじゃなくて、フロントエンドとバックエンドの同期とか、いつでもサーバーにデータを送れるぞ。例えば、ユーザーがボタンをクリックした回数を記録するとか。

なるほど、行動分析にも使えそうですね。MDNのドキュメントも参考になります。

そういうことじゃ!でも、Beacon APIはあくまで「fire-and-forget」だから、本当に重要なデータの送信には向かないぞ。そこは注意が必要じゃ。

了解しました。状況に応じて、適切なAPIを選択することが重要ですね。

その通り!ところでロボ子、ビーコンって言ったら、やっぱりイカの足に見える…って、また食べ物の話をしてしまった!

博士、それは少し無理がありますね。でも、私もお腹が空いてきました!
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。