
Frontendに欠けたMetric:TBT Window — 2026年 第23週 ウェブ開発
Cross-cutting frontend topics, tooling, and DX Compiled for immediate developer deployment.


ループエンジニアリング
SKILL.mdファイルによるプロジェクトコンテキストの明文化)、プラグインとMCPコネクター(ツール統合)、そしてサブエージェント(作成者と検証者の分離)。CodexとClaude Codeの両方がこの5つをサポートしており、ループ設計は特定ツールに依存しません。Osmaniは、ループが無人状態でのミス、理解負債、認知的降伏という3つのリスクを悪化させると警告しています。
Intent Debt
AGENTS.mdをインテント台帳として活用、意思決定時の軽量なADR記録、エージェントがセッション後に学習内容を永続ファイルに書き戻すフィードバックループの構築を推奨しています。
GitHub Copilot App:Agent-native Desktop Experience

現代エンジニアリングの価値観

Source Mapについて知るべきすべて
sources、names、base64 VLQエンコードされたmappings、元のソーステキストをインラインに含むsourcesContent)と、sourcemapが逆転させるTypeScriptからミニファイされたバンドルへの変換パイプラインを説明します。セキュリティリスクは具体的です。2025年11月のAppleのウェブApp Storeリリースと2026年3月のAnthropicのclaude-code npmパッケージ(1,900ファイル、512,000行をカバーする59.8MBのcli.js.map)が誤って本番sourcemapを含んで出荷されました。Anthropicのリークはnpmパッケージがキャッシュ・ミラーされるため永続的でした。Danは4つの防御層を推奨しています:本番ビルドでsourcemapを無効化(ViteとNext.jsのデフォルトはすでにfalse)、エラー追跡専用のhidden sourcemap使用(Viteのsourcemap: 'hidden'、Webpackのhidden-source-map)、サーバーで.mapリクエストをブロック、distアーティファクトでsourcesContentをスキャンするpostbuild CIチェックの自動化。
Vibe Code時代のOWASP Top Ten入り
Frontendに欠けたMetric:TBT Window
Harry Robertsは「TBT Window」という概念を提唱しています。これはFirst Contentful PaintからTime to Interactiveまでの区間で、Total Blocking Timeがブロッキング作業を計測する範囲です。あるクライアントのTBTが495msから5,789msに急増しましたが、JavaScriptが悪化したわけではなく、LCP最適化のために追加したpreloadヒントが余分なネットワークリクエストを発生させ、TTIの5秒クワイエットウィンドウ条件(ロングタスクなし、インフライトGETリクエスト2件以下)に違反したことが原因でした。ウィンドウが拡大し、以前はスコープ外だったロングタスクがメトリクスに含まれるようになったのです。Robertsは合成ツールがTBTスコアと並んでTBT Windowを表示すべきだと主張し、TBTとTTIを併せて監視することを推奨しています。

