Cybozu Frontend Monthly #55

イベント概要

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

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

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

開催日

2025年02月25日

イベントページ

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

配信URL

https://www.youtube.com/watch?v=VLgKNkUXJyk

メンバー

---

コンテンツ

👀 Notable Articles

Sunsetting Create React App

• 共有者: @b4h0_c4t

React Blog から新規アプリ向けの Create React App(CRA) の廃止及び既存アプリの別フレームワーク移行が促されました。

2016 年に CRA がリリースされた経緯や現代の開発にフィットしない理由、移行先について等の情報がまとめられています。

CRA を利用することによる制限事項の説明では主に

• ルーティング
• データフェッチ
• コードスプリット(バンドル)

について具体的な焦点を当て、現代の Web 開発に必要な機能を CRA では提供していないとしました。

また、今後の Web 開発では React 単体での利用よりもさまざまなツールを統合した(メタ)フレームワークの利用を推奨すると呼びかけています。

Interop 2025: another year of web platform improvements

• 共有者: @nus3_

ブラウザ間の相互運用性を高めるための取り組みである Interop プロジェクトの 2025 年に注力する分野が公開されました。

具体的には次の項目が挙げられています。

• Anchor positioning
• backdrop-filter
• Core Web Vitals
• <details> element
• Layout
• Modules
• Navigation API
• Pointer and mouse events
• Remove mutation events
• @scope
• scrollend event
• Storage Access API
• text-decoration
• URLPattern
• View Transition API
• WebAssembly
• Web compat
• WebRTC
• Writing modes

個人的に気になったのは Core Web Vitals が重点分野に挙げられていたことです。Interop 2025 では、LargestContentfulPaint API と Event Timing API をブラウザ間で実装することで、主要ブラウザ全てで計測できなかった Core Web Vitals の指標である LCP と INP を計測可能にすることが目標として掲げられています。

令和 7 年版 あなたが使ってよいフロントエンド機能とは

• 共有者: @mugi_uno

手前味噌で大変恐縮ですが、自分が 北陸三県.rb Lightning Talks in Kanazawaというイベントで発表した際の資料です。

なお、Baseline 自体については弊社の sakito が最近次のような記事を書きました。併せて見ておくと基本的な部分を確認できてよいかと思います。

🔗 Web 技術の互換性を把握するための Baseline と Web Platform Status Dashboard

次のような点がポイントになります。

• Widely Available は 全ブラウザに揃ってから 30 ヶ月経過している機能である
• Baseline の対象機能は web-platform-dx/web-features がマスターである
• Web Platform Status で機能の状況を一覧で確認できる
• Baseline のステータスは将来増える可能性がある

特に最後の点、ステータスが増える可能性については興味深く、仮に「高品質の Polyfill がある」といったステータスが増えたとすれば、機能の利用可否の新しい観点としても利用できるかもしれません。

State of React 2024

• 共有者: @k1tikurisu

毎年 React とその周辺ライブラリについて行われている統計「State of React」の 2024 年版の結果が公開されました。この調査では設問を大きく次の４セクションに分けて用意しています。

• Features : React 自体の機能について、認知度や使用感を調査している
• Libraries : React と深く関連する UI ライブラリや状態管理ライブラリなどについて、利用状況や所感を調査している
• OtherTools : Test ツールや認証、バリデーションライブラリなど関連するライブラリについて、利用状況や所感を調査している
• Usage : 使用環境や事業別など様々な角度から React の利用状況について調査している。

Features では、useStateのような一般的な API から、useDeferredValueのようなニッチな API まで 28 の異なる機能について調査を行なっています。調査結果によると、useStateが最も使用率が高く、Taint API が最も使用率が低かったことが分かりました。

Libraries では、TanStack Query と Zustand が、好感度において Next.js を追い抜いたことが報告されています。

OtherTools では、Jest と Testing Library が引き続きリードを保っていることが示されています。

Usage では、静的サイトでの利用が依然として 2 位を維持していることが興味深い結果として挙げられています。

🗓 Monthly Articles

📖 Framework, Library

• Upgrading: Single-Page Apps | Next.js
  • Next.js の公式ドキュメントに、SPA の構築の項目が追加されました。
• Vite が Rolldown ベースになることで更なる高速化が見込まれる
  • v1.0 beta になっている Rolldown が Vite に入ることでビルド速度が改善しそうという解説動画です。
• WebDriverIO v9.5.0 のリリース
  • WebDriverIO v9.5.0 がリリースされました。Web と Android、iOS に対応した swipe、tap コマンドが追加されました。
• Testing | react-spectrum.adobe.com
  • React Aria に @react-aria/test-utils というパッケージが追加されました。
• Vitest 3.0 is out! | Vitest
  • Vitest の v3.0 がリリースされました。コンソール出力の改善や複数ブラウザでテストするための仕組みの導入などが含まれます。
• no-misused-spread | typescript-eslint
  • typescript-eslint v8.20 で追加された no-misused-spread ルールについての解説ページです。
• Revealed: React’s experimental animations API
  • React の <ViewTransition> コンポーネントで宣言的にページ遷移アニメーションを追加する
  • View Transition API を React で使用する手段として、unstable_ViewTransition が実験的に利用できるようになりました。
• 2024 year in review | Astro
  • Astro の 2024 年のまとめと 2025 年の展望が書かれた記事です。
• Open Props UI
  • Open Props をベースとした、shadcn/ui のようなコピペで使えるコンポーネント集である Open Props UI が公開されました。
• Hono | feat(standard-validator): Add standard schema validation
  • Standard Schema に沿ったスキーマ検証を行う Hono 向けのミドルウェア @hono/standard-validator の実装が進んでいるとのこと。
• @lazarv/react-server
  • React Server Components を Vite ベースで統合したフレームワークである react-server が公開されました。
• Storybook 8.5
  • Storybook 8.5 がリリースされました。テストのコードカバレッジ計測や、テスト実行の GUI の改善などが含まれます。
• Storybook v9 に向けた RFC
  • Storybook v9 に向けて、Typesafe CSF factories および Add the .test method to CSF factories の RFC が提案されました。
• React で Modal や Confirm の実装を簡単にする react-call というライブラリがアツい！！！
  • window.confirm のように手続き的にコンポーネントを扱える react-call
• Roadmap 2025 and Biome 2.0
  • Biome の 2024 年の振り返りと、2025 年のロードマップが公開されました。

🖥 Browsers

• The success of Interop 2024!
  • Interop 2024 の成果レポートです。2024 年は 95%と、過去最高の達成率を記録したと述べられています。
• The Browser Company teases Dia, its new AI browser | TechCrunch
  • Arc ブラウザを開発している The Browser Company が、 Dia という新しいブラウザを 2025 年初頭に公開予定です。
• Chrome 133 beta
  • CSS の変更が多く、attr()・:open・Scroll State Container Queries などが含まれます。

📝 Specifications

• Temporal - JavaScript | MDN
  • MDN にて、新たに Temporal のドキュメントが追加されました。凄まじい量です。

🦆 Others

• Oracle has informed us they won’t voluntarily withdraw their trademark on “JavaScript”
  • Oracle は Deno が署名活動を行い “JavaScript” の商標を取り下げを申請していた件に関して、JavaScript の商標を手放すつもりはないと通告しました。
• Cursor Directory
  • Cursor エディタで使える、.cursorrules のまとめサイトです。
• Storybook と Playwright ではじめるインタラクションテスト
  • テストの分類整理の過程と、Playwright と Storybook を用いたテストの内容について解説されています。
• 令和 7 年版 あなたが使ってよいフロントエンド機能とは
  • ブラウザごとの機能サポートの従来の考え方と、それに対しての一つの解決策である Baseline について解説している発表資料です。

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

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