会社情報
採用情報
お問い合わせ
Article

ブラウザ技術の進化：WebAssemblyやPWAsが切り拓く可能性

高田晃太郎
ブラウザ技術の進化：WebAssemblyやPWAsが切り拓く可能性

主要ブラウザの大半がWebAssemblyに対応し、Service Worker（ブラウザ内のプロキシ兼バックグラウンド実行基盤）は年々普及、PWA（Progressive Web Apps）の要件を満たすサイトも着実に増加しています。¹²³ Can I useやHTTP Archiveの公開データが示す通り、Webは単なる文書配信から、実行基盤としての側面を強めています。実装事例では、軽量化や体感速度の改善、エンゲージメントの向上が報告されており、TwitterやPinterestのPWA活用も公知のケースとして参照できます。⁴⁵ iOS 16.4以降はWeb Pushが解禁され、プラットフォームまたぎの体験差も縮小しつつあります。⁶

この潮流は偶然ではありません。ストリーミングコンパイルやSIMD、スレッドなどのWebAssembly拡張によって、ブラウザは重たい計算をオフメインスレッドへ逃がしやすくなりました。⁷ PWAは「インストール可能性」と「オフライン」を中核に、配布コストと体験の両軸を最適化します。ここでは、実装観点と経営観点をつなぎながら、何をいま選び、どこで線を引くかを技術的根拠と事例に基づいて整理します。

ブラウザは実行基盤へ：WebAssemblyの現在地

WebAssemblyは、バイトコードによる高速起動と予測可能な性能を狙って設計された実行形式です。⁷ 研究やベンチマークではJavaScript比で大きなスループット向上が示される一方、現場ではI/O待ちやDOM操作がボトルネックになりがちです。重要なのは、CPUバウンドな核だけをWasmへ寄せ、UIロジックはJSへ残す分離設計を徹底すること。さらに、スレッドとSIMDはクロスオリジン・アイソレーション（COOP/COEP）を有効化した上で利用可能になり、並列化の上限が一段と上がりました。⁸

起動時間の観点では、Streaming Compilation/Instantiation（ダウンロードと並行してコンパイル・初期化する仕組み）が鍵です。サーバが適切なMIME（application/wasm）で配信すれば、ダウンロード待ちの“無駄”が減り、初期化の体感を滑らかにできます。⁹

最小の読み込み：Streaming Instantiation

実装の第一歩は、余計なバッファ化を避けることです。以下はブラウザ組み込みAPIで完結する最小の読み込みです。⁹

// app.js
const wasmUrl = new URL('./app.wasm', import.meta.url);
const { instance } = await WebAssembly.instantiateStreaming(fetch(wasmUrl), {});
const { add } = instance.exports;
console.log('WASM add(40, 2)=', add(40, 2));

この形であれば、ネットワーク受信と並行してコンパイルが進み、長い関数体でも初期化レイテンシを抑制できます。CDN配信とも相性が良く、サーバ側の最適化投資の効果を読みやすいのが利点です。

Rustからのビルドとバインディング

言語は用途に合わせて柔軟に選べます。Rustであればwasm-bindgenを用いて最小限の橋渡しを行い、ホットループだけを移植します。¹⁰

// Cargo.toml に wasm-bindgen を追加
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn dot(a: &[f32], b: &[f32]) -> f32 {
    a.iter().zip(b.iter()).map(|(x, y)| x * y).sum()
}

ビルド後に生成されるJSラッパは配列の借用やコピーを最小化します。メモリ境界をまたぐ際のコストを下げることが、Wasm導入の実効速度を左右します。

並列化とSIMD：クロスオリジン・アイソレーションの前提

SharedArrayBufferとAtomicsを利用するには、COOP/COEPヘッダーでサイト全体をクロスオリジン・アイソレーション化する必要があります。⁸ ワーカー側で計算を回す最小例は次の通りです。

// worker.js
self.onmessage = async (e) => {
  const { wasmUrl, sab } = e.data;
  const { instance } = await WebAssembly.instantiateStreaming(fetch(wasmUrl));
  const arr = new Float32Array(sab);
  instance.exports.process(arr.byteOffset, arr.length);
  self.postMessage({ done: true });
};

// main.js
const sab = new SharedArrayBuffer(Float32Array.BYTES_PER_ELEMENT * 1024);
const worker = new Worker('./worker.js', { type: 'module' });
worker.postMessage({ wasmUrl: './kernel.wasm', sab });

この構成で、UIスレッドのINP（Interaction to Next Paint）を200ms未満に保ちやすくなり、重たい処理を安全に逃がせます。¹¹ Core Web Vitalsの目標値を維持しながら計算性能を上げる設計は、ビジネスKPIの改善とトレードオフになりにくく、経営の説得材料としても有効です。

PWAが変える配布と体験：インストール、オフライン、再訪

