タブ間での排他制御の必要性

スクリプトを使ったWebページを構築している方であれば、スクリプトはページ内でシングルスレッドであるかのように動作するため、ページ内で排他制御を行う必要が無いということをご存知かもしれません。しかし、現在のほぼすべてのWebブラウザーはマルチタブ・マルチウィンドウに対応しており、それぞれのタブ(ウィンドウ)で実行されるスクリプトが単一スレッド上で動作するとは限りません(そのような制約はありません)。Web Storageの仕様には、複数のスレッドから同時にStorageにアクセスしてデータが異常になることを防ぐために「storage mutex」という概念を置いており、Storageの利用を開始したらこのミューテックス(ブラウザー/User agent単位で1つです)をロック、一連のスクリプト処理が完了する(イベントハンドラーを抜ける、など)までロックの解除を行わない、という形で排他制御を行っています。

※ 「storage mutex」という概念は最新の仕様(HTML5.2)からは外れている模様です。

ただ、もしstorage mutexという概念が有効であったとしても、特に非同期処理の起こる箇所でWeb Storageを用いていると、予期しないデータの上書き等が発生する可能性があるため注意が必要です。例として以下のコードを挙げます。

function retrieveData(callback) {
    var data = localStorage.getItem('cachedData');
    // 既にデータがキャッシュされていたらそのデータを、
    // データが無かった場合は非同期処理によりデータを取得する
    if (!data) {
        callback(data);
    } else {
        asyncGet('/resource', function (d) {
            localStorage.setItem('cachedData', d);
            callback(d);
        });
    }
}

このコードでは localStorage を利用し、「cachedData にデータがあればそのデータを、無ければ非同期処理を呼び出してその結果を(localStorage にキャッシュしつつ)利用する」という処理になっています。もしこの処理が常に一つのタブでのみ実行されるという前提があるのであれば全く問題ありませんが、例えば非同期処理(このコードにおける asyncGet 呼び出し)が行われている間に別のタブで上記の処理(retrieveData)が行われると、その時点では localStorage にデータが無いので非同期処理が実行されることになり、ある意味二重のリクエストが行われることになります。さらに、最初の非同期処理が完了すると localStorage にデータ書き込みを行いますが、もう一方の非同期処理が完了すると無条件で localStorage にデータを書き込むため、最初に書き込んだデータが失われることになります。

これが単に取得処理であれば問題ありませんが、ログインなどの(サーバー上の)セッション確立を行うような処理である場合、無駄なセッション確立が起こるなどサーバーに余計な負荷がかかる可能性が考えられます(特にECサイトなど金銭が絡むような処理である場合は要注意です)。これを避けるためには、タブを超えた排他制御を適切に行う必要が出てきます。

storage mutexが無い場合

もしstorage mutexが無い場合は、より単純に以下のような処理がNGとなる可能性があります。

function updateCount() {
    var count = localStorage.getItem('theCount');
    // 既に「theCount」があればその値を 1 増やし、なければ 1 とする
    count = (count !== null) ? (Number(count) + 1) : 1;
    localStorage.setItem('theCount', count.toString());
    return count;
}

この処理において、localStorage から getItem 経由で値を取得して setItem 経由で書き込むまでのわずかな間に、別のタブでやはり同様の処理が並列で実行され、3行目を完了した時点での「count」の値が双方のタブで全く同じ値になる可能性があり、結果意図しない状態になることが考えられます。やはりこの場合もタブを超えた排他制御を検討する必要が出てきます。

タブ間排他制御を実現するには

C/C++などの「ネイティブ」なアプリケーションを開発した経験をお持ちであれば、システム(ライブラリー)が提供するミューテックスなどの排他制御機構を用いることで、容易に排他制御を行うことが可能ですが、Web上のスクリプトにおいては、少なくとも2018年2月時点でそのようなものをブラウザーが提供しているといったことはありません。そこで排他制御を実現したいのであれば、これを自力で実装する必要があります。「排他制御」の概念については古くから検討されてきたものであるため、既存のミューテックスなどのアルゴリズムを参照してJavaScriptで実装することで排他制御に対応することが可能ですが、ここでポイントとなるのは「制御に用いるための共通変数をどこに置くか」という点になります。通常のスクリプト処理では変数はスクリプトごとに独立しているため、共通にアクセスできる場所をうまく用いる必要があります。