Cybozu Frontend Monthly #60

イベント概要

サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエンジニアのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

開催日

2025年07月29日

イベントページ

https://cybozu.connpass.com/event/360470/

メンバー

---

コンテンツ

👀 Notable Articles

Temporal 実装の近況(+ Date の Parse 挙動クイズ)

• 共有者: Saji

Temporal の実装は Firefox(SpiderMonkey)/Deno が先んじいてる状態ですが、そのほかのブラウザでも実装が着々と進んでいます。

https://ptomato.name/talks/tc39-2025-05/

特に、Chrome の利用する V8 では、既存の実装を見直し、 temporal_rs という Rust 製ライブラリを利用した実装が進められています。この temporal_rs は、Rust 製の実験的な JS エンジン Boa JS が作成しているライブラリで、Boa のメンバーや V8 の実装者などが関わっています。

• temporal_rs
• Implementing Temporal, the new date/time API for JavaScript (and Rust!)

日時は非常に複雑なドメインであり Temporal も例外なく非常に大きな仕様なので、このような共通実装がどう育っていくのか楽しみです。

また、少し Temporal の近況と逸れますが、Date の Parse 挙動についてクイズ形式で知れるページが公開されたので、そちらも紹介します。

• new Date("wtf")

既存の Date の Parse の処理は非常にヒューリスティックで統一的でない挙動が混在していることが解いてみると実感できるでしょう。そして Temporal が提案された時の背景の一つとして「Date の Parse 挙動がわかりにくい」点があることも強く同感できるはずです。

Next.js 15.4

• 共有者: @mugi_uno

Next.js 15.4 がリリースされました。

Turbopack の互換性向上や、全体的なパフォーマンスの向上がメインの変更として挙げられています。

また、今回のリリースノートでは、Next.js 16 についての言及が含まれており、

we are looking to lay the groundwork for our users to try it out in Next.js 16 this summer.

と記載があるため、今年の夏中の Next.js 16 のリリースに向けて準備が進められているようです。

予定されている機能については次のようなものが紹介されています。

• Cache Components
  • 従来 dynamicIO と呼ばれていたものが、use cache や PPR を統合して Cache Components と呼ぶようです。
• Turbopack Builds
  • 開発時以外での Turbopack でのビルド
• Optimized Client-Side Routing
  • Router Cache の見直しを含む、クライアント側ルーティングの改善
• DevTools & Debugging
  • 組み込みの DevTools での表示情報の追加や、ブラウザ上でのログをターミナルに転送など
• Node.js Middleware (stable)
  • Middleware は基本的に Node.js では実験的なサポート状態でしたが、それを安定版に
• Deployment Adapters (alpha)
  • ビルドやデプロイ先を細かく制御可能に
  • Netlify、Cloudflare、Amplify、OpenNext などと立ち上げた WG によって設計が進められているとのこと
  • https://github.com/vercel/next.js/discussions/77740

特に、以前から名前だけは広まっていた PPR を含む Cache Components が楽しみです。

tsgolint

• 共有者: @nissy-dev

TypeScript ESLint チームで、typescript-go を利用した型情報を利用したリントルールの開発が PoC として行われていたようです。 typescript-eslint に実装されている 40 の型情報が必要なルールが実装されており、パフォーマンスも 20 - 40 倍程度になったようです。

tsgolint is 20-40 times faster than ESLint + typescript-eslint. パフォーマンスが改善した理由としては、以下の点があげられていました。

• typescript-go を利用することによるパースや型推論の高速化
• TypeScript AST を ESTree の形式に変換する機構の廃止
• tsgolint 内での CPU を最大限活用した並列化

リポジトリ：https://github.com/typescript-eslint/tsgolint

README にある通り、TypeScript ESLint チームはこの実装を production ready にしていくつもりはないようなのですが、この実装を oxc チームが fork しました。oxc チームでは、この実装を oxlint 内で呼び出すことで今まで実現できていなかった型情報を利用したリントルールのサポートを実現していくようです。

リポジトリ：https://github.com/oxc-project/tsgolint
ドラフト実装：https://github.com/oxc-project/oxc/pull/12343

このドラフト実装を VSCode のリポジトリで試してみたところ、4000 以上あるファイルの解析が 3.2 秒で終わったようです。

no-floating-promises completes 4.4k files in 3.2 seconds, in the vscode repo. https://x.com/boshen_c/status/1946422425442509260

oxlint より先に型情報を利用したリントルールを実装し始めた Biome では、独自で型推論のエンジンを作るような方針を取っているので、oxlint とは大きくアプローチが異なることになりそうです。ちなみに、Biome はこの対応で Vercel からサポートを受けていましたが、そのサポートは今月で終わったようです。

型情報を利用したリントルール周りの動向は、まだまだ変化がありそうなので今後も注目して行きたいです。

Faster Type-Aware Lint Rules: Biome vs. Oxlint
https://www.solberg.is/fast-type-aware-linting

🗓 Monthly Articles

※AI によって整理・要約されています。

📖 Framework, Library

• Vite 7.0 is out!
  • Vite 7.0 がリリース。Node.js 20.19+/22.12+が必要となり、デフォルトブラウザターゲットが”baseline-widely-available”に変更された
