[2026年7月第3週] Web業界ウィークリー：MCP仕様RC・Claude Codeブラウザ内蔵・ES2026確定

2026年7月19日

当ページのリンクには広告が含まれています。

今週（7/13〜7/19）はAIエージェント周辺の動きが凝縮した週でした。Model Context Protocolの次期仕様Release Candidateが公開され、ステートレス化という大きな設計変更が入りました。Claude Codeにブラウザが内蔵され（7/10）、ECMAScript 2026は6月30日に正式確定したニュースですが今週から現場への影響が本格的に出始めています。フロントエンドでは CSS Anchor Positioning が @position-try まで全ブラウザ対応を達成し、ツールチップ・ポップオーバーのライブラリ不要時代が本格的に始まっています。

MCP 2026-07-28 仕様 Release Candidate——プロトコルがステートレスに

今週、Model Context Protocol（MCP）の次期仕様 Release Candidate が公開されました。最終仕様は7月28日に確定予定で、これはローンチ以来最大の改訂です。

出典: MCP Blog — The 2026-07-28 MCP Specification Release Candidate / Medium — MCP 2026-07-28: Stateless core, enterprise authorization

MCP 2026-07-28 RC ステートレス化 Before After 図解

最大の変更: プロトコルがステートレスに。現行の MCP は Mcp-Session-Id ヘッダーと initialize ハンドシェイクが必要で、スティッキーセッション（リクエストを同一サーバーインスタンスに固定する仕組み）と共有セッションストアが必要でした。新仕様ではこれが廃止され、任意のサーバーインスタンスへリクエストを投げられるようになります。普通のラウンドロビンロードバランサー（リクエストを複数サーバーに順番に振り分ける仕組み）で MCP サーバーを水平スケールできるため、本番運用が大幅にシンプルになります。

「アプリケーションをステートレスにしなければならない」わけではなく、状態はツールの戻り値（basket_id のようなハンドル）をモデルが次のリクエストに含める形で管理します。

その他の主な変更点:

MCP Apps: サーバーがサンドボックス iframe 内で HTML UI を提供できる新拡張
Tasks 拡張: ステートレスモデルに合わせて再設計。tools/call からタスクハンドルを返す方式に
認証強化（OAuth 2.0/OIDC 整合）: iss パラメータ検証・アプリタイプ宣言・リフレッシュトークン仕様を明確化

自前でMCPサーバーを構築・運用している方は必読です。MCPサーバーを動かしている、または社内向けに開発している場合は今から変更点を把握しておく必要があります。Tier 1 SDK（TypeScript・Python公式SDK）は10週以内にサポートを出荷予定で、移行コストは比較的小さい見込みです。MCP Appsは「ツール呼び出しだけでなくUIも返せる」方向に進む布石で、エージェントの表現力が上がります。

💡 今すぐ試せる: RC の変更点を公式ブログで確認し、自分のMCPサーバーで Mcp-Session-Id 依存や Tasks API を使っている箇所を洗い出す。-32002 エラーコードを使っている場合は -32602 への移行も必要

Claude Code がブラウザを内蔵（7/10）——Cmd+Shift+B で世界が変わる

7月10日、Anthropicが Claude Code Desktop のブラウザ内蔵機能をリリースしました。Cmd+Shift+B（Windows: Ctrl+Shift+B）でアプリ内ブラウザが開き、エージェントがドキュメント閲覧・DOM操作・フォーム入力・スクリーンショット取得を行えるようになります。

出典: 9to5Mac — Anthropic highlights Claude Code’s in-app browser on the desktop / Digital Applied — Claude Code Desktop Adds a Sandboxed Browser for Agents

これまでの制約: エージェントはローカルのファイルやコードは操作できても、Web上のドキュメントを見るには「MCP で別途ブラウザツールを繋ぐ」という手間が必要でした。今回の変更でその MCP グルーコードが不要になります。

セキュリティ設計: ブラウザはサンドボックス化されており、個人のブラウザとは完全に分離したプロファイルを使用します。外部サイトへのアクションは安全性分類器によるレビューが入ります。セッション永続化のオン/オフも設定可能です。

主なユースケース:

公式ドキュメントを参照しながらコードを生成・修正
自分で作ったWebアプリを開いて動作確認・バグ修正をループで実行
FigmaのデザインURLや画像を渡して「このデザインに合わせてコンポーネントを作って」と指示する

「エージェントがコードを書いて→ブラウザで確認して→問題を見つけて→修正する」このループが人間の関与なく回るようになりました。ローカルのプレビューサーバーとの組み合わせが最も効果的で、開発中のUIのバグ修正をエージェントに丸投げできます。AnthropicがMCPの代わりにファーストパーティで実装した判断も、ユーザー体験の観点では正解だと感じます。

💡 今すぐ試せる: Claude Code を最新版に更新して Cmd+Shift+B でブラウザを開く。ローカルの localhost:3000 にアクセスさせ「このページのボタンが動かないので原因を調べて直して」と頼んでみる

ECMAScript 2026（ES2026）正式確定——Temporal で Date の30年問題に決着

6月30日に ECMA International が ECMAScript 2026 仕様を正式批准しました（ES2026、JavaScript 仕様の第17版）。今週から主要フレームワークやツールが対応方針を発表し始め、現場での採用判断が求められるタイミングになっています。

出典: InfoWorld — ECMAScript 2026 specification approved / pawelgrzybek.com — What’s new in ECMAScript 2026

今回の目玉機能を3つ紹介します。

Temporal API: 30年間バグだらけで使われてきた Date オブジェクトの後継です。タイムゾーン対応・不変オブジェクト・ISO 8601準拠・グレゴリオ暦以外のカレンダーサポートを標準で持ちます。date-fns や dayjs を使っていた処理の多くが標準APIで実現可能になります。

// Temporal: タイムゾーン付き日時操作が直感的に
const now = Temporal.Now.zonedDateTimeISO('Asia/Tokyo');
const nextWeek = now.add({ weeks: 1 });
console.log(nextWeek.toString());
// 2026-07-26T10:30:00+09:00[Asia/Tokyo]

Map.prototype.getOrInsert(): 「キーがあれば返し、なければ挿入して返す」という処理を1行で書けます。カウンターや集計処理で毎回書いていたパターンがなくなります。

// Before: 毎回このパターンを書いていた
if (!map.has(key)) map.set(key, 0);
map.set(key, map.get(key) + 1);

// ES2026: 1行で完結
map.getOrInsert(key, 0);

Error.isError(): instanceof Error は iframe や別ウィンドウを越えると誤判定します。Error.isError() は Realm（JavaScriptの実行コンテキスト境界）をまたいでも正しく判定できます。

新規プロジェクトでは Temporal を使う、日付ライブラリへの依存を外す。そういう方針に切り替えるタイミングです。Chrome・Firefox・Safari すべてに実装済みで、今日から使えます。既存プロジェクトの移行は段階的で構いません。

💡 今すぐ試せる: ブラウザコンソールで Temporal.Now.plainDateISO() を実行して動作確認。既存コードの new Date() を使っている部分をリストアップし、Temporal への移行コストを見積もる

CSS Anchor Positioning が `@position-try` まで全ブラウザ対応——ツールチップライブラリ不要へ

Safari 26 が @position-try をサポートし、Chrome 125+ / Firefox 147+ / Safari 26+ のすべてで @position-try を含む完全な実装が揃いました。

出典: web.dev — Baseline 2026 / CSS Anchor Positioning in 2026: Replace JavaScript Tooltip Libraries for Good

anchor-name でアンカーを定義し、position-anchor + position-area でターゲット要素を配置するだけ。Floating UI や Popper.js が担っていた「アンカーに追随して位置を計算する」処理がゼロ行のJSで実現できます。

See the Pen CSS Anchor Positioning — @position-try 全ブラウザ対応 by BaseKENT (@basekent) on CodePen.

/* アンカーを定義 */
.btn { anchor-name: --btn; }

/* ツールチップをアンカーに紐付け */
.tooltip {
  position: absolute;
  position-anchor: --btn;
  position-area: top;               /* アンカーの上に配置 */
  position-try-fallbacks: --below;  /* 端に当たったら下へ */
}

@position-try --below {
  position-area: bottom;
}

position-area は top・bottom・left・right の他、bottom span-right（左揃えで下）のような指定もできます。@position-try でフォールバック位置を複数列挙すれば、ブラウザが自動で適切な位置を選びます。

Floating UI・Popper.js・Tippy.js が解決していた「要素を別の要素に追随させる」問題が CSS のみで解決できます。アクセシビリティ（キーボード操作・スクリーンリーダー）はブラウザが面倒を見るため、JS実装より信頼性が高い。次のコンポーネント実装時に試してみてください。

💡 今すぐ試せる: Chrome DevTools で anchor-name: --test を試し、ツールチップコンポーネントのCSSを position-area + @position-try に置き換える。@supports (anchor-name: --x) でフォールバックも忘れずに

今週のひとこと

MCPのステートレス化、Claude Codeのブラウザ内蔵、ES2026の確定と、今週はAIエージェントとWeb標準の両方が「使えるもの」として整ってきた週でした。CSS Anchor Positioning の全ブラウザ対応も含め、「ライブラリに頼らなければできなかったこと」が標準で実現できる範囲が広がり続けています。新しい仕様や機能を試す際は、今後は @supports や try-fallbacks など「対応していない環境への配慮」も一緒に設計しておく習慣をつけておくと実務でスムーズです。