非同期データ送信のメソッドである`sendBeacon()`の使い方について、実践的なコード例を交えながら解説します。

sendBeacon()とは

`sendBeacon()`は、WebブラウザのNavigator APIが提供する非同期データ送信メソッドです。主にユーザーがページを離れる際のアクセス解析データの送信などに使用されます。

通常のXHR（XMLHttpRequest）やFetch APIと異なり、ページ遷移やブラウザ終了時でもバックグラウンドでデータ送信を完了できる特徴があります。

基本的な使い方

navigator.sendBeacon(url, data);
  • `url`: データを送信する宛先のURL（文字列）
  • `data`: 送信するデータ（文字列、Blob、FormData等）

実装例

基本的な実装

// 文字列データを送信
const data = "sample_data";
navigator.sendBeacon('/api/analytics', data);

// JSONデータを送信
const jsonData = {
    eventType: 'pageExit',
    timestamp: new Date().toISOString()
};
navigator.sendBeacon('/api/analytics', JSON.stringify(jsonData));

ページ離脱時のデータ送信

window.addEventListener('unload', function() {
    const analyticsData = {
        pageId: 'home',
        sessionTime: calculateSessionTime(),
        userAgent: navigator.userAgent
    };
    
    navigator.sendBeacon('/api/analytics', JSON.stringify(analyticsData));
});

FormDataを使用した送信

const formData = new FormData();
formData.append('eventType', 'userAction');
formData.append('timestamp', new Date().toISOString());

navigator.sendBeacon('/api/collect', formData);

ブラウザ対応確認

`sendBeacon()`をサポートしていないブラウザのためのフォールバック実装も重要です。

function sendAnalytics(url, data) {
    if (navigator.sendBeacon) {
        return navigator.sendBeacon(url, data);
    }
    
    // フォールバック：同期的なXHR
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, false);
    xhr.send(data);
}

実践的なユースケース

アクセス解析の実装例

class Analytics {
    static trackPageView() {
        const data = {
            type: 'pageview',
            url: window.location.href,
            referrer: document.referrer,
            timestamp: new Date().toISOString()
        };
        
        navigator.sendBeacon('/analytics', JSON.stringify(data));
    }
    
    static trackEvent(category, action) {
        const data = {
            type: 'event',
            category,
            action,
            timestamp: new Date().toISOString()
        };
        
        navigator.sendBeacon('/analytics', JSON.stringify(data));
    }
}

// 使用例
Analytics.trackPageView();
Analytics.trackEvent('button', 'click');

注意点

1. 送信データのサイズ制限があります（ブラウザによって異なる）

2. レスポンスを受け取ることはできません

3. HTTP POSTメソッドのみ使用可能です

4. CORSの制限は通常のXHRと同様に適用されます

まとめ

`sendBeacon()`は、特にページ離脱時のデータ送信に最適なメソッドです。実装が簡単で、ユーザー体験を損なうことなくデータを確実に送信できる利点があります。アクセス解析やログ収集などのユースケースで積極的に活用することをお勧めします。