Cybozu Frontend Monthly #59

イベント概要

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

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

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

開催日

2025年06月24日

イベントページ

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

配信URL

https://www.youtube.com/watch?v=IMucC5-N_so

メンバー

---

コンテンツ

👀 Notable Articles

WWDC25 で Safari 26 beta が発表

• 共有者: @k1tikurisu

Apple の開発者向けカンファレンス「WWDC25」で、Safari 26 beta が発表されました。

新機能を個人的にピックアップします。

• visionOS
  • HTML <model> elementをサポート
    • 3D モデルフォーマットの *.usdz と *.glb を表示できる
  • 空間ビデオや Apple Immersive Video など、没入型のメディアをサポート
• CSS
  • Anchor Positioning
  • Scroll-driven Animations
  • text-wrap: pretty
• その他
  • WebGPU が macOS、 iOS、 iPadOS、 visionOS で正式にサポート
    • Three.js、Unity などの主要なライブラリでも問題なく動作する
  • iOS/iPadOS で、ホーム画面に追加したすべてのサイトがデフォルトで Web アプリとして開くように
  • アイコンに SVG フォーマットが利用可能に
  • Digital Credentials API のサポート

Storybook v9 がリリース

• 共有者: @nus3

Storybook の v9 では、コンポーネントを対象にしたテスト機能のアップデートや、内部の依存関係の整理、UI からの Story の生成などが含まれています。

Storybook v8 では Vitest の browser mode を使って Interaction Test を実行するアドオンとして@storybook/experimental-addon-testを使って実験的に試すことができましたが、v9 ではこれが正式にサポートされ、アドオン名も@storybook/addon-vitestになりました。

個人的には.testの RFCが v9 に入るかどうか期待してたのですが、今回のリリースには含まれませんでしたね。ただ、RFC のディスカッションを見るとプロトタイプの実装に取り組んでいたり、story の型安全性の取り組みは引き続き、v9.x で取り組むそうなので、それに合わせて、.testが使えるようになるかもしれません。

React Router の RSC プレビュー公開と、Remix v3

• 共有者: @mugi_uno

React Router の RSC サポートのプレビュー版が公開されました。

• React Router RSC Preview

以下のリポジトリをクローンすることで実際に試すことができます。 https://github.com/jacob-ebey/experimental-parcel-react-router-starter

データフェッチなどに利用されていた loader() からコンポーネントのレンダリング結果を返せるようになります。

また、Server Component Roots という形で、loader() を用いずに、 コンポーネントを "ServerComponent" という名前で export することによって、 クライアントのバンドルから除外され、直接 RSC からレンダリングされます。 （Next.js App Router において、page.tsx を Server Component とした際と似た感じだと思われます）

現在は Parcel の RSC サポートに依存する形で実装されており、 今後は Vite の RSC サポートに協力しつつ、リリースされた際にはそちらに移行するようです。

一方、同時期に Remix v3 以降の方向性に関してのブログが公開されました。

• Wake up, Remix!

Remix v2 の時点で、React Router v7 の Framework Mode に統合される旨が発表されましたが、Remix 自体の開発も続けられていました。 今回公開されたブログでは、Remix v3 以降では次の思想に基づいての開発をしていくことが紹介されています。

• Model-First Development: ソースコード、ドキュメント、ツールを LLM 向けに最適化し、製品でもモデルを活用
• Build on Web APIs: Web API と JavaScript を基盤とする
• Religiously Runtime: バンドラやコンパイラへの依存無しに設計する（TS や JSX の単純な変換のみは許容とのこと）
• Avoid Dependencies: 依存関係を慎重に選択。最終的にゼロ依存を目指す
• Demand Composition: パッケージによる抽象化は独立した形にする。新機能はパッケージとして公開する
• Distribute Cohesively: パッケージを単一パッケージにまとめたツールボックス(Remix)として配布する

中でも、“Avoid Dependencies” が印象的で、React ですら依存を無くすとのことです。 （実際には Preact の Fork から始めるようです。）

React Router と Remix、まったく違う方向に進んでいて、今後どうなっていくかが楽しみです。

🗓 Monthly Articles

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

📖 Framework, Library

• Introducing Zod 4 beta
  • Zod の v4 beta がリリースされ、内部アーキテクチャが一新され多くの問題が解決、Tree-shaking に最適化された @zod/mini も公開
• Next.js 15.3
  • Next.js 15.3 がリリースされ、Turbopack による Build が追加、experimental で Rspack によるビルドもサポート
• Faster Lazy Loading in React Router v7.5+
  • React Router 7.5 に含まれる route.lazy による遅延ロードの改善についての解説
• React Compiler RC – React
  • React Compiler の Release Candidate がリリースされ、自動的にメモ化を行うビルドタイムツールとして useMemo や useCallback の最適化を自動化
• @wdio/visual-service@7.0.0 Release
  • WebdriverIO の Visual Testing 機能を提供するサービスのメジャーバージョンがリリースされ、モバイルデバイスでのタブ実行サポートなどが追加
• Tiptap Editor 3.0 Beta
  • ProseMirror をベースにしたヘッドレスエディターフレームワークの 3.0 Beta がリリースされ、拡張性の向上や UI コンポーネントの改善を実施
• Storybook 9 is now in beta
  • Storybook 9 Beta がリリースされ、Vitest との連携によるコンポーネントテスト機能強化やバンドルサイズ 48% 軽量化を実現
• React Labs: View Transitions, Activity, and more – React
  • React Labs から実験的な View Transitions と Activity コンポーネントが紹介され、UI 遷移アニメーションと状態保持機能を提供
• feat: add react-server-dom-vite
  • React Server Components を Vite で動作させるための react-server-dom-vite パッケージの追加
• TanStack/db
  • TanStack Query を拡張し、コレクション操作やライブクエリ、楽観的更新を提供する超高速アプリ構築のためのリアクティブクライアントストア
• Intent UI
  • React Aria をベースとした、Tailwind CSS 統合でアクセシブルなコピペ可能な UI コンポーネントライブラリ

⚡️ Services

• web-platform-dx/browserslist-config-baseline
  • ブラウザのバージョン設定を共通化するための Browserslist 向けに、Baseline に対応したコンフィグが公開
• DeepWiki
  • Cognition AI が開発した AI ドキュメント生成ツールで、30,000 以上のリポジトリがインデックス化され開発者のコード理解を効率化
• Google が「google.co.jp」の使用を停止、その他国別トップレベルドメインも「google.com」にすべてリダイレクトする処理へ
  • Google が国別のトップレベルドメインの利用を廃止し、今後は google.com へリダイレクトを開始することを発表
• Claude takes research to new places
  • Claude における新機能である Research や Google Workspace 連携などに関しての公式解説

🖥 Browsers

• microsoft/vscode-css-languageservice での Baseline サポート
  • VSCode のビルトインの CSS Language Service で、Baseline のステータスをホバーカードで確認できる機能が追加
• Brave Software Asia、日本のユーザーに向けた新たな取り組みを開始
  • Brave ブラウザと LINE ヤフーのサービスの連携が強化される旨が発表
• What is a Chrome Finch experiment?
  • Chrome での機能リリース時の動作・コンプライアンス・信頼性検証のために利用されている「Finch」テストについての解説
• Contextual logging with console.context() - Microsoft Edge Blog
  • Microsoft Edge から console.context() メソッドを使ったコンテクスト別ログ出力機能について紹介
• Pull Request #202 - microsoft/vscode-html-languageservice
  • VS Code の HTML で Baseline のステータスを確認できるようにする Language Service 機能追加のプルリクエスト
• Creating a more accessible web with Aria Notify - Microsoft Edge Blog
  • DOM の変更に紐づかない UI の変更をスクリーンリーダーに通知できる Aria Notify の紹介
• Add wide gamut P3 and alpha transparency to your color picker in HTML | WebKit
  • Safari 18.4 でサポートされた <input type="color"> の colorspace と alpha オプションの紹介

💬 Languages

• あらためて理解する ArrayBuffer - JavaScript でバイナリデータを扱う方法
  • JavaScript における ArrayBuffer や TypedArray がなぜ必要なのかや、利用方法、ユースケースなどについて詳細に解説
• JSX Over The Wire — overreacted
  • RSC のような Component を返す API の概念と、歴史的にどのようなアプローチがあったのかについて解説
• Giving V8 a Heads-Up: Faster JavaScript Startup with Explicit Compile Hints
  • Chrome 136 から Ship される Explicit Compile Hints により、コメントで事前コンパイル関数を指定してパフォーマンス改善を実現
• Fit-to-Width Discussions & Feedback — Roma’s Unpolished Posts
  • Blink でプロトタイプが進んでいる「fit-width」の懸念点と議論の現状、Explainer への著者からのフィードバック
• How to have the browser pick a contrasting color in CSS
  • 渡した色に対して黒か白のうちコントラスト比が高くなる色を選択してくれる contrast-color() CSS 関数の紹介
• CSS Function and Mixins Module
  • @function() と @mixin() の標準化に関する First Public Working Draft

🤖 Runtimes

• CheerpJ 4.0: WebAssembly JVM for the browser, now with Java 11 and JNI support
  • ブラウザ向けの WebAssembly ベースの JVM である CheerpJ のバージョン 4.0 がリリースされ、Java8 に加えて Java11 もサポート

📝 Specifications

• Staged Proposals at the WHATWG
  • WHATWG の「Staged Proposals」プロセスで機能が初めて Stage 4 に到達し、moveBefore() DOM API が仕様に正式統合

🦆 Others

• Vitest の実行時間を 8 倍高速化：同一環境での実行によるパフォーマンス改善
  • microCMS における Vitest の実行時間改善事例で、実際に発生していた問題とそれぞれの対処法について解説
• 高速でスケーラブルな E2E 実行基盤を目指して - freee Developers Hub
  • freee 社の E2E テスト実行基盤の刷新で、Ruby + Jenkins から Playwright + GitHub Actions の TypeScript 構成に移行
• Vitest の In-Source Testing が便利
  • Vitest の In-Source Testing 機能について解説し、ソースコードファイル内に直接テストコードを記述する利便性を紹介
• Storybook Play function で AHA testing のすゝめ
  • LayerX での Storybook Play function と AHA testing を組み合わせたフロントエンドテスト手法の紹介
• Rspack に移行したらフロントエンドのビルドがめっちゃ速くなりました
  • Sansan の Eight チームが webpack から Rspack に移行して大幅なビルド時間短縮を実現した事例
• Building Accessible CSS Carousels
  • CSS Overflow Module 5 で定義された擬似要素を利用した CSS のみのカルーセル UI のアクセシビリティに関する考察
• Emotion から CSS Modules に移行しました | PR TIMES 開発者ブログ
  • PR TIMES で Emotion を CSS Modules に移行した背景や移行方法、Tailwind との比較や注意点の紹介
• 開発を止めない段階的フロントエンドリプレイスの実践
  • レガシーなフレームワーク・ライブラリから React への移行記事で、移行戦略から具体的実装、組織体制まで 3 記事に渡って解説
• Video with alpha transparency on the web
  • Airbnb が開発した透明度付き動画をサポートする新しいメディアフォーマット「Lava」の解説
• ESLint v9.26.0 released
  • ESLint v9.26.0 がリリースされ、MCP サーバーのサポートが追加され AI と静的解析による開発支援が期待される
• The cost-effective promise of Model Context Protocol (MCP)
  • Kent C. Dodds 氏による、MCP におけるコスト面での優位性についての解説
• MS の大規模レイオフで rbuckton 氏が退職
  • Microsoft の rbuckton 氏（typescript-go の committer、TC39 の Explicit Resource Management champion）が退職

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

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