Cybozu Frontend Monthly #54

タイトル画像

イベント概要

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

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

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

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

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。
2016年3月15日から行われています。
ハッシュタグ #サイボウズフロントエンドウィークリー で実況しています。

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

開催日

2025年01月28日

イベントページ

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

配信URL

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

メンバー

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

コンテンツ

👀 Notable Articles

Storybook v9 で test メソッドの導入を検討

Storybook のインタラクションテストを定義する際に使っていた play 関数について、Jest や Vitest のようにかけるような test メソッドを v9 で導入することを検討しているそうです。

RFC の概要を見ると、test メソッドは次のように形式が提案されています

import { config } from '#.storybook/preview';
import { AddLabelForm } from './AddLabelForm';

const meta = config.meta({ component: AddLabelForm });

// the story can be seen as the arrange step in testing
export const ManyLabels = meta.story({
  args: { labels: [{...}, {...}] }
});

// 👇 easy to write (and read!) full sentence specs!
ManyLabels.test('submitting invalid label shows inline error', async ({ canvas }) => {
  // act/assert
  await userEvent.type(canvas.getByText('Label:'), 'invalid label');
  await userEvent.click(canvas.getByRole('button'));

  await expect(...).toHave(...);
});

この API の設計は難しく、どのようなインターフェースにするかはフィードバックを求めているとのことです。

Jest や Vitest のようにインタラクションテストも書きたいという要望はとてもわかるので Storybook9 のリリースが楽しみですね。

facebookexperimental/Recoil のリポジトリがアーカイブに

Meta 社が OSS として公開していたフロントエンドの状態管理用ライブラリである facebookexperimental/Recoil のリポジトリが 2025/1/2 にアーカイブされました。 2023/4/12 にリリースされた 0.7.7 を最後に更新が無い状態が続いており、状況を尋ねる Issue なども作成されていましたが、残念ながら今後はメンテナンスされないことになったようです。

内部事情として Meta 社のレイオフの関係でメインのコントリビュータが不在となり、その後も引き継がれることがなかった、という背景が語られています。 https://x.com/mengdi_en/status/1875916781950468341

New Front-End Features For Designers In 2025

2025 年、積極的に使っていきたい CSS の新機能を振り返る記事です。今回は、この中から、個人的に注目している機能を紹介します。

CSS Anchor Positioning For Tooltips And Popovers

2024 年は、Popover API が Baseline Newly Availableとなりました。これにより、popover属性を任意の HTML 要素につけ、Invoker となる要素（Popover をトリガーする要素）にpopovertarget属性を指定することで、Popover を実装することができるようになりました。これにより、任意の要素を Top Layer に表示し、その開閉を JS を使わずに実現でき、そして Light Dismiss で閉じることもできるようになりました。

そんな Popover に強力な機能を付加するのが、CSS Anchor Positioning です。以下のようにanchor-name・position-anchorプロパティ（またはanchor()関数）を利用することで、Anchor と Positioned Element を紐付けて、配置を指定できます。

<button popovertarget="ex-tooltip">Open</button>

<div popover id="ex-tooltip">Yey</div>

<style>
  button {
    anchor-name: --anchor-btn;
  }

  [popover] {
    position-anchor: --anchor-btn;
    position-area: top center;
  }
</style>

この 「Anchoring」の概念により、Top Layer に配置される Popover や Dialog といった要素を、Anchor となる要素を基準に配置することが可能になりました。

High-Definition Colors With OKLCH And OKLAB & Relative Colors In CSS

CSS Color Module Level 4 では、oklch()や oklab()関数が追加されました。

これまで、hsl() による指定では明度（Lightness）・彩度（Saturation）を一定にしても視覚的な均一性は保証されていませんでした（特に、黄色系の色味が明るすぎるなど）。 OKLCH 色域とは、明度（Lightness）、彩度（Chroma）、色相（Hue）で構成される色域で、sRGB 色域に比べて、 明度・彩度の均一性が改善された色空間です。

oklch()や oklab()が追加された背景に関しては、以下の記事でわかりやすく解説されています。

また、CSS Color Module Level 5 で追加された CSS Relative Color Syntax を併用することで、fromキーワードで指定された色を基準に、それぞれのカラーパラメータを指定することができます。

.lighten-by-25 {
  background: oklch(from blue calc(l * 1.25) c h);
  background: oklch(from blue calc(l + 0.25) c h);
}

Collaborating across W3C and Ecma for web-interoperable server runtimes through WinterTC

WinterCG が、JavScript の標準化も行なっている Ecma International に移行し、新たに WinterTC(TC55) という名称に変更されました。

元々、WinterCG は 2022 年に設立された W3C の ランタイムの相互運用性を推進するコミュニティグループで、Deno や Node.js Cloudflare Workers などのステークホルダーが参加していました。その成果としてMinimum Common APIなどが公開されています。

今回、この WinterCG の機能や作業を Ecma International に移行し、新たに WinterTC(Web-interoperable server runtimes Technical Committee) という名称の Ecma Technical Committee として立ち上げることが決定されました。EcmaInternational では Technical Committee ごとに番号が振られており、WinterTC は TC55 としても呼ばれるようになります。

この移行により JavaScript の標準化(=ECMAScript)も行なっている Ecma の TC39 との連携がより強まることはもちろん、W3C のコミュニティグループとして公開まで至らなかった独自標準の公開・策定も視野に入れた移行のようです。

WinterTC は W3C の中からは抜ける形となりますが、引き続き W3C のワーキンググループとも連携をとっていくとしています。

参考

🗓 Monthly Articles

📖 Framework, Library

⚡️ Services

💬 Languages

🖥 Browsers

📝 Specifications

🦆 Others

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

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