• NuxtLabs is joining Vercel
  • NuxtLabs が Vercel に買収されることを発表。Nuxt と Nitro は独立したオープンソースプロジェクトとして継続される
• RedwoodSDK - The React Framework for Cloudflare
  • RedwoodJS の新たな進化形である RedwoodSDK を発表。Cloudflare に特化した React フレームワークでエッジネイティブなアーキテクチャをサポート
• What’s new in Tiptap V3
  • Tiptap V3 の大幅アップデート。UMD ビルドの削除、floating-ui への移行、新しい@tiptap/extensions パッケージなどの変更を含む
• 企業ページにおける Recoil からの段階的移行
  • PR TIMES がアーカイブされた Recoil からの移行戦略を紹介。React 19 非対応が移行の動機となり、TanStack Query と Jotai へ移行
• Formisch - Schema-based Form Library
  • 新しいオープンソースの JavaScript フォームライブラリ「Formisch」を発表。スキーマベース、タイプセーフ、小さなバンドルサイズが特徴

⚡️ Services

• Claude Code: Your AI Pair Programming Assistant
  • Claude 4 Sonnet と Opus モデルを搭載した AI ペアプログラミングツール。コンテキスト認識型のコード解析とリアルタイムコード編集を提供
• OpenAI、ウェブブラウザ開発中　 Chrome 対抗か
  • OpenAI が AI 機能を統合した新しいウェブブラウザを開発中。ユーザーがより効率的にタスクを完了できるよう AI アシスタンスを提供
• アップル、アップストア改善案を EU に提示へ－新たな制裁金回避狙う
  • Apple が EU のデジタル市場法違反に対応し、App Store の改善案を提示。開発者が代替の購入オプションへユーザーを誘導しやすくする変更を含む
• グーグル、他社サイトの優先表示案を提示へ－EU の制裁金回避で
  • Google が EU のデジタル市場法に対応し、検索結果に競合他社のショッピングや旅行サイト情報をランク付けして表示する新方式を提案

🖥 Browsers

• CSS conditionals with the new if() function
  • CSS の新しい if()関数を紹介。メディアクエリ、スタイルクエリ、サポートクエリなどの条件をインラインで記述可能になる
• Still X.S.S. - なぜ XSS はまだ発生するのか
  • XSS 脆弱性が現代のフレームワークやセキュリティ機構があるにも関わらず、なぜ依然として重大な問題であり続けるのかを詳細に解説
• 消費者欺く「ダークパターン」撲滅へ “誠実な Web サイト”認定制度
  • ダークパターン対策協会が NDD 認定制度を開始。操作的なデザイン技術を使用しない Web サイトを認定し、消費者保護を推進

💬 Languages

• Announcing TypeScript 5.9 Beta
  • TypeScript 5.9 ベータ版リリース。簡素化された tsc —init、新しい import defer 構文、—module node20 サポートなどが含まれる
• 技術の拡張：進化した Promise オブジェクト [JS Modern Features no.2]
  • JavaScript の Promise オブジェクトの進化について解説。Promise.allSettled()、Promise.any()、Promise.withResolvers()などの新しいメソッドを紹介
• モダンなフロントエンドにおけるテストについて
  • モダンなフロントエンドテストのアプローチを解説。Jest、Vitest、Storybook、Playwright などのツールを使用したテスト手法を紹介
• new Date("wtf")
  • JavaScript の Date における奇妙な Parse 動作を探求するインタラクティブなクイズ。20 の選択式問題を通じて日付解析の直感に反する側面を教育的に紹介
• Oracle JavaScript 商標問題
  • Oracle の JavaScript 商標に関する法的な議論が 2025 年も継続中。Deno Land が USPTO に商標無効化を申請

🤖 Runtimes

• Proposal - Shift Node.js to Annual Major Releases
  • Node.js リリースワーキンググループが年次メジャーリリースへの移行を提案。LTS サポート期間を 30 ヶ月から 24 ヶ月に短縮する計画

📝 Specifications

• First Public Working Draft: CSS Positioned Layout Module Level 4
  • CSS Positioned Layout Module Level 4 の最初の公開作業草案。相対配置、スティッキー配置、絶対配置、固定配置などの座標ベースの配置スキームを定義
• Influence the State of HTML 2025 Survey!
  • State of HTML 2025 調査への意見募集。過去の調査がブラウザベンダーの開発優先順位に影響を与えた実績を基に、開発者が期待する HTML 機能について意見を求める

🦆 Others

• feat: CSS variable tracking (ESLint RFC #136)
  • ESLint の RFC で、単一ファイル内で CSS カスタムプロパティを追跡する機能を提案。変数の定義場所と使用場所を特定する機能を追加
• @textlint-ja/textlint-rule-preset-ai-writing
  • AI 生成テキストに見られる日本語の文章パターンを検出する textlint プリセット。より自然な表現にすることを目的とする
• Better Test Setup with Disposable Objects
  • TypeScript 5.2+の新しい using キーワードを使用したディスポーザブルオブジェクトによるテストセットアップの改善方法を紹介
• vitest では beforeEach を使わない
  • Vitest で beforeEach の代わりに test.extend 機能を使用することを提案。より柔軟でタイプセーフなテストセットアップが可能に

フロントエンドエキスパートチームについて

https://speakerdeck.com/cybozuinsideout/frontendexpert-team