Skip to content

Frontend Weekly 2025-12-05

#Frontend weekly #WordPress #Chrome #CSS #Bun #Anthropic #React #Security #TypeScript #AWS #Vercel #Next.js

#WordPress 6.9リリース

日付：2025年12月2日

WordPress 6.9がリリースされた。ブロガー、クリエイター、サイトオーナー向けの機能改善が含まれる。

主な新機能：

コラボレーション機能：

  • Block-level Notes：ブロックに直接フィードバックを残せ、スレッド形式で解決可能なノートを追加可能。著者は新しいコメントが来ると自動的にメール通知を受信
  • Hide and Show：ブロックを削除せずに表示/非表示を切り替え可能
  • ビジュアルドラッグアンドドロップ：ブロックを移動する際の配置先をプレビュー表示
  • Allowed blocks UI：コンテナ内で許可するブロックタイプを指定可能（以前はコードビューでのみ編集可能）

新しいブロック：

  • Accordion block：折りたたみ可能なセクション
  • Term Query block：カテゴリやタグページの構築を簡素化
  • Time-to-Read block：推定読了時間を表示
  • Math block：LaTeXによる数式表示
  • Comment CountとComment Link blocks：コメント数とコメントリンクを分離

Command Palette：

  • WP Adminダッシュボード全体で利用可能に。Ctrl/Cmd + Kで任意の管理画面から検索/コマンドバーを開き、アクションを実行またはコンテンツにジャンプ可能
  • 開発者はExtensible Commandsでカスタムコマンドを登録可能

出展：WordPress 6.9: What’s New for Site Owners and Bloggers

#Chrome 143リリース

日付：2025年12月2日

Chrome 143がリリースされた。主な新機能として、CSS anchored fallback container queries、background-position-x/yの辺相対構文、font-language-override CSS propertyが追加された。

出展：Chrome 143 の新機能

#CSS anchored fallback container queries

@container anchored(fallback)を導入。position-try-fallbacksのどれが適用されているかに基づいて、アンカー位置指定要素の子孫のスタイルを設定可能。アンカーとアンカー要素の相対的な位置関係に基づいて、アンカー要素のテザーやアニメーションのスタイルを設定できる。

.anchor {
  anchor-name: --my-anchor;
}


.infobox {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top left;


  position-try:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;


  position-try-fallbacks:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;
}


@container anchored(fallback) {
  .infobox {
    opacity: 0.8;
    border: 2px dashed #ff6b6b;
  }
}
アンカー要素
ツールチップ

#Side-relative syntax for background-position-x/y longhands

background-position-xとbackground-position-yで、背景画像を端の1つに対して相対的に配置可能。従来のキーワード（left、right、top、bottom）に加えて、端からの距離を指定できる。

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: right 30px;
  background-position-y: bottom 20px;
}

#font-language-override CSS property

OpenTypeグリフ置換に使用されるシステム言語をオーバーライド可能。CSSでOpenType language systemにある言語タグを指定して、言語固有のグリフバリアントを制御できる。多言語コンテンツや言語固有のグリフバリアントを含むフォントに特に有用。HTMLのlang属性で指定された言語の字形を使用する代わりに、指定した言語の字形を強制的に使用する。

.english-text {
  font-language-override: "ENG"; /* 英語の字形 */
}


.turkish-text {
  font-language-override: "TRK"; /* トルコ語の字形 */
}


.japanese-text {
  font-language-override: "JAN"; /* 日本語の字形 */
}

English text with font-language-override: "ENG"

日本語テキスト（font-language-override: "JAN"）

#Gamepad ongamepadconnected/ongamepaddisconnected イベントハンドラー属性

ongamepadconnectedとongamepaddisconnectedイベントハンドラー属性が追加された。

  • window.ongamepadconnected
  • document.body.ongamepadconnected
  • window.ongamepaddisconnected
  • document.body.ongamepaddisconnected

#DataTransfer プロパティが insertFromPaste、insertFromDrop、insertReplacementText 入力イベントで利用可能に

inputTypeがinsertFromPaste、insertFromDrop、insertReplacementTextのinputイベントで、dataTransferプロパティが設定されるようになった。contenteditable要素での編集操作中に、クリップボードやドラッグ&ドロップデータにアクセスできる。

dataTransferオブジェクトには、beforeinputイベント中に利用可能だったのと同じデータが含まれる。この機能はcontenteditable要素にのみ適用され、フォームコントロール（textarea、input）では従来通りdataプロパティに挿入されたテキストが含まれ、dataTransferはnullのまま。

const editor = document.querySelector('[contenteditable]');


