Chrome 138リリース、AI API搭載とCSS新機能を提供

日付：2025年6月24日

Chrome 138が正式リリース。組み込みAI API、新しいCSS関数、フォルダブルデバイス対応機能などが追加。

出展：

• New in Chrome 138
• Chrome 138 Release Notes

組み込みAI、Translator API、Language Detector API、Summarizer API

Translator API、Language Detector API、Summarizer APIが提供開始。これらのAPIはGemini Nanoを活用し、ローカルでAI処理を実行できるため、プライバシーを保護しながら高速な処理が可能。

Translator API

ユーザーの母国語でのコンテンツ投稿を可能にする翻訳機能。サポートチャットなどで、ユーザーの投稿をサポート担当者の言語に翻訳してからデバイスを離れるようにすることで、スムーズで包括的なエクスペリエンスを提供できる。

// 翻訳機能の利用可能性を確認
const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'ja',
  targetLanguage: 'en',
});

if (translatorCapabilities === 'available') {
  // 翻訳ツールを作成
  const translator = await Translator.create({
    sourceLanguage: 'ja',
    targetLanguage: 'en',
  });

  // テキストを翻訳
  const result = await translator.translate('次のバス停はどこですか？');
  console.log(result); // "Where is the next bus stop?"
}

参考：Translator API

Language Detector API

デバイス上で言語検出を実行し、クラウドサーバーへのアップロードが不要なためプライバシーを保護。Translator APIと組み合わせて使用することで、自動的に適切な翻訳を提供できる。

// 言語検出機能の利用可能性を確認
const detectorCapabilities = await LanguageDetector.availability();

if (detectorCapabilities === 'available') {
  // 言語検出ツールを作成
  const detector = await LanguageDetector.create();

  // テキストの言語を検出
  const results = await detector.detect('Bonjour tout le monde');
  console.log(results[0].detectedLanguage); // "fr"
  console.log(results[0].confidence); // 0.99
}

参考：Language Detector API、

Summarizer API

記事要約、タイトル提案、長文の簡潔な要約生成などに活用。文章、段落、箇条書きなど様々な長さと形式での要約が可能。

// 要約機能の利用可能性を確認
const summarizerCapabilities = await Summarizer.availability();

if (summarizerCapabilities === 'available') {
  // 要約ツールを作成
  const summarizer = await Summarizer.create({
    type: 'tl;dr',
    format: 'plain-text',
    length: 'short'
  });

  // 長文を要約
  const article = 'Chrome 138が正式リリースされ、多くの新機能が追加されました...';
  const summary = await summarizer.summarize(article);
  console.log(summary); // "Chrome 138が正式リリースされ、AI API、CSS関数、フォルダブルデバイス対応が追加。"
}

参考：Summarizer API

CSS関数abs()、sign()、progress()、sibling-index()、sibling-count()など

符号関連のabs()とsign()関数、進行状況を表すprogress()関数、兄弟要素の位置と数を取得するsibling-index()とsibling-count()関数が追加。また、要素がコンテナブロックの利用可能スペースを正確に埋めるstretchキーワードがサイズ指定プロパティで利用可能になった。

Viewport Segments API

フォルダブルデバイス（折り畳み可能な端末）対応として、Viewport Segments APIが提供開始。JavaScriptまたはCSSでビューポートの論理的に分離された領域の位置とサイズにアクセスできる。

ビューポートセグメントは、ビューポートが1つ以上のハードウェア機能（折り目や個別のディスプレイ間のヒンジ）によって分割された際に作成される。これにより、デュアルペインのユーザーエクスペリエンス作成や、折り目を超えたコンテンツレイアウトの回避が可能になる。

参考：Viewport Segments API で折りたたみ式デバイスをサポートする

HTML属性値内の<と>のエスケープ

HTML仕様の変更により、属性値内の<と>がシリアライゼーション時に自動的にエスケープされるようになった。この変更はmutation XSS（mXSS）脆弱性を防ぐためのセキュリティ向上が目的。

<!-- 従来の動作 -->
<div data-content="<u>hello</u>"></div>

<!-- Chrome 138以降 -->
<div data-content="&lt;u&gt;hello&lt;/u&gt;"></div>

変更はinnerHTMLやouterHTMLプロパティのアクセス時、getHTML()メソッドの呼び出し時など、DOMを文字列表現に変換するシリアライゼーション処理にのみ影響する。HTMLの解析（パース）処理は変更されず、getAttribute()やdatasetなどのDOM APIで取得する属性値も従来通り。

const div = document.querySelector('div[data-content="<u>hello</u>"]');

// これらのAPIは従来通りデコードされた値を返す
console.log(div.getAttribute('data-content')); // "<u>hello</u>"
console.log(div.dataset.content); // "<u>hello</u>"

// シリアライゼーション時はエスケープされる
console.log(div.outerHTML); // '<div data-content="&lt;u&gt;hello&lt;/u&gt;"></div>'

参考：HTML spec change: escaping < and > in attributes

Vite 7.0リリース、Node.js 18ドロップとブラウザターゲット変更

日付：2025年6月24日

Vite 7.0が正式リリース。Node.js 18のEOL（2025年4月末）に伴い、Node.js 20.19+、22.12+が必要になった。新しいバージョン範囲ではrequire(esm)がフラグなしでサポートされるため、Vite 7.0をESM-onlyで配布しながら、CJSモジュールからVite JavaScript APIを使用することが可能。

デフォルトブラウザターゲットが'modules'から'baseline-widely-available'に変更され、Chrome 87→107、Edge 88→107、Firefox 78→104、Safari 14.0→16.0となった。Baseline Widely Availableは、ブラウザ間で30か月以上利用可能な確立された機能を示し、将来のリリースでのデフォルトブラウザターゲットに予測可能性を追加する。

VoidZeroチームが開発するRust製バンドラーRolldownとの統合が進行中で、rolldown-viteパッケージを使用することで特に大規模プロジェクトでのビルド時間短縮が期待できる。

実験的なEnvironment APIに新しいbuildAppフックが追加され、プラグインが環境の構築を調整できるようになった。CloudflareチームはCloudflare Vite plugin 1.0をリリースし、React Router v7の公式サポートを発表するなど、Environment APIの可能性を示している。

出展：Vite 7.0 is out!

Prettier 3.6リリース、実験的高速CLIとOXC・Hermesプラグイン提供

日付：2025年6月23日

Prettier 3.6が正式リリース。実験的な高速CLI、OXCとHermesベースの新しい公式プラグインが追加。

--experimental-cliフラグまたはPRETTIER_EXPERIMENTAL_CLI=1環境変数で高速CLIを利用可能。新しい公式プラグイン@prettier/plugin-oxc（Rust製OXCパーサー）と@prettier/plugin-hermes（Hermes JS Engine）が提供開始。Hermesプラグインは将来のv4でFlowのデフォルトパーサーになる予定で、babel-flowパーサーは削除される。

その他、SequenceExpressionやAssignmentExpressionの括弧追加、@noformat・@noprettierプラグマによるファイル除外機能、プラグインによる組み込みパーサーのオーバーライド機能などが追加。

出展：Prettier 3.6: Experimental fast CLI and new OXC and Hermes plugins!

Playwright v1.53.0リリース、Trace ViewerとHTMLレポーター機能強化

日付：2025年6月10日

Playwright v1.53.0が正式リリース。Trace ViewerとHTMLレポーターに新しいSteps表示機能、カスタムタイトル設定、ロケーター記述機能などが追加。

新しいSteps表示機能によりTrace ViewerとHTMLレポーターでのテスト実行過程の可視化が改善。HTMLレポーターではtitleオプションによりテスト実行のカスタムタイトル設定が可能になった。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['html', { title: 'Custom test run #1028' }]]
});

locator.describe()メソッドでロケーターに説明を追加でき、トレースビューアーとレポートでの可読性が向上。

const button = page.getByTestId('btn-sub').describe('Subscribe button');
await button.click();

npx playwright install --listでインストール済みブラウザの一覧表示も追加された。ブラウザバージョンはChromium 138.0.7204.4、Mozilla Firefox 139.0、WebKit 18.5に更新。

出展：v1.53.0

ESLint v9.30.0リリース、サブディレクトリへのルール適用

日付：2025年6月27日

ESLint v9.30.0が正式リリース。設定オブジェクトのbasePathプロパティ、TypeScript向けimport重複ルール改善、安定版機能フラグなどが追加。

basePathプロパティにより、設定オブジェクトを特定のサブディレクトリに適用可能になった。filesとignoresパターンはbasePathで指定されたディレクトリを基準に評価され、プロジェクト内の特定ディレクトリをターゲットとした設定が簡単に記述できる。

export default defineConfig([
    {
        basePath: "packages/hello-base-path",
        plugins: { js },
        extends: ["js/recommended"],
        ignores: ["coverage/**", "dist/**"],
    },
]);

no-duplicate-importsルールにallowSeparateTypeImportsオプションが追加され、importとimport typeを別々の使用として扱えるようになった。実験的だったunstable_config_lookup_from_fileフラグはv10_config_lookup_from_fileに安定版として変更され、次のメジャーリリースでデフォルト動作になる予定。

出展：ESLint v9.30.0 released

ECMAScript 2025が正式承認

日付：2025年6月25日

Ecma Internationalの第129回総会でECMAScript 2025言語仕様が正式に承認され、標準となった。編集者はShu-yu Guo、Michael Ficarra、Kevin Gibbonsが担当。

ECMAScript 2025の新機能、Import attributesとJSON modules、Iterator helper methods、Setの集合演算メソッド、RegExp.escape()、正規表現パターン修飾子、Duplicate named capturing groups、Promise.try()、16ビット浮動小数点数サポートなど。

出展：Ecma International approves new standards - Ecma International

Import attributesとJSON modules

JavaScript以外のアーティファクトをインポートするための構文基盤が追加された。最初にサポートされるのはJSONモジュール。静的インポートではwith { type: 'json' }構文を使用し、動的インポートでは第二引数にオプションオブジェクトを渡す。withの後のオブジェクトリテラル構文でインポート属性を指定する。

// 設定ファイルのインポート
import settings from './app-settings.json' with { type: 'json' };

// 動的にJSONを読み込み
const userPrefs = await import('./user-preferences.json', { 
  with: { type: 'json' } 
});

console.log(settings.theme); // "dark"
console.log(userPrefs.default.language); // "ja"

Iterator helper methods

イテレータをより活用できるヘルパーメソッドが追加された。配列メソッドと同名のfilter()、map()、flatMap()、some()、every()、find()、reduce()、forEach()に加え、イテレータ固有のdrop()、take()、toArray()が利用可能。

配列メソッドに対する改善点として、任意のイテラブルデータ構造で使用でき、中間配列を作成せずに段階的に計算する。大量データ処理において、配列メソッドが全値に対して順次メソッドを適用するのに対し、イテレータメソッドは各値に対して全メソッドを適用する。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// イテレータを使った効率的な処理
const result = numbers.values()
  .filter(n => n % 2 === 0)  // 偶数のみ
  .drop(1)                   // 最初の1つをスキップ
  .take(2)                   // 最初の2つを取得
  .map(n => n * 3)           // 3倍にする
  .toArray();                // 配列に変換

console.log(result); // [12, 18]

Setの集合演算メソッド

Set同士の集合演算メソッドが追加された。intersection()（積集合）、union()（和集合）、difference()（差集合）、symmetricDifference()（対称差集合）による演算と、isSubsetOf()（部分集合判定）、isSupersetOf()（上位集合判定）、isDisjointFrom()（素集合判定）による関係チェックが可能。

const frontendSkills = new Set(['HTML', 'CSS', 'JavaScript']);
const backendSkills = new Set(['JavaScript', 'Node.js', 'Python']);

// 共通スキル（積集合）
const commonSkills = frontendSkills.intersection(backendSkills);
console.log(commonSkills); // Set { 'JavaScript' }

// 全スキル（和集合）
const allSkills = frontendSkills.union(backendSkills);
console.log(allSkills); // Set { 'HTML', 'CSS', 'JavaScript', 'Node.js', 'Python' }

// フロントエンド専用スキル（差集合）
const frontendOnly = frontendSkills.difference(backendSkills);
console.log(frontendOnly); // Set { 'HTML', 'CSS' }

RegExp.escape()

正規表現内でテキストを安全に使用するためのエスケープ機能。特殊文字を含むテキストを正規表現パターン内で文字列として扱いたい場合に使用する。引用符で囲まれていないテキストのみを削除するような処理で活用できる。

const userInput = "price: $9.99 (tax included)";
const searchTerm = "$9.99";

// 特殊文字を含む文字列を安全にエスケープ
const escapedTerm = RegExp.escape(searchTerm);
const regex = new RegExp(escapedTerm, 'g');

const isFound = regex.test(userInput);
console.log(isFound); // true

// 置換処理での活用
const highlighted = userInput.replace(
  new RegExp(RegExp.escape(searchTerm), 'g'),
  `<mark>${searchTerm}</mark>`
);
console.log(highlighted); // "price: <mark>$9.99</mark> (tax included)"

正規表現パターン修飾子

正規表現の一部分にのみフラグを適用できるインラインフラグ機能。正規表現全体ではなく、特定の部分にのみ大文字小文字を無視するiフラグなどを適用できる。(?i:pattern)のような構文で使用する。

const text = "Visit our STORE or browse the catalog";

// 特定の単語のみ大文字小文字を無視
const pattern = /visit.*(?i:store).*catalog/;
console.log(pattern.test(text)); // true

// 複数の修飾子を組み合わせ
const emailPattern = /^[a-z]+@(?i:GMAIL|YAHOO)\.com$/;
console.log(emailPattern.test("user@GMAIL.com")); // true
console.log(emailPattern.test("USER@gmail.com")); // false（ユーザー名は小文字のみ）

// 部分的にマルチライン対応
const multiPattern = /start(?m:^middle$)end/;

Duplicate named capturing groups

異なる選択肢内であれば同じグループ名を複数回使用できるようになった。正規表現の異なる分岐で同じ名前のキャプチャグループを定義し、マッチした分岐のグループ結果を取得できる。

// 日付フォーマットの解析（同じグループ名を異なる選択肢で使用）
const datePattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})|(?<day>\d{2})\/(?<month>\d{2})\/(?<year>\d{4})/v;

const isoDate = "2025-06-27";
const usDate = "27/06/2025";

const isoMatch = datePattern.exec(isoDate);
console.log(isoMatch.groups); // { year: "2025", month: "06", day: "27" }

const usMatch = datePattern.exec(usDate);
console.log(usMatch.groups); // { year: "2025", month: "06", day: "27" }

// どちらの形式でも同じグループ名でアクセス可能
console.log(isoMatch.groups.year); // "2025"
console.log(usMatch.groups.year); // "2025"

Promise.try()

純粋に非同期でないコードでPromiseチェーンを開始できる機能。同期関数が例外を投げる可能性がある場合でも、Promiseチェーン内で統一的にエラーハンドリングできる。

function parseUserData(jsonString) {
  // JSON.parseは同期関数だが例外を投げる可能性がある
  return Promise.try(() => {
    const data = JSON.parse(jsonString);
    return validateUser(data); // 非同期のバリデーション関数
  })
  .then(user => {
    console.log('Valid user:', user);
    return user;
  })
  .catch(error => {
    console.error('Parse or validation error:', error);
    return null;
  });
}

// 使用例
parseUserData('{"name": "Alice", "age": 30}')
  .then(result => console.log(result));

parseUserData('invalid json')
  .then(result => console.log(result)); // null（エラーがキャッチされる）

16ビット浮動小数点数サポート

半精度浮動小数点数の処理機能が追加された。Math.f16round()メソッド、新しい型付き配列Float16Array、DataViewのgetFloat16()とsetFloat16()メソッドが提供される。

// 16ビット浮動小数点数への丸め
const originalValue = 3.141592653589793;
const float16Value = Math.f16round(originalValue);
console.log(float16Value); // 3.140625（16ビット精度に丸められる）

// Float16Arrayの使用
const float16Array = new Float16Array([1.5, 2.7, 3.9]);
console.log(float16Array); // Float16Array(3) [ 1.5, 2.69921875, 3.900390625 ]

// DataViewでの16ビット浮動小数点数操作
const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);

view.setFloat16(0, 42.5);
view.setFloat16(2, -17.25);

console.log(view.getFloat16(0)); // 42.5
console.log(view.getFloat16(2)); // -17.25

// メモリ効率的なグラフィックスデータ処理に有用
const vertices = new Float16Array([0.0, 1.0, 0.5, -0.5, -0.5, -0.5]);

GitHub Actionsのfine-grain権限設定がカスタムリポジトリロールに提供

日付：2025年6月26日

GitHub Actionsのfine-grain権限設定がカスタムリポジトリロールで正式に利用可能になった。

昨年GitHubはCI/CD Admin roleを導入し、組織内の全リポジトリに対する包括的なCI/CD権限を提供していた。今回のリリースにより、組織管理者は特定のGitHub Actions権限を持つカスタムリポジトリロールを作成できるようになる。

設定可能な権限には、Actions全般設定、ランナー管理、シークレット管理、変数管理、環境管理（環境のシークレットと変数を含む）が含まれる。これにより、組織管理者は他の組織オーナー権限を付与することなく、個人やチームにCI/CD自動化管理の責任を委任できる。

カスタムリポジトリロールは2022年6月に正式提供が開始されており、35のfine-grained permissionsを通じて、ディスカッション、Issue、プルリクエスト、リポジトリ、セキュリティアラートをカバーしている。作成されたロールは、リポジトリ管理者がリポジトリ内の任意の個人またはチームに割り当てることができる。

出展：GitHub Actions fine-grain permissions are now generally available for custom repository roles

参考：About custom repository roles - GitHub Enterprise Cloud Docs

Google Offerwall、Ad Managerで正式提供開始

Googleがパブリッシャーとオーディエンスにより多くの選択肢を提供するOfferwallをGoogle Ad Managerで正式に提供開始した。

Offerwallは従来の広告を超えた収益化オプションをパブリッシャーに提供する柔軟なツール。パブリッシャーがOfferwallを選択すると、オーディエンスにコンテンツへのアクセス方法を複数提示できる。短い広告視聴、簡単なアンケート回答、マイクロペイメントによる支払いなどの選択肢があり、パブリッシャーはニュースレター登録などの独自オプションも追加可能。

1,000以上のパブリッシャーでのテスト後に正式提供となり、新機能のOptimizeも導入された。OptimizeはAIを使用して各訪問者にOfferwallを表示するタイミングを決定し、エンゲージメントと収益を向上させる。

Offerwallは全規模のパブリッシャーが利用可能だが、多様な収益ストリームを設定するリソースやインフラを持たない小規模ビジネスに特に有益。これらのオプションにより、オーディエンスがパブリッシャーサイトへのアクセス方法を決定でき、多様なコンテンツが誰でも利用できるよう支援する。

出展：Offerwall gives publishers more options to monetize and audiences more control over how they access content