use-modern-browser-apis

モダンなブラウザー API の活用

重い外部ライブラリや独自のフォールバックよりも、ネイティブでモダンなブラウザー API（標準化され、広くサポートされており、大きな効果が得られるもの）を優先します。適切な場面で活用すれば、ロジックを簡素化し、パフォーマンスを向上させ、バンドルサイズを削減できます。

基本方針

• 優先：サードパーティの依存関係よりもブラウザー標準の機能を優先します。
• 段階的な機能強化：すべてのクライアントで利用できるとは限らない API には、常に妥当なフォールバックを用意します。
• 非同期かつ安全に：ブロッキングを避け、安全にアクセスするため、Promise ベースの API とセキュアコンテキスト API を使用します。

中核となる広くサポートされた API

これらの API は安定しており、幅広く実装され、日常的なアプリケーションで役立ちます。

UI と操作

• Intersection Observer API — 要素がビューポートに入る、または出るタイミングを効率的に検出します（遅延読み込み、無限スクロール）。
• ResizeObserver API — レイアウトのスラッシングを発生させずに、要素のサイズ変更に対応します。
• PerformanceObserver API — パフォーマンス指標を監視します（RUM／パフォーマンス分析）。
• BroadcastChannel API — 同一オリジンのタブ間で通信します。

ナビゲーションとビュー管理

• View Transitions API — UI の状態間で、ネイティブのハードウェアアクセラレーション対応トランジションを実現します。
• URLPattern API — URL を宣言的に照合・解析します（ルーティングロジックに役立ちます）。

クリップボードと共有

• Clipboard Async API — ユーザーの同意を得て、ブロッキングせずにクリップボードを読み書きします。
• Web Share API Level 2 — ネイティブのデバイスダイアログを通じて、テキスト、リンク、ファイルを共有します。

ファイルと永続化

• File System Access API — ユーザーの権限を得て、ローカルファイルを読み書きします。
• File Handle & Directory Picker 拡張機能 — ファイルやディレクトリをまとめて選択します。

並行処理とスケジューリング

• Web Locks API — 共有リソースへの非同期アクセスを調整します（競合を回避します）。
• Scheduling API — 緊急性の低い作業に優先度を付けたり、バックグラウンドで実行したりして、応答性を高めます。

ワーカーとメインスレッド外の処理

• Web Workers API — 負荷の高いタスクをメインスレッド外で実行します。
• OffscreenCanvas — ワーカー内でキャンバスを描画し、グラフィックスやビジュアルのパフォーマンスを向上させます。

音声とアクセシビリティ

• Web Speech API — 音声認識と音声合成を統合し、アクセシビリティと音声 UI を実現します。

高度なグラフィックスと計算処理

• WebGPU API — 高性能な描画や計算処理のために、低レベルの GPU アクセスを提供します（多くのブラウザーで利用でき、Chromium、新しい Safari、Firefox もサポートしています）。

リアルタイム通信とネットワーク

• WebRTC — プラグインを使わずに、リアルタイムのピアツーピア音声・ビデオ通信を実現します。

使用方法とフォールバック

• 使用前に機能検出が必要です。

  if ('clipboard' in navigator) { … }
  

WebGPU など、すべての環境でサポートされているわけではない API には、適切なフォールバック（WebGL や機能を制限した UI）を用意します。

共有やクリップボードなど、ユーザーの操作が必要な API では、必ず権限の確認とユーザー操作の要件を組み合わせてください。

ベストプラクティス

非同期処理を優先：UI のブロッキングを避けるため、Promise／async API を優先します。

権限 UI：ファイル、クリップボード、共有へのアクセスをブラウザーが求めるタイミングを、ユーザーに明確に伝えます。

パフォーマンスへの配慮：PerformanceObserver や Scheduling API を使用して、メインスレッドの作業を監視し、優先順位を付けます。

セキュアコンテキスト：HTTPS を使用してください。多くの API は、機能するためにセキュアコンテキストを必要とします。

基本原則

単なる JS エンジンではなく、プラットフォームとしてのブラウザー向けにコードを書きます。

手動のスクロールハンドラーではなく IntersectionObserver を使った遅延読み込みなど、ネイティブのセマンティクスを優先します。

モダンなブラウザー API で対応できる場合は、外部依存関係を減らします。

保守性とクロスブラウザー対応のため、API の使用方法とフォールバックのパターンを文書化します。