DevSpeedTools

エンジニアリング · 2026年8月28日

2026年にすべての開発者が知るべきWebプラットフォーム機能

ブラウザは今や本格的なランタイムです。View Transitions、Popover API、WebGPU Compute、File System Access APIがすべて成熟しました。它们が何を可能にし、どのように使うか。

DevSpeedTools による

5年前、「Webプラットフォーム」とは<div>とfetchを意味した。2026年には、グラフィックス対応、GPUプログラマブル、ファイルシステム対応、マルチプロセスのランタイムであり、2015年に大多数のOSが発行したものよりも豊富なコンポーネントライブラリを持つ。以下の機能はすべて「ポリフィルなしで本番で使える」段階に到達し、Webアプリが何になり得るかを変えている。

View Transitions API

ここ数年の最大のUX向上だ。View Transitionsは1つの関数呼び出しでDOM状態間をアニメーションでき、ブラウザが補間を処理してくれる。

// 前：瞬時で気の抜けた変化
document.body.innerHTML = newHTML;

// 後：スムーズなクロスフェード
document.startViewTransition(() => {
  document.body.innerHTML = newHTML;
});

これだけだ。ブラウザは古い状態をスナップショットし、新しい状態を適用し、クロスフェードする。数行のCSSで個々の要素をアニメーションできる（共有要素トランジション）：

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

::view-transition-old(.card),
::view-transition-new(.card) {
  animation-duration: 0.4s;
}

SPA（ルート変更）、MPA（フルページ読み込み、metaタグと同一オリジンナビゲーション付き）、Vue/React/Svelteルータートランジションで動作する。ブラウザサポートは2024年にクロスブラウザ安定版に到達し、新しいアプリでのページトランジションの推奨方法になった。最後に手書きFLIPアニメーションを書いたとき、View Transitions仕様はドラフトだった。

Popover API

ポップオーバー、ダイアログ、<select>要素は、フォーカストラップ、ESCキーハンドリング、ライトディスミス動作、ARIAの一团糟だった。Popover APIはすべてを標準化する。

<button popovertarget="menu">メニューを開く</button>
<ul id="menu" popover>
  <li>Cut</li>
  <li>Copy</li>
  <li>Paste</li>
</ul>

これは完全にアクセシブルで、トップレイヤーで、ライトディスミスし、ESCキーで閉じるポップオーバーメニューだ。JavaScriptなし、z-index戦争なし。popover属性は要素をブラウザのトップレイヤーに置き（他のコンポーネントのモーダルダイアログを含むすべてのコンテンツの上）、ブラウザがフォーカス、ESC、クリックアウトサイドの動作を自動的に処理する。

3つのモード：

  • popover（auto） — ライトディスミス、複数のポップオーバーが開ける。
  • popover="manual" — プログラマティックな開閉のみ、ライトディスミスなし。
  • <dialog> — モーダル、バックドロップ付き、フォーカスをトラップし、明示的な閉じる必要あり。

ドロップダウン、ツールチップ、アクションメニュー、ピッカーには：popover。操作をブロックするモーダルダイアログには：dialog。position: absoluteとクリックアウトサイドリスナーでドロップダウンを構築するのはやめよう — これは2019年のパターンだ。

WebGPUコンピュートシェーダー

WebGPUは2023年から「もう少し」と言っていたが、コンピュートシェーダーの話が成熟したのは2025年だった。今では、モダンブラウザで、すべてのモダンOSで、まともなAPIで任意のGPUコンピュートを実行できる。

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const shader = device.createShaderModule({ code: computeWGSL });
const pipeline = await device.createComputePipeline({ layout: 'auto', compute: { module: shader, entryPoint: 'main' } });
// ... バッファのバインド、ディスパッチ、結果の読み取り

できること：

  • 開発ツール。 GPUで数百万回のマッチを実行する正規表現テスター。500MBファイルを200msでパースするJSONフォーマッター。2つの100MBファイルを1秒未満で比較するdiffツール。
  • ローカルファーストアプリ。 画像処理、動画トランスコード、ML推論 — すべてブラウザで、サーバーなし。
  • 可視化。 以前は「GPUに載せられたら60fpsになるのに」と言っていたものはすべてGPUに載せられる。

WebGPUは本番でHTTPSが必要だ（APIはcrypto.subtleと同様にセキュアコンテキストでゲートされている）。また、モダンブラウザと実際のGPUが必要だ — 古いハードウェアにはWebGL2またはJS専用パスへのフォールバックがまだ必要だ。

File System Access API

File APIはユーザーがドラッグしたファイルのスナップショットを与える。File System Access APIは読み書きできるライブハンドルを与える。

const handle = await window.showSaveFilePicker({
  suggestedName: 'config.json',
  types: [{ description: 'JSON', accept: { 'application/json': ['.json'] } }],
});
const writable = await handle.createWritable();
await writable.write(JSON.stringify(data, null, 2));
await writable.close();

ファイルを再開し、FileSystemFileHandleを取得し、IndexedDBでセッションをまたいで使い続けることもできる（ハンドルはシリアライズ可能）。開発ツールにとって、これは「すべての変更後にファイルをダウンロードする」か「インプレースで編集する」かの違いだ。

ブラウザサポート：2023年以降のChromeとEdge、2025年以降のSafariとFirefox。非対応ブラウザにはBlobと<a download>にフォールバック — 機能はきれいに検出される。

CSSサブグリッド

display: gridは10年間で最大のレイアウト改善だった。subgridが2番目だ。グリッドアイテムが親のグリッドに参加できる：

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

これで各カードは、flexboxハックやマジックナンバーなしで、等しい高さのヘッダー、ボディ、フッターを持つ。サブグリッドは2023-2024年にすべてのエンジンに到達し、フォールバックなしで安全に使用できる。

実用的なまとめ

ここ数年でWeb開発を始めた場合、プラットフォームがどれだけ変わったかに気づいていないかもしれない。「すべてにライブラリを使う」反射 — アニメーション、ドロップダウン、ファイルピッカー、モーダル、甚至レイアウト — はますます時代遅れになる。ネイティブはより速く、より小さく、よりアクセシブルで、フレームワークアップグレードで壊れにくい。

ブラウザが20行のHTMLで解決できる問題にnpm installで50KBパッケージを入れようとしているなら、まずプラットフォームを確認しよう。答えはますます「Yes、ブラウザはそれをやる」になっている。

高速なテスト方法：DevSpeedToolsのすべての開発ツールは、同じプラットフォーム機能（Web Crypto、File System Access、Popover API、CSSサブグリッド）を使い、完全にクライアントサイドで実行される。npm依存なしでJSONフォーマッターを構築できるなら、ほとんどのものを構築できる。