Cybozu Frontend Monthly #69

タイトル画像

イベント概要

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

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

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

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

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

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

開催日

2026年06月30日

イベントページ

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

メンバー

@mugi_uno @mugi_uno
@nus3_ @nus3_
@sajikix @sajikix

コンテンツ

👀 Notable Articles

Modern Web Guidance

先日開催された Google I/O 2026 で発表された AI Agent 向けの Skills です。

AI Agent を用いた Web 開発においては、次のような課題が存在しています。

参考:
Modern Web Guidance を使用する理由
https://developer.chrome.com/docs/modern-web-guidance/get-started?hl=ja

これらをクリアするために、Web 開発における最新の機能やユースケース、ベストプラクティス、
ブラウザごとの利用可否などを AI が効率よく取得・参照できる形とし、
それを Agent Skills として公開されたものが Modern Web Guidance です。
パフォーマンス・アクセシビリティ・セキュリティ・UX といったものも含まれ、
幅広い内容をカバーしたガイドになっています。
単純な実装はもちろん、レビューなど多岐に渡って活用できるシチュエーションがありそうです。

なお、リソースとなるドキュメントは 100 以上のものが含まれ、今後も数百のガイドを追加していく予定とのことです。
こういった大量のドキュメントを扱う Skills では、
コンテキストの圧迫など、いかに効率よく情報を参照できるかが難しいポイントですが、
Modern Web Guidance では、Tensorflow.js を用いてローカルで検索が完結する仕組みを取っています。
Skills の作成・提供という観点からも非常に参考になるものでした。

https://github.com/GoogleChrome/modern-web-guidance https://github.com/GoogleChrome/modern-web-guidance-src

/goal コマンドの活用例: Vitest の実行時間を 6 倍高速化した話

Claude Code の/goalコマンドを使って、既存のプロジェクトの Vitest の設定をisolate: falseに移行することで、テストの実行時間を 12 分から 2 分にまで短縮した話。

実際に自分が関係するプロジェクトでも、import の時間が大きかったので、/goalコマンドを使ったisolate: falseを試してみました。

Duration  312.84s (transform 60.08s, setup 26.25s, import 475.15s, tests 360.95s, environment 91.25s)

結果として、isolate: falseへの移行完了まではいかなかったんですが、実際に試してみて、特に自分のプロジェクトだと以下の点は学びでした。

JavaScript Pattern Matching with Flow

Flow における match

Flow が新しく match 式を追加しました。以下のように書くことで、他言語にあるようなパターンマッチが簡単に書けるようになります。

const description = match (action) {
  {type: 'add', const text} => `Add: ${text}`,
  {type: 'toggle', const id} => `Toggle ${id}`,
  {type: 'remove', const id} => `Remove ${id}`,
};

似たようなケースで使われる switch 文と違い、このパターンマッチは「式」なので、値を返せる点が非常に便利ですね。 また、値の照合と同時にconst textのような形で変数への抽出もできるので、マッチした値をそのまま使うこともできます。

マッチする部分は'delete' | 'remove'のように or パターンで書くこともできますし、_ でワイルドカードを扱うこともできます。

match (command) {
  'delete' | 'remove' => {
    data.pop();
  }
  'add' => {
    data.push(1);
  }
  _ => {
    show(data);
  }
}

また、ネストされたオブジェクトにマッチさせることもできるようです。

補足 : ECMAScript における pattern matching の提案

現在 ECMAScript 本体でも 「ECMAScript Pattern Matching」として Pattern Matching の提案が進められていますが、2026 年 6 月現在は Stage 1 の状態です。

https://github.com/tc39/proposal-pattern-matching

一方で配列や Object のマッチなどに関しては、Record & Tuple の後続となる Composites との協調も含め検討することは多そうで、今後の動向が気になるところです。

🗓 Monthly Articles

📖 Framework, Library

⚡️ Services

🖥 Browsers

💬 Languages

🤖 Runtimes

📝 Specifications

🦆 Others