Cybozu Frontend Monthly #67

タイトル画像

イベント概要

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

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

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

※フロントエンドウィークリーとは

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。
2016年3月15日から行われています。

ZennのPublicationにてウィークリーのまとめを投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2026年03月31日

イベントページ

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

メンバー

@mugi_uno @mugi_uno
@nus3_ @nus3_
@sakupi01 @sakupi01

コンテンツ

👀 Notable Articles

How we rebuilt Next.js with AI in one week

Cloudflare が AI を活用して、おおよそ一週間の期間で Next.js をベースに、 Cloudflare Workers にデプロイ可能かつ Vite ベースで構築された vinext を開発・公開しました。 Next.js および Turbopack が提供する Routing, SSR, API, Cache などの機構をすべて Vite 上のプラグインとして実現しているとのことです。

実現できた大きな理由のひとつとして、Next.js のリポジトリ内には広範囲をカバーする数千を超える E2E テストが用意されており、 これをそのまま移植したことで、再現した実装を機械的に検証可能であったことが挙げられていました。

一方で、OSS においては AI Slop が話題に出ることも多くありました。

たとえば、OSS のドローイングツールである tldraw では「テストコードを非公開にする」という Issue が立てられました。

https://github.com/tldraw/tldraw/issues/8082

これは後々ジョークであったことが明かされましたが、内容的には生々しいものであり、かなり真実味があるものでした。

また、Hono 作者の yusukebe さんは、AI Slop に関しての記事を Zenn に公開しており、 OSS メンテナ視点から AI Slop の問題点や辛みについて詳細に言及しています。

https://zenn.dev/yusukebe/articles/3fd5bc6ea341c9

LLM の進化によって、OSS 自体の今後について少し考えさせられる期間でした。

Vite+の発表と Vite8 のリリース

3 月は Vite 関連のリリースがいくつかありました。

Vite 8.0 のリリース

https://vite.dev/blog/announcing-vite8

今後は、開発中のモジュールをバンドルする Full Bundle Mode や、JS プラグインが Rust によって生成された AST にアクセス可能にする予定などがあるようです。

また、移行に関しては Vite 8 では Rolldown および Oxc で、従来の esbuild や Rollup と同等の動作を保つための変換層を作ったので、設定を変更せずにスムーズにアップデートできるとのことです。

Vitest 4.1.0で、Vite8 への対応も行われています。

Vite+の発表

https://voidzero.dev/posts/announcing-vite-plus-alpha

Request for developer feedback: focusgroup

フォーカス箇所を多く含むコンポーネントのキーボード操作は実装が複雑になりがちです。 例えば、Toolbar 内のフォーカス移動を Tab でしか行えないと、そのコンポーネントを抜け出すのに Tab を連打する必要があり、これはキーボードユーザにとってユーザビリティを低下させる要因となり得ます。 そのため、APG(ARIA Authoring Practices Guide) などを筆頭に、こうたフォーカス機能を多く含む UI パターンでは「コンポーネント内を矢印キーで移動・コンポーネント間を Tab で移動」が推奨されてきました。JS で tabindex を付け替えることでフォーカス管理する実装になるため、これはしばしば「Roving Tabindex」と呼ばれます。

こうした、一般的でありながらも JS で独自実装が必要だった UX パターンに対する標準側での解決策として誕生したのが、focusgroup です。 focusgroup により、Roving Tabindex の実装を宣言的かつロールセーフに行うことができます。

<div focusgroup="<behavior> [inline|block] [wrap] [no-memory]">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>

Behavior にトークンを指定することで、 ARIA ロールに紐づいた Toolbar, Tablist, Menu & Menubar, Listbox, Radio Group, Accordion などのフォーカスパターンを自動的に実装できるようになります。

Focusgroup: Interactive Demos

Chrome では先行実装が進んでおり、フィードバックが募られています。Dev 146+, Origin Trial で利用可能です。 こうした汎用パーツと Customizable Select Element や Menu Element などのコンポーネントパーツが、相互に影響して進化が加速する Web UI の標準化に、今後も期待が高まります。

🗓 Monthly Articles

📖 Framework, Library

⚡️ Services

🖥 Browsers

💬 Languages

🤖 Runtimes

📝 Specifications

🦆 Others