Web Locks APIとは何ですか？

ブラウザ上で複数のタブやワーカー間のリソースアクセスを排他制御するためのAPI。同時アクセスによるデータ競合を防ぐ仕組みを提供する。

Web Locks APIのポイントは？

複数タブやService Workerが同じリソースにアクセスするときの競合を防ぐ。navigator.locks.request() で名前付きロックを取得・解放する。排他ロック（exclusive）と共有ロック（shared）の2種類がある。IndexedDBやキャッシュの整合性を保つのに特に有効

【ウェブロックスエーピーアイ】

Web Locks API とは？

💡 ブラウザのタブ同士が「今、使ってるから待って！」と言い合える仕組み

📌 このページのポイント

複数タブやService Workerが同じリソースにアクセスするときの競合を防ぐ
navigator.locks.request() で名前付きロックを取得・解放する
排他ロック（exclusive）と共有ロック（shared）の2種類がある
IndexedDBやキャッシュの整合性を保つのに特に有効

Web Locks APIによる排他制御のイメージ

ひよこ

Web Locks APIって何に使うの？ロックってことは鍵をかけるの？

ペンギン先生

そうそう！例えば同じサイトを2つのタブで開いてるとき、両方が同時にデータを書き換えると壊れちゃうよね。Web Locks APIは「今このデータを使ってるから、他は待ってね」と制御できるAPIだよ

ひよこ

タブ同士って会話できるの？

ペンギン先生

直接会話するわけじゃないけど、ブラウザが「ロックマネージャー」として間に入るんだ。タブAがロックを取得したら、タブBは自動的に待たされて、Aが終わったら順番が回ってくる仕組みだよ

ひよこ

どういう場面で必要になるのかな？

ペンギン先生

IndexedDBに書き込むときや、Service Workerとページが同じキャッシュを更新するときに便利だよ。排他ロック（exclusive）を使えば1つだけがアクセスでき、共有ロック（shared）なら読み取りは同時にできるんだ

ひよこ

排他ロックと共有ロック、データベースみたいだね！

ペンギン先生

まさにその通り！サーバーサイドのデータベースでよく使われる排他制御の考え方を、ブラウザでも使えるようにしたのがWeb Locks APIなんだよ。navigator.locks.query()でロック状態も確認できるから、デバッグにも役立つね

まとめ：ざっくりこれだけ覚えればOK！

「Web Locks API」って出てきたら「ブラウザのタブ同士で順番待ちさせる仕組み」と思えればだいたいOK！

📖 おまけ：英語の意味

「Web Locks API」＝ウェブロックAPI

💬 Lock（鍵・錠前）のように、リソースを「施錠」して他からアクセスできなくする仕組みだよ

← 用語集にもどる