SharedWorkerを使ったキャッシュで ネイティブアプリに負けないユーザー体験を目指す 2026/10/12 Nokogiri@株式会社カケハシ フロントエンドカンファレンス関西2026 ©KAKEHASHI inc. 

自己紹介 Nokogiri（@nkgrnkgr） X | Bluesky | Github 株式会社カケハシ ソフトウェアエンジニア（主にフロントエンド） React / TypeScript / フロントエンド大好き！ 二児の父👶 ポケモン対戦大好き！ ©KAKEHASHI inc. 2 

会社紹介 株式会社カケハシとは ● ヘルステックスタートアップ ● 主に調剤薬局向けの業務システムを提供 ● クラウド型電子薬歴「Musubi」のほか、複数プ ロダクトを開発・提供し、グループ全体で国内の 薬局の14,000店舗超をカバー ©KAKEHASHI inc. 3 

同じデータを複数のタブで取り直している ©KAKEHASHI inc. 4 

同じデータを複数のタブで取り直している 薬局のユースケース ● 1患者毎に1タブ ● 最大1日に200-300名、来局 ● 医薬品など数万件、数MB程度のデータ ● 丸一日ほぼ変更がない場合がある ● 環境によってはネットワークが細い ● 移行元がWindowsネイティブアプリ タブを跨いで1回だけ取得し、使い回せないか ©KAKEHASHI inc. 5 

複数タブでデータを使い回す ©KAKEHASHI inc. 6 

複数タブでデータを使い回す 使う2つの技術 SharedWorker ● 同じオリジンの複数タブで共有できる SSE（Server-Sent Events） ● Worker ● タブとは別スレッドで動き、全タブが閉じると 終わる ©KAKEHASHI inc. サーバーからブラウザへ一方向にイベントを 流す HTTP の仕組み ● 接続を張りっぱなしにして、更新の通知を受 け取る 7 

複数タブでデータを使い回す Workerに1カ所で持ち、全タブで使い回す ● タブからWorkerへ取得イベントを 投げる ©KAKEHASHI inc. ● Worker内で通信し、Mapで管理 ● 待つのは初回の1タブ目だけ ● 2タブ目以降通信なしで返す 8 

複数タブでデータを使い回す 値が変わればサーバーが知らせる、全タブを閉じるとデータが消える ● マスタに変更があればSSEでWorker に通知 ● Workerは再取得して、全タブに Broadcast ● SSE接続もタブ毎ではなくWorker1本 ● 全タブ閉じるとWorkerごと消えるので 後始末のコードがいらない ©KAKEHASHI inc. 9 

複数タブでデータを使い回す 検討した他の技術 技術 説明 localStorage タブを閉じても残る。ログアウトやセッション切れで 消す責務が増える。容量上限と同期 API の問題も IndexedDB 同じく残る。消す責務が増える。永続は今回要らない WASM + SQLite 参照中心なので仕組みが過剰 ※似た名前のServiceWorkerはfetchを横取りしてオフライン対応する部品で、用途が違う 全タブ閉じると消えるSharedWorkerの寿命はちょうどいい ©KAKEHASHI inc. 10 

まとめ ©KAKEHASHI inc. 11 

まとめ SharedWorker＋SSEでタブ間のデータ共有とライフサイクル管理が可能 ● データ取得をSharedWorkerに一本化 ● SharedWorkerが全タブにBroadcastして同期 ● 更新通知はSSE経由 ● 全タブ閉じるとWorkerごとデータも消える ※今回の発表内容は、実プロダクトで運用している内容ではなくPoCとして検証した内容です。 ブラウザに大きなデータを置くときの選択肢として検討いただけると幸いです。 ©KAKEHASHI inc. 12 

We Are Hiring!!! PM EM エンジニア積極採用中 © KAKEHASHI Inc. All Rights Reserved.