PWAの価値は、ストア審査を介さずにネイティブに近い体験を配布できる点にあります。PinterestやTwitterの公開事例を含め、PWA刷新によってデータ使用量の削減や読み込み体感の改善、エンゲージメント向上が報告されています。⁵⁴ Starbucksの事例では、比較的小さなパッケージでの配布により低帯域環境でも扱いやすいことが示されました。¹² これらは、通信制限のある市場や低価格端末でも体験を均質化し、獲得や再訪といった指標の改善に寄与し得ることを示唆します。

InstallabilityとWeb App Manifest

Installabilityはユーザの心理的摩擦を下げ、リテンションの接点を増やします。Manifestで名前や起動URL、表示モードを定義し、Service Workerでオフライン動作を保証すれば、ブラウザはインストール促進UIの提示やアプリランチャーへの常駐を許可します。

{
  "name": "NOWH Sample",
  "short_name": "NOWH",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#111827",
  "icons": [{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" }],
  "id": "/",
  "scope": "/"
}

idプロパティは複数の配信形態をとる場合の一意性を担保します。DesktopでもInstall可能なブラウザが主流になった現在、B2Bツールのショートカット化やキオスク用途でのロックダウン運用に実利があります。

オフライン戦略：キャッシュの整備と一貫性

Service Workerの戦略は、再訪時の体験と帯域コストを規定します。初回はネットワーク優先、二回目以降はstale-while-revalidateで即時表示と裏側更新を両立するのが定石です。ナビゲーションプリロードを有効にすれば、SWのアクティベーション待ちを短縮できます。

// sw.js
self.addEventListener('install', (e) => {
  e.waitUntil(caches.open('v1').then((c) => c.addAll(['/','/styles.css','/app.js'])));
});

self.addEventListener('fetch', (e) => {
  e.respondWith((async () => {
    const cache = await caches.open('v1');
    const cached = await cache.match(e.request);
    const fetchPromise = fetch(e.request).then((r) => { cache.put(e.request, r.clone()); return r; });
    return cached || fetchPromise;
  })());
});

キャッシュの適用範囲は計測で決めます。LCPリソース（画像やCSS）を優先対象に据えると、LCP 2.5秒未満の達成率が安定します。¹³ 予算管理の観点では、CDNコストとキャッシュミス比率の積を月次で監視し、増分の帯域課金に上限を設定するのが安全です。

リテンションの武器：Web Pushとバックグラウンド処理

iOS 16.4以降、ホーム画面に追加したWebアプリでもWeb Pushが利用可能になりました。⁶ 許諾取得のタイミングはUIの価値が立ち上がってからに遅延させ、ユーザ価値を損なわない頻度で運用するのが実務的です。VAPID（Web Pushの公開鍵方式）を使った最小の送信例は次の通りです。

// client.js
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY) });
await fetch('/api/save-sub', { method: 'POST', body: JSON.stringify(sub) });

// server.js (Node)
import webpush from 'web-push';
webpush.setVapidDetails('mailto:ops@example.com', PUBLIC, PRIVATE);
await webpush.sendNotification(subscription, JSON.stringify({ title: '更新', body: '新機能が利用可能です' }));

バックグラウンド同期はブラウザ間の差が残りますが、失敗時の再試行をサーバ側キューで吸収すれば、実業務に耐える堅牢性を確保できます。コンテンツ更新と通知送出は常に分離し、誤配信時の影響範囲を限定しましょう。

現実の制約と設計判断：どこで線を引くか

ブラウザは万能ではありません。Wasmはファイルサイズが肥大化すると初期化の優位が薄れ、モバイルでは電力効率が課題になります。PWAはOS連携の一部で制約が残り、プラットフォーム間でAPIカバレッジが異なります。重要なのは、ユーザ体験のクリティカルパスを短く定義し、そこにWasmとPWAの投資を集中することです。例えば、初回LCPの改善に貢献しない重たいモジュールは遅延読み込みにし、決済やアカウント周りはWebAuthnやPayment Request APIの対応状況を見極めてフォールバックを用意します。

プライバシーとセキュリティのレイヤでは、Partitioned StorageやサードパーティCookie廃止の流れに合わせ、認証はトークンベースへ移行し、共有ストレージに依存しない設計へ舵を切るべきです。インストールされたPWAでも、権限要求は最小限に抑え、許諾は段階的に積み上げます。SharedArrayBufferやWebAssembly Threadsを使うなら、COEP/COOPの採用による埋め込み制約や広告タグの互換性を事前検証し、ビリング面の影響も評価対象に含めてください。

計測の基準は、RUMと合成の両輪で運用します。LCP、INP、CLSのコア指標に加え、Wasm部分のホットパス実行時間、SWヒット率、通知許諾率、再訪間隔を継続的に可視化します。例えば、Wasm導入でp95計算時間が短縮できれば、入力後の応答が速まり、INPのp75が200msを切る可能性が高まります。これがCVRの底上げに寄与するなら、クラウド費やCDN費の増加と相殺しても正味のROIが立ちやすくなります。