editor.addEventListener('input', (e) => {
  if (e.inputType === 'insertFromPaste' && e.dataTransfer) {
    const text = e.dataTransfer.getData('text/plain');
    const html = e.dataTransfer.getData('text/html');
    console.log('Pasted text:', text);
    console.log('Pasted HTML:', html);
  }


  if (e.inputType === 'insertFromDrop' && e.dataTransfer) {
    const files = Array.from(e.dataTransfer.files);
    console.log('Dropped files:', files);
  }
});

#AnthropicがBunを買収

日付：2025年12月3日

Anthropicは、JavaScriptランタイム「Bun」を買収したことを発表した。BunチームはAnthropicに参加し、Claude Codeのインフラストラクチャ構築を加速させる。

Bunは今後もオープンソースかつMITライセンスのまま維持され、JavaScript/TypeScript開発者向けのツールとして開発が継続される。買収の背景には、Claude Codeが一般提供開始から6ヶ月で年間経常収益（ARR）10億ドルに到達したこと、そしてBunの高速なパフォーマンスとオールインワンツールキットとしての機能が、AI主導のソフトウェアエンジニアリングにおけるインフラとして高く評価されたことがある。

出展：Anthropic acquires Bun as Claude Code reaches $1B milestone

#TypeScript 7の進捗報告

日付：2025年12月2日

MicrosoftのTypeScriptチームは、ネイティブコードへの移植を進めている次期バージョン「TypeScript 7.0」（コードネーム “Project Corsa”）の進捗状況を報告した。

エディタサポートとしてVS Code拡張機能のプレビュー版が公開され、オートインポートやリファクタリングなどの主要機能が既に動作する。コンパイラも @typescript/native-preview パッケージとしてnpmで提供が開始され、新しい tsgo コマンドは従来の tsc と比較してフルビルドで約10倍の高速化（vscodeリポジトリでの計測）を実現している。

既存のTypeScript 6.0との型チェック結果の差異はごく僅かで、実用レベルに達している。ロードマップとして、TypeScript 6.0が現行のJavaScriptコードベース（Strada）における最後のリリースとなり、今後は7.0への移行に全面的に注力する方針が示された。

出展：Progress on TypeScript 7 – December 2025

#AWS DatabasesがVercel Marketplaceに追加

日付：2025年12月1日

VercelとAWSのパートナーシップが拡大し、12月15日からAurora PostgreSQL、Amazon DynamoDB、Aurora DSQLがVercel Marketplaceでネイティブ統合として利用可能になる。

Vercelダッシュボードから直接データベースをプロビジョニングし、接続できる。認証情報と環境変数はVercelが自動管理するため、手動での設定は不要。v0でもこれらの統合を完全サポートし、アプリの説明に基づいて適切なAWSデータベースを自動プロビジョニングする。

主な機能：

  • ワンクリックプロビジョニング：MarketplaceからAurora PostgreSQL、Amazon DynamoDB、Aurora DSQLを選択し、リージョンとプランを選択してVercelダッシュボードから直接データベースを作成可能。新規AWS顧客は無料スタータープランと$100のクレジットを利用可能
  • 設定の簡素化：Vercelが環境変数と接続情報を自動管理。手動でのシークレットやセットアップは不要
  • 本番環境対応：各データベースはAWSインフラ上で実行され、AWSの信頼性、スケーラビリティ、セキュリティを提供

高度な設定が必要な場合は、ワンクリックでAWSコンソールを開ける。

出展：AWS Databases coming to the Vercel Marketplace

#React2Shellセキュリティ脆弱性

日付：2025年12月4日

React Server Componentsの重大な脆弱性「React2Shell」（CVE-2025-55182）が公開された。CVSSスコアは10.0（Critical）。Next.jsではCVE-2025-66478として識別される。特定の条件下で、細工されたリクエストによりリモートコード実行が可能になる。

Vercelは、CVE発表前にReactチームと協力してWAF（Web Application Firewall）ルールを設計し、既知のエクスプロイトパターンをブロックする保護を全Vercelユーザーに提供。新しいエクスプロイトバリアントの監視を継続し、WAFルールを反復的に更新している。

しかし、WAFルールで全ての攻撃バリアントに対する保護を保証できないため、Vercelでホスティングしている場合であっても、パッチバージョンへのアップグレードが唯一の完全な修正方法である。

影響を受けるバージョン：

  • react-server-dom-webpack, react-server-dom-parcel, react-server-dom-turbopackの19.0, 19.1.0, 19.1.1, 19.2.0

影響を受けるNext.jsバージョン：

  • Next.js 15.0.0 through 16.0.6
  • Next.js 14 canary versions（14.3.0-canary.76以降）

出展：React2Shell Security Bulletin、Critical Security Vulnerability in React Server Components

Edit on GitHub