Cybozu Frontend Monthly #65

イベント概要

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

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

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

開催日

2026年01月27日

イベントページ

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

配信URL

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

メンバー

---

コンテンツ

👀 Notable Articles

Tailwind Labs の解雇について

• 共有者: @mugi_uno

CSS フレームワークである Tailwind CSS のドキュメントページに対して、LLM 向けの llms.txt ファイルを追加する PR が作成されましたが、収益性の観点からクローズされました。

Tailwind CSS 作者である Adam Wathan 氏がこの背景事情についてコメントしており、AI の普及によって Tailwind CSS へのドキュメントへのアクセスが大きく減少しており、 ドキュメントは事業としての有料サービスへの導線であったことから、収益にも影響が出ており、エンジニアの 75% が解雇されていたことが明かされました。

https://github.com/tailwindlabs/tailwindcss.com/pull/2388#issuecomment-3717222957

Tailwind 自体はその性質上 LLM を利用したコーディングとの相性が良いと言われることも多いのですが、 その一方でビジネスモデルとの矛盾を抱えてしまう、という AI 普及によって生まれた歪みを感じました。

※ なおその後、現在では Google AI Studio を含む多くの企業が新たにスポンサーとなっており、 状況としては過去と比較すると下降傾向であるものの、ひとまず安定する形になったようです。

• https://tailwindcss.com/sponsor
• https://x.com/adamwathan/status/2009340684210159812?s=20

Autify 上の E2E テストを Playwright に移行しました

• 共有者: @nus3

自動テストをノーコードで作成できるAutifyから Playwright への移行事例です。

Playwright への移行には Claude Code などを使い、Playwright のコードを自動生成することで工数を大幅に削減できたとのことです。実際に使用したプロンプトも記事内で紹介されています。

Playwright への移行と、E2E テストシナリオの精査によって、Flaky なテストの減少や、実行時間が 3 時間以上から 25 分に短縮されたとのことです。

E2E テストのシナリオや Flaky なテストの増加は、弊社でも同様の課題があって、とても親近感を覚えましたし、この記事のまとめにも記載されていますが、すでに E2E テストを導入している運用中のプロダクトでのテストの役割分担を改めて考えるのは大事だなと感じました。

Date is out, Temporal is in

• 共有者: @sajikix

Chrome の 144 がリリースされたことで、FireFox と Chrome の両方で Temporal API が利用可能になりました。

参考 : Chrome 144 の新機能

Temporal API は今まで問題が多いとされてきた Date による日付操作の問題を解決するために設計された新しい API です。Date ではシステムのタイムゾーンしか使えない問題や Wall-Clock Time と Exact Time をうまく分けて扱えない、パースの挙動がわかりづらい、時差計算の挙動が暗黙的などの問題がありましたが、Temporal ではこれらの問題が解決されています。

特に Date に慣れ親しんだ方は以下の点に注意しながら見ると使い方がわかりやすいかもしれません。

• Exact Time(Temporal.Instant)と Wall-Clock Time(Temporal.PlainDateTime など)、それらを橋渡しする Temporal.ZonedDateTime でそれぞれインターフェース・型のレベルで別れていること
• Temporal.ZonedDateTime や withTimeZone メソッドで UTC ↔︎ ローカルタイムの変換ができる。

またすでにMDN にも記事があるので、そちらも参考になるかと思います。

2026/1 現在、Safari ではまだサポートされていませんが、JSC での実装は進んでいるようで、もしかすると年内には主要 3 ブラウザの最新版でのサポートが完了するかもしれません。それでも Baseline に入るところまではまだまだ先ですが、今後の普及や関連するライブラリの動向なども含めて楽しみです。

🗓 Monthly Articles

📖 Framework, Library

• Turborepo 2.7
  • devtools コマンドが追加され、パッケージやタスクの依存関係が視覚的に確認できるようになった。Composable Configuration や Biome 統合、Yarn 4 Catalogs サポートも追加。
• Claude Code の LSP サポート
  • Claude Code v2.0.74 で LSP サポートが追加され、コードベース全体を文字列として検索する代わりに、シンボル情報やコード構造にアクセスできるようになった。
• Markdown を見た目のままレビューできるツールを作った
  • Markdown をレンダリング結果のまま確認しながらコメントを追加できる CLI ツール「md-review」の紹介。ファイルパスと行番号を含む形式でコピーでき、Claude Code や Cursor に直接貼り付け可能。
• 最速最強の Markdown コンパイラ作るぞ
  • MoonBit 言語を使用した高性能なインクリメンタル Markdown パーサーの紹介。CST データ構造を採用し、変更された箇所だけを再パースする差分コンパイル方式で数十〜数百倍高速化。
• Tailwind Labs の解雇について
  • Tailwind の資金繰りがうまくいかず、Tailwind Labs で複数のメンバーを解雇することになった。Podcast で作者が詳細を語っている。
• React とは何であるのか（執筆中）
  • React の根本的な設計思想を体系的に解説するドキュメント。宣言的 UI、純粋関数性、副作用の分離、Fiber アーキテクチャなどを網羅。