サイズと配信：ビルドの衛生管理

Wasmは最適化と圧縮の有無で体験が大きく変わります。-O3やLTOで不要コードを落とし、デバッグシンボルは分離し、Brotli圧縮を有効にします。モジュール分割でキャッシュ効率を上げ、ホットパスは独立した小さな.wasmに保ちます。HTTP/2やHTTP/3の多重化との相性が良く、CDNの早期ヒント（preloadやprefetch）と組み合わせると初回体験と回遊の双方で効きます。配信の落とし穴としては、誤ったMIME設定でStreamingが無効化される事例が繰り返し見られます。最初の1バイト目から正しいパスを用意することが、結局は最短距離です。

これからの地平：WASI、GC、WebGPU、そしてEdge

ブラウザ外の実行環境であるWASIは標準化が前進し、ファイルI/Oやソケットの抽象化が現実的になってきました。ブラウザ内でもOrigin Private File SystemやFile System Accessなど、実用的な保存先が整い、ユーザランドでの編集や生成ワークロードが加速しています。Wasm GCの到来は、GC言語とJS間の相互運用を軽量化し、バインディングの複雑さを下げます。WebGPUと組み合わせれば、画像処理やMLの一部で桁違いのスループットが見込めます。

アーキテクチャ視点では、EdgeとClientのWasmをコンポーネントで分割し、同一言語・同一テストで両面を回す設計が有望です。Cloudflare WorkersやDeno/Nodeのサーバレス基盤でWasmを走らせ、同じアルゴリズムをブラウザへ配布すれば、回帰テストと資産の再利用性が飛躍的に高まります。配布面では、Desktop PWAの安定性向上により、B2B SaaSのインストーラ代替としての現実解が増えました。OS権限の必要性が低いユースケースなら、TCOを下げつつ、更新コストを限りなくゼロに近づけられます。

最小実装で価値検証：5つのスニペットから始める

最後に、価値検証までの距離を最短化するために、WasmとPWAの最小スニペットを手元で動かすことを強く勧めます。読み込みはStreaming、ホットパスのみWasm化、キャッシュはstale-while-revalidate、通知は価値が立ち上がってから許諾、計測はCore Web VitalsとビジネスKPIの両軸で回す。これらを一度通しておけば、次の意思決定で迷う余地はほとんど残りません。

まとめ：いま選び、未来に備える設計へ

WebAssemblyとPWAは、単なるトレンドではなく、配布と実行の両側面を再定義する基盤です。ブラウザが十分に速く、十分に近いネイティブ体験を提供できる地点に到達した今こそ、ホットパスの抽出とキャッシュ設計、許諾戦略と計測基盤の整備を同時並行で進める価値があります。公開事例でも、体験や収益性の大幅な改善が報告されるケースが見られますが、重要なのは自分たちのプロダクトと市場に合わせて小さく検証し、数字で確かめ、勝ち筋に投資を寄せることです。

次の四半期で何を検証し、半年でどのKPIを動かし、年次でどのTCOを削るのか。あなたのロードマップに、WasmとPWAのレーンを具体のスプリントとして織り込む時期です。まずは小さく動かし、数字で確かめて、投資配分を最適化する。この反復が、チームの納得感と経営の合意形成を同時に前へ進めます。

参考文献

  1. Can I use: WebAssembly (wasm). https://caniuse.com/wasm
  2. HTTP Archive Web Almanac 2022: PWA. https://almanac.httparchive.org/en/2022/pwa
  3. HTTP Archive Web Almanac 2022: PWA (Manifest/adoption details). https://almanac.httparchive.org/en/2022/pwa
  4. web.dev: Twitter Lite の PWA 事例（日本語版）. https://web.dev/case-studies/twitter?hl=ja
  5. Pinterest PWA performance case study. https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
  6. WebKit: Web Push for Web Apps on iOS and iPadOS 16.4. https://webkit.org/blog/13878/
  7. ACM: WebAssembly is the newest language of the Web (DOI: 10.1145/3487552.3487827). https://dl.acm.org/doi/abs/10.1145/3487552.3487827
  8. MDN Web Docs: Cross-origin isolation. https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/cross-origin_isolation
  9. MDN Web Docs: WebAssembly.instantiateStreaming(). https://developer.mozilla.org/en-US/docs/WebAssembly/Reference/JavaScript_interface/instantiateStreaming_static
  10. wasm-bindgen Guide. https://rustwasm.github.io/wasm-bindgen/
  11. web.dev: Interaction to Next Paint (INP). https://web.dev/articles/inp
  12. Starbucks PWA case study. https://web.dev/articles/starbucks-pwa
  13. web.dev: Largest Contentful Paint (LCP). https://web.dev/articles/lcp