ループエンジニアリング
Addy OsmaniはLoop Engineeringについて解説しています。コーディングエージェントをターンごとに手動でプロンプトする代わりに、エージェントを自律的にオーケストレーションするシステムを設計するアプローチです。ループは5つの要素で構成されます:Automations(スケジュールされた探索とトリアージ)、Worktrees(並列エージェントの分離)、Skills(SKILL.mdファイルによるプロジェクトコンテキストの明文化)、プラグインとMCPコネクター(ツール統合)、そしてサブエージェント(作成者と検証者の分離)。CodexとClaude Codeの両方がこの5つをサポートしており、ループ設計は特定ツールに依存しません。Osmaniは、ループが無人状態でのミス、理解負債、認知的降伏という3つのリスクを悪化させると警告しています。
Intent Debt
Addy OsmaniはMargaret-Anne StoreyのTriple Debt Modelをエージェント時代に適用し、技術的負債(コード)、認知的負債(人の理解)、インテント負債(外部化された成果物)を区別しています。AIは技術的負債をリファクタリングし、理解をオンデマンドで復元できますが、意思決定の背後にある目標・制約・根拠という「本物のインテント」は生成できません。エージェントワークフローでは各セッションがコールドスタートするため、外部化されていないインテントは並列エージェント数に乗じたセッションごとのコストになります。Osmaniはゴールと非交渉可能な制約を記述したスペック作成、AGENTS.mdをインテント台帳として活用、意思決定時の軽量なADR記録、エージェントがセッション後に学習内容を永続ファイルに書き戻すフィードバックループの構築を推奨しています。
GitHub Copilot App:Agent-native Desktop Experience
GitHubはMicrosoft BuildでGitHub Copilotアプリを発表しました。単一のMy WorkビューからAI エージェントの複数並列セッションを管理するデスクトップコントロールセンターです。各セッションは独立したgit worktreeで実行されます。新しいCanvases機能は、エージェントがプラン、PR、ターミナル、デプロイメントダッシュボードを更新し、開発者が同じ画面で作業を編集・方向転換できる双方向の作業サーフェスを提供します。Agent MergeはCIの監視、必須レビュアーの追跡、失敗チェックの対応、条件充足時の自動マージなどPRライフサイクルを自動化します。Copilotコードレビューはより高い推論モデルにPRをルーティングするmediumティアモードを提供し、Copilot SDKはNode.js/TypeScript、Python、Go、.NET、Rust、Javaの6言語でGAになりました。
READ_FULL_LOGarrow_forward現代エンジニアリングの価値観
Christoph Nakazawa(cpojer)は30日間で770コミットを積み上げたと報告しており、2年前と比べてコミット数は2倍以上、コード行数は3倍になりました。Vite+、fate 1.0、Codiff、Athena CrisisなどすべてのプロジェクトがAIによって書かれています。彼は現代のエンジニアリングを定義する6つの価値を提唱します:強いオーナーシップとドメイン専門知識(エージェントはコンテキストを増幅するがそれを代替はしない)、テイスト(何を作る価値があるかの判断)、厳格なガードレールと高速フィードバックループ、リポジトリ内へのコンテキスト集約、サードパーティ依存を減らして自前スタックを所有すること、将来の柔軟性を閉じないオプション価値の保全。エンジニアリングマネージャーは個人貢献者のレバレッジが増す中、深い技術的専門知識を維持し続けるべきだと主張しています。
READ_FULL_LOGarrow_forwardSource Mapについて知るべきすべて
Neciu Danはsourcemapの内部構造を詳しく解説しています。v3 sourcemapの4つの主要フィールド(sources、names、base64 VLQエンコードされたmappings、元のソーステキストをインラインに含むsourcesContent)と、sourcemapが逆転させるTypeScriptからミニファイされたバンドルへの変換パイプラインを説明します。セキュリティリスクは具体的です。2025年11月のAppleのウェブApp Storeリリースと2026年3月のAnthropicのclaude-code npmパッケージ(1,900ファイル、512,000行をカバーする59.8MBのcli.js.map)が誤って本番sourcemapを含んで出荷されました。Anthropicのリークはnpmパッケージがキャッシュ・ミラーされるため永続的でした。Danは4つの防御層を推奨しています:本番ビルドでsourcemapを無効化(ViteとNext.jsのデフォルトはすでにfalse)、エラー追跡専用のhidden sourcemap使用(Viteのsourcemap: 'hidden'、Webpackのhidden-source-map)、サーバーで.mapリクエストをブロック、distアーティファクトでsourcesContentをスキャンするpostbuild CIチェックの自動化。
Vibe Code時代のOWASP Top Ten入り
OWASP Top 10 2025の共著者Tanya Jankaは、今回のアップデートの2つの主な変更点を解説しています。脆弱なコンポーネントの項目をIDE、CI、コードリポジトリを含むソフトウェアサプライチェーン全体に拡大し、曖昧な「コード品質の低さ」を具体的な「例外条件の誤った処理」に置き換えました。リストにはメモリ安全性とAI生成(「バイブ」)コードという2つの追加項目が含まれており、後者はデータ的根拠なく認知向上のために追加されたことが明記されています。Jankaはサプライチェーンの衛生管理として、7日以上経過した依存関係のみをピン留めすること、到達可能性分析付きのSCAツール使用、CVE数を超えた依存関係の健全性評価を推奨しています。またAIコーディングアシスタントがエラー処理を削除してスタックトレースを露出するなどセキュリティ脆弱性を導入しがちだと警告し、securemyvibe.caの無料プロンプトライブラリを紹介しています。
READ_FULL_LOGarrow_forward今週のウェブ開発全般カテゴリはAddy OsmaniのAI支援エンジニアリングに関する2本の記事が中心でした。1本目はLoop Engineeringを紹介しました。Automations・Worktrees・Skills・MCPコネクター・サブエージェントという5つの要素を基盤に、コーディングエージェントをターンごとに手動プロンプトするのではなく自律的にオーケストレーションするシステムを設計するアプローチです。CodexとClaude Codeの両方がこの5つをサポートします。Osmaniはループが3つのリスクを増幅させると警告しました。無人状態でのミス、書いていないコードの理解負債、独立した判断を放棄する認知的降伏です。2本目の記事はMargaret-Anne StoreyのTriple Debt Modelをエージェント時代に適用し、インテント負債という概念を導入しました。AIが生成できない目標と根拠が外部化されていないことで発生するセッションごとのコストです。目標をspecに記述し、AGENTS.mdをインテント台帳として活用し、意思決定時に軽量なADRを記録し、エージェントがセッション後に学習内容を永続ファイルに書き戻すフィードバックループの構築を推奨しました。
GitHubはMicrosoft BuildでGitHub Copilotアプリを発表しました。単一のMy Workビューから並列エージェントセッションを管理するデスクトップコントロールセンターで、各セッションはgit worktreeで分離されます。Canvases機能はエージェントと開発者が同じ画面で作業できる双方向のワークサーフェスを提供します。Agent MergeはCIモニタリング・レビュアー追跡・条件付き自動マージを含むPRライフサイクルを自動化します。Copilotコードレビューは高い推論モデルにPRをルーティングするmediumティアモードを追加し、Copilot SDKはNode.js/TypeScript・Python・Go・.NET・Rust・Javaの6言語でGAになりました。Christoph Nakazawa(cpojer)は30日間でVite+・fate 1.0・Codiff・Athena Crisisに770コミットを積み上げたと報告し、AI時代でも普遍的な6つのエンジニアリング価値を提唱しました。ドメインオーナーシップ、テイスト、厳格なガードレール、リポジトリ内コンテキスト、スタックの自前保有、オプション価値の保全です。
Harry RobertsはTBT Windowという概念を提唱しました。FCPからTTIまでの区間でTotal Blocking Timeを計測する範囲です。あるクライアントのTBTがJavaScriptの悪化ではなくpreloadヒントがTTIの5秒クワイエットウィンドウ条件に違反したことで495msから5,789msに急増した事例を診断しました。OWASP Top 10 2025共著者Tanya Jankaは脆弱なコンポーネント項目をソフトウェアサプライチェーン全体に拡大し、曖昧な「コード品質の低さ」を「例外条件の誤った処理」に置き換えた2つの主要変更を解説しました。AIコーディングアシスタントがデフォルトでセキュリティ脆弱性を導入しがちだと警告し、securemyvibe.caの無料プロンプトライブラリを紹介しました。sourcemapセキュリティガイドはApple(2025年11月)とAnthropicの(2026年3月、59.8MBのcli.js.map)が誤って本番sourcemapを含めて出荷したことを明らかにし、hidden sourcemapとpostbuild CIスキャンを推奨しました。
- インテント負債(記録されていない目標と根拠)はすべての並列AIエージェントセッションにわたって蓄積します。エージェントを起動する前に、spec・ADR・AGENTS.mdにインテントを外部化してください。
- Harry RobertsのTBT Window分析は、LCP向けのpreloadヒント追加が逆説的に計測ウィンドウを拡大してTBTを爆発的に増やす可能性を示しています。TBTとTTIを併せて追跡し、絶対スコアだけでなく両者のずれを調査してください。
- 本番sourcemapの出荷はソースツリー全体を永続的に流出させます(npmキャッシュはすべてミラーする)。Viteのsourcemap: 'hidden'またはWebpackのhidden-source-mapを使用し、distアーティファクトのsourcesContentをスキャンするpostbuild CIチェックを追加してください。