[2026年6月第2週] Web業界ウィークリー：ES2026 正式公開・OpenCode #1・Figma Config直前

今週（6/8〜6/14）は JavaScript と AI コーディングツールの両方で大きな動きがありました。ECMAScript 2026 が Ecma International に正式承認され、8年越しの JavaScript 改善が現実になりました。AI コーディングツールではオープンソースの OpenCode が #1 に躍り出て、Cursor や Copilot との三つ巴の構図が鮮明になっています。来週末（6/23〜25）に迫る Figma Config 2026 の直前情報も出揃ってきました。

ECMAScript 2026 正式公開 — Temporal・using・Set操作、10年越しの改善がついに

Ecma International が ECMAScript 2026（ES2026）を正式承認しました。2015年以来毎年6月に公開されてきたECMAScriptの2026年版で、今回は「長年の欠点を補修する」性格のアップデートが中心です。

出典: ECMAScript® 2026 Language Specification（TC39） / The New Stack — ES2026 Solves JavaScript Headaches

主な追加機能は以下です。

Temporal API — 長年の宿題だった Date オブジェクトの後継。タイムゾーン対応・暦変換・日時の差分計算など、従来 moment.js や date-fns に頼っていた処理が標準化されます。

using / await using キーワード — スコープを抜けたときにリソースを自動解放する仕組み。DB接続・ファイルハンドル・イベントリスナーの解放漏れが構文レベルで防げるようになります。

Error.isError() — instanceof Error が cross-realm で信頼できなかった問題を解決。catch した値が本当に Error かどうかを安全に確認できます。

Set 操作メソッド — union()・intersection()・difference()・symmetricDifference() など、集合演算がネイティブに。isSubsetOf() / isSupersetOf() も含みます。

Array.fromAsync() — 非同期イテラブルから配列を生成。for await...of ループを一行に畳めます。

RegExp.escape() — 正規表現で使われる特殊文字をエスケープする標準関数。ユーザー入力を正規表現に埋め込む処理が安全に書けるようになります。

ES2026 で最もインパクトが大きいのは Temporal と using です。前者は moment.js や date-fns を使ってきた既存コードの置き換えを検討するフェーズに入ります。後者は async/await のときと同じように、「これがない時代にどう書いていたんだっけ？」と感じる日が近いかもしれません。Node 22+ と TypeScript 5.8+ では既にサポート済みなので、今すぐ試せます。

💡 今すぐ試せる: const t = Temporal.PlainDate.today() を Node 22+ の REPL で実行して Temporal を試してみる。型補完は TypeScript 5.8+ で自動的に効く

OpenCode が AI コーディングツール #1 に — オープンソース、172K stars、モデル自由選択

LogRocket の「AI Dev Tool Power Rankings June 2026」で、OpenCode が初めて首位に立ちました。6月12日にはローカル MCP サーバーの cwd サポートと v2 API エンドポイントも追加されています。

出典: LogRocket — AI dev tool power rankings June 2026 / ByteIota — OpenCode Guide 2026

OpenCode の特徴を整理すると、MIT ライセンス・ターミナルネイティブ・75以上のモデルプロバイダー対応（Claude / GPT / Gemini / ローカルモデルを含む）・LSP（Language Server Protocol）統合・エアギャップ環境対応、の5点です。GitHub スターは 172,000 を突破し、MAU は 750万人。今回の首位はダウンロード数・GitHub スター・MAU を総合したLogRocketの独自調査によるものです。

今週（6/12）の追加機能でとくに注目されるのが「ローカル MCP サーバーの cwd サポート」です。プロジェクトディレクトリを指定して MCP サーバーを起動できるようになり、Claude Code や Cursor とほぼ同等の MCP 連携が可能になりました。

Cursor・GitHub Copilot・Windsurf・Claude Code と並ぶ選択肢として存在感が増しています。「特定の API キーにロックインされたくない」「チームによってモデルを使い分けたい」というニーズに応える位置づけです。

ツールが乱立する中でオープンソース最強クラスが台頭してきました。AI コーディングツールの選択基準が「どのモデルが使えるか」より「どのワークフローに馴染むか」に移ってきた感じです。Claude Code・Cursor との使い分けの軸として「モデル自由度」を加えて考えてみてください。

💡 今すぐ試せる: npm install -g opencode でインストールし、既存プロジェクトのディレクトリで opencode コマンドを実行して Cursor との使用感を比べてみる

Figma Config 2026（6/23〜25）直前 — Web→Canvas Chrome拡張・Figma Make 本番連携

Figma の年次カンファレンス Config 2026（サンフランシスコ Moscone Center）が6月23〜25日に迫っています。直前の機能発表が続いており、デザイン〜実装フローを変えそうなアップデートがいくつか出てきました。

出典: Figma Config 2026 公式 / Medium — Figma’s 2026 Updates Quietly Redefine Design-Dev Handoff

注目の2点。まず Chrome Extension Web Import。ウェブサイトを Figma キャンバスに「構造化レイヤー」として取り込める Chrome 拡張が追加されました。デザインのリファレンス収集や競合調査が、スクリーンショットをペーストする従来手順よりはるかに速くなります。取り込んだ要素はフレーム・テキスト・画像にそれぞれ分解された状態で入り、そのまま編集できます。

次に Figma Make の本番コードベース連携。5月の beta 発表（Mac 限定）に続いて、Figma キャンバスで操作した変更が直接 GitHub PR に反映されるワークフローの展開が進んでいます。デザイナーが Figma 上でコンポーネントを調整すると、PR が自動生成されてエンジニアがレビューできる状態になります。Config 2026 で正式アナウンスが出る見込みです。

Config は例年「Figma が何になりたいか」が最も見える発表の場です。今年は「デザインツール」から「デザイン〜実装をまたぐ操作基盤」への転換を明確に打ち出すフェーズ。Config のキーノートは見ておく価値があります。

💡 今すぐ試せる: Figma の Chrome 拡張をインストールし、参考にしたいウェブサイトを Figma に Web Import して、構造がどこまで再現されるか確認してみる

CSS スクロール駆動アニメーション — IntersectionObserver がいらなくなる

animation-timeline: scroll() と animation-timeline: view() を使った CSS Scroll-Driven Animations が、主要ブラウザ全体で実用域に入ってきました（Chrome 115+ / Firefox 110+ / Safari 17.2+）。

出典: MDN — animation-timeline / Medium — CSS Quietly Killed IntersectionObserver in 2026

まず2つの使い方を区別しておくとわかりやすい。scroll() はスクロール量そのものを animation の進行度に変換します（ページ進行バー・パラレックス効果）。view() は要素がビューポートに入ったタイミングで animation を発火させます（フェードイン・スライドイン）。

/* ① スクロール進行バー — スクロール量がそのまま進行度に */
.progress-bar {
  animation: grow linear;
  animation-timeline: scroll(root);
}

/* ② 要素がビューポートに入ったらフェードイン */
.card {
  opacity: 0;
  animation: fade-in 0.5s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;  /* 入り始め〜40%で完了 */
}

従来は IntersectionObserver + addEventListener の JS コードが必要でしたが、animation-timeline: view() 数行に置き換わります。scroll() / view() ともに Chrome 115+ / Firefox 110+ / Safari 17.2+ で対応済みで、今すぐ本番投入できます。なお、スクロールで時間ベースのアニメーションを発火させる scroll-triggered animations はさらに新しい機能で Chrome 145+ のみのため、まずはこの2つから始めるのがベストです。

See the Pen CSS スクロール駆動アニメーション デモ — animation-timeline でJSゼロ実装 by BaseKENT (@basekent) on CodePen.

「スクロールしたら要素が出てくる」を実装するには、IntersectionObserver を書いてクラスを付け外しする JS が必要でした。それが CSS の数行になります。コード量・パフォーマンス・メンテナンスのすべてで有利なので、新規実装はこちらで書き始めていい段階です。

💡 今すぐ試せる: 既存の IntersectionObserver 実装を1つ選んで、animation-timeline: view() + animation-range でどれだけシンプルになるか書き換えてみる

今週のひとこと

今週を1本に絞るなら ES2026 です。Temporal・using・Set 操作の3つだけでも、JavaScript の書き方が具体的に変わります。Node 22+ では既に動くので、次のプロジェクトから実際に使い始めてみてください。CSS Scroll-Driven Animations も即実装できる段階なので、IntersectionObserver の書き換えと並行して試してみる価値があります。OpenCode の台頭はツール選定の「モデル自由度」という軸を改めて意識させてくれました。Figma Config は来週末なので、キーノートのウォッチリストに入れておいて損はありません。