• Introducing: React Best Practices
  • Vercel が AI エージェント向けに React/Next.js の最適化知識をまとめたリポジトリを公開。async waterfall の排除、バンドルサイズ削減、再レンダリング最適化など 40 以上のルールを収録。
• APG Patterns Examples を作った
  • WAI-ARIA APG パターンを React、Vue、Svelte、Astro で実装したサンプル集。テストの話もあり、APG の日本語参照としても有用。
• Vitest が experimental な機能として OpenTelemetry をサポート
  • テスト実行をトレースして、どの部分に時間がかかっているかを可視化できる。
• フロントエンドテストパフォーマンス改善：Vitest のボトルネックを探っていく
  • MUI アイコンライブラリのバレルインポートが原因でテストの collect フェーズに時間がかかっていた問題を特定し、個別 import に変更することで CI 時間を 10 分以上から 4 分 45 秒に短縮。
• What’s New in ViteLand: December 2025 Recap
  • Oxlint は ESLint の 50-100 倍高速、Oxfmt は Prettier の 30 倍高速など、VoidZero エコシステムの 12 月の進捗まとめ。
• VoidZero がロゴとサイトを刷新
  • VoidZero がリブランディングを実施。
• rstest に browser mode が追加
  • rstest（Rspack のテストツール）に browser mode が追加された。
• pnpm in 2025
  • 2025 年の pnpm の振り返り。ライフサイクルスクリプトのデフォルト無効化、Global Virtual Store、JSR ネイティブサポート、Config Dependencies など多くの機能追加。ダウンロード数は 2024 年比で 2 倍に増加。
• Everything Claude Code
  • Anthropic ハッカソン優勝者が公開した Claude Code 向けの設定コレクション。Agents、Skills、Commands、Rules、Hooks、MCP 設定などが含まれる。

⚡️ Services

• The Astro Technology Company joins Cloudflare
  • Astro が Cloudflare に買収された。フレームワークはオープンソースのまま MIT ライセンスを維持し、全てのデプロイメント対象を引き続きサポートする。
• Netlify 500 万ユーザー突破記念サイト
  • Netlify のユーザー数が 500 万人を突破し、これまでの歩みをブラウザ上のゲームで振り返れるサイトが公開された。

🖥 Browsers

• Chrome 144 の新機能
  • ::search-text 疑似要素、<geolocation> 要素、Temporal API などが追加。Privacy Sandbox 系の API の deprecate も含まれる。
• Firefox が CSS Anchor Positioning などをサポート
  • Firefox で CSS Anchor Positioning、Navigation API、View Transition Types、CSS Module Imports がサポートされた。
• Customizable Select の Gecko 実装開始
  • Firefox で Customizable Select の実装が始まった。
• New Safari developer tools provide insight into CSS Grid Lanes
  • Safari の Grid Inspector に Order Numbers が追加され、Grid Lanes のコンテンツフロー順序が視覚的に確認できるようになった。
• Chrome DevTools で個別のネットワークリクエストのスロットリングが可能に
  • Chrome DevTools 上で個別のネットワークリクエストに対してスロットリングを設定できるようになった。
• iOS 26.2 でデフォルトブラウザ選択画面が表示されるように
  • iOS 26.2 にアップデートすると、デフォルトブラウザ選択画面が表示されるようになった。

💬 Languages

• Date is out, Temporal is in
  • JavaScript の Date オブジェクトの問題点と、新しい Temporal API の利点を解説。Temporal は不変性を持ち、複数のカレンダーシステムと適切なタイムゾーン処理をサポート。

🤖 Runtimes

📝 Specifications

• streamHTMLUnsafe() の Intent to Ship
  • HTML をストリーミングで挿入できる API の実装が進んでいる。HTML を挿入できる API は複数存在し、整合性を取るための議論も行われている。
• ariaNotify の WebKit・Blink 実装完了、Gecko は 2026 年上半期予定
  • ariaNotify は WebKit と Blink では実装済みだが、Gecko は 2026 年上半期に実装予定。
• Device Memory API の取得値が変更
  • Device Memory API で取得する値が変更される。Android は 2, 4, 8、その他は 2, 4, 8, 16, 32 になる。

🦆 Others

• The 2025 Web Almanac
  • HTTP Archive による Web の年間状態報告書。1620 万件のウェブサイトを分析し、16 章で構成される包括的なレポート。
• Next.js を「ブラウザの延長」として捉える
  • Next.js をフルスタックではなく BFF として使い、バックエンド API とは論理的・物理的に分離するアプローチの紹介。機密情報を保持しない設計を推奨。
• Autify から Playwright への E2E テスト移行
  • PR TIMES が Autify（約 150 シナリオ、失敗率 16%、実行時間 3 時間超）から Playwright に移行し、53 シナリオに削減、失敗率 2%、実行時間 25 分に改善した事例。
• フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
  • サイバーエージェントの久保氏による、ゲーム事業・メディア事業・インターネット広告事業それぞれのフロントエンド開発の違いを比較分析した発表。