Googleでの14年間から得た21の教訓 — 2026年 第1週 ウェブ開発

GitHub Security LabのAntonio Moralesは、3つの具体的なケーススタディを通じて、OSS-Fuzzへの長期登録がセキュリティを保証しないことを実証します。7年間継続的にファジングされてきたGStreamerは、アクティブなファザーが2個・コードカバレッジは19%に過ぎず、OpenSSLの139ファザー・bzip2の93%と対照的に、Moralesは2024年12月に29件の新たな脆弱性を発見しました。Popplerは60%のカバレッジを備えながら1クリックRCEを見逃しました。依存ライブラリのDjVuLibreがlibFuzzerで計測されておらずOSS-Fuzzのビルドに含まれていなかったにもかかわらず、Evince・Papersを通じて何百万ものUbuntuシステムにデフォルトインストールされていたためです。Exiv2はCVE-2025-26623などを見逃しましたが、研究者がデコード経路に集中してエンコード経路を軽視することが原因で、エンコードの脆弱性はサムネイル生成などのバックグラウンドワークフローで顕在化します。Moralesはコード準備・エッジカバレッジ（目標>90%）・コンテキスト感応カバレッジ（AFL++ CmpLogまたはN-Gramブランチカバレッジで目標>60%）・値カバレッジ（制御フローではなく変数の値域を追跡）・トリアージの5ステップワークフローを提案します。2 GB超の入力や10 ms超の実行時間を要するバグは現在のすべてのファザーを回避するため、静的解析や手動コードレビューが必要です。

フロントエンド歴9年以上のソフトウェアアーキテクトKeerthana Krishnan（JS Conf Asia 2019、Performance.now() 2023登壇者）が、Chrome DevToolsの7つの機能を紹介し、デバッグを反応的から診断的なものへ転換します。Elementsパネルの「人」アイコンからアクセスするAccessibility Treeビューは、DOMツリーでは見えないアクセシブル名の欠落・誤ったARIAロール・誤適用のARIA属性を表面化します。Lighthouseタイムスパンは初期ページロードを超え、フォーム送信やダッシュボードナビゲーションといった認証済みインタラクションへ監査範囲を拡張し、パフォーマンス低下が潜む箇所を正確に捉えます。ワイルドカードで設定するネットワークリクエストのブロック機能は、サードパーティスクリプトの失敗・画像フォーマットのフォールバック欠如・「非重要」リソース削除時に実ユーザーフローが壊れるかを検証します。Performanceパネルのフレームチャートはボトルネック（LCP遅延・INP遅延・CLS原因のレイアウトシフト）を可視化し、「Dim 3rd parties」トグルで分析・広告のノイズを除去します。RecorderパネルはPuppeteerスクリプトやパフォーマンスプロファイルのシードとしてエクスポート可能な再現性のあるユーザーフローを記録します。最後に、chrome://inspectを介したAndroidリモートデバッグはデスクトップテストでは一切現れないCPU・メモリ制約を露わにします。

この包括的なガイドは、テストが実装の詳細ではなくユーザー向けの振る舞いを検証すべきという論旨のもと、37のフロントエンドテスト原則を整理しています。主な構造的ルールとして、無関係なアサーションを別々のtest()呼び出しに分けること、React Testing Libraryのクエリ優先順位（getByRole > getByLabelText > getByText > getByTestIdは最終手段）に従うこと、モジュールに新しいエクスポートが追加されたときのテスト破損を防ぐためvi.mock()全体よりvi.spyOn()を優先することが挙げられます。AIは子コンポーネントの動作を把握できないためオーバーモックになりやすいと明示的に指摘し、データフェッチと真の外部依存関係のみをモックして実際の実装をレンダリングするよう推奨します。具体的なアンチパターンも明確な結果とともに示されます。expect(x).toBeDefined()はnullが返されても通過し、大きなシリアライズされたDOMにtoMatchSnapshot()を使うと開発者が反射的にuを押してバグを通過させ、テスト内のif/else文はexpect()呼び出し自体をサイレントにスキップさせます。実践的な推奨事項として、単一ファイルにフィルタリングしたvitest --watchでほぼ即時フィードバックを得ること、日付・タイムアウト関連にvi.useFakeTimers()を使うこと、各テストに関連するプロパティのみを公開するcreateUser(overrides)フィクスチャヘルパーを活用することが挙げられます。

HTML Invoker Commands APIは、ネイティブ<dialog>要素に残っていた唯一のJavaScript要件—ダイアログを開くこと—を2つの宣言的なボタン属性で排除します。commandFor="dialog-id"とcommand="show-modal"を持つボタンは、ブラウザのトップレイヤーに対象ダイアログをモーダルとして開き、バックドロップ処理・フォーカス管理・Escキーによる閉じ操作・アクセシビリティツリーの更新をすべてネイティブで処理します。ダイアログ内ボタンのcommand="close"属性は、従来の<form method="dialog">による回避策を置き換えます。このAPIは現在すべてのモダンブラウザでサポートされていますが、本番環境での使用可否は個別に評価が必要であり、必要な環境向けにKeith Cirkelによるポリフィルが提供されています。この小さなスクリプト削除でも実際の効果は明確です。パース・実行すべきJavaScriptが減り初期ロードが高速化され、スクリプトの配信が失敗しても宣言的マークアップは機能し続けます。この記事はHTML invoker commandsを、一般的なインタラクティブパターンをネイティブかつ宣言的に処理するというより広いプラットフォームトレンドの一部として位置づけています。