Frontend Weekly 2023-07-31

2023年7月31日

Storybook 7.1、Valibot、Chrome 115などについて紹介する。

Table of Contents

# Storybook 7.1
# In-app onboarding
# Zero-config styling support
# **Valibot, a < 1kb Zod Alternative**
# Chrome 115
# Scroll-driven animations
# 2値構文のdisplayプロパティ
# プライバシーサンドボックス APIs
# ストレージパーティショニング
# Topics API

Storybook 7.1

2023年7月19日にStorybook 7.1がリリースされました。Storybookは7.0以降小さいサイズでリリースを行なっていく方針とのことです。追記：実際8月1日にStorybook 7.2がリリースされました。

https://storybook.js.org/blog/storybook-7-1/

In-app onboarding

Storybookをはじめて起動した際にチュートリアルを開発者に表示する@storybook/addon-onboarding パッケージが作られました。これは新規でstorybook initをした場合、React環境であればデフォルトで入ります。現在はReactでのみサポートされています。

https://storybook.js.org/blog/in-app-tour-for-new-users/?ref=storybookblog.ghost.io

Zero-config styling support

Storybookの@storybook/addon-stylingが自動で設定を行なってくれるライブラリに次のものが追加されました。

Tailwind
Material UI
Emotion
styled-components

https://storybook.js.org/blog/zero-config-support-for-tailwind-mui-styled-components-and-emotion/?ref=storybookblog.ghost.io

Valibot, a < 1kb Zod Alternative

弊社では利用していませんが、去年くらいからバリデータライブラリとしてzodが話題です。

Zodは、以下のような特徴を持っています。

以前から有名なjoyやyupと似たようなメソッドチェーンスタイルのAPI
joiやyupよりも優れた型推論
良いかはともかく便利なメソッドを積極的に取り入れているため、非常に便利
1. refine、superRefineなども活用すれば最強に思える

import { z } from "zod";

const schema = z.object({
  name: z.string().min(2).max(20),
  age: z.number().min(18).max(120),
});

Zodは非常に便利と言われる一方で、メソッドチェーンスタイルであるため、Tree Shakingが難しく、ビルドサイズが大きくなってしまうという点が度々指摘されていました。

2023年7月に登場したValibotは、APIをメソッドチェーンではなく個々の関数として提供することで、Tree Shakingを有効にし、ビルドサイズをZodに比べて大幅に抑制することが出来るようになっています。

https://www.builder.io/blog/introducing-valibot

import {
  object,
  string,
  number,
  minLength,
  maxLength,
  minValue,
  maxValue,
} from "valibot";

const schema = object({
  name: string([minLength(2), maxLength(20)]),
  age: number([minValue(18), maxValue(120)]),
});

現時点では、ZodからValibotに乗り換えている人はそこまでいないように思われますが、Zodとよく合わせて使われるreact-hook-form のresolverが提供されるようになれば、今後使用率が増えるのではないかなと思っています。

https://github.com/react-hook-form/resolvers/pull/602

Chrome 115

2023年7月18日にChrome 115がリリースされました。

https://developer.chrome.com/blog/new-in-chrome-115/

Scroll-driven animations

今までCSSアニメーションのタイムラインは時間経過のみでしたが、スクロール位置に応じたScroll Progress Timelineと、特定要素の可視性に応じたView Progress Timelineが利用できるようになりました。

https://developer.chrome.com/articles/scroll-driven-animations/

Scroll Progress Timelineを利用すれば、今までWeb APIを利用してスクロール量を取得する必要があったブログ記事の読了割合をページ上部に表示するようなアニメーションをCSSのみで手軽に追加できます。

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-timeline

View Progress Timelineを利用すれば、今までIntersectionObserverなどを利用する必要があった、例えばスクロールしていくと要素がエフェクト付きで飛び出てくるようなアニメーションをCSSのみで実現できます。

https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline

2値構文のdisplayプロパティ

2値構文のdisplayプロパティがChromeでもサポートされました。Edgeでもそろそろサポートされるようなので、ほぼ全てのモダンブラウザで利用できるようになります。

https://developer.mozilla.org/docs/Web/CSS/display/multi-keyword_syntax_of_display

個人的には、2値構文の方がflowとflow-rootなどを認識できるので好きですが、2値構文は従来の単一構文にマッピングされるため、現状ではあえて利用する理由はなく、あまり積極的には使われないのではないかなと思っています。

従来の単一構文	新しい2値構文
block	block flow
flow-root	block flow-root
inline	inline flow
inline-block	inline flow-root
flex	block flex
inline-flex	inline flex
grid	block grid
inline-grid	inline grid

プライバシーサンドボックス APIs

ユーザーのプライバシを保護する一方で企業や開発者には広告などを提供することを目的として、Googleが押し進めているプライバシーサンドボックスの準備がいよいよ整ったようです。

https://developer.chrome.com/en/blog/privacy-sandbox-launch/

Chrome 116までにおよそ99%のユーザーに対してプライバシーサンドボックス関連の機能が段階的に有効化されていきます。Chrome 115の記事で紹介されているいくつかの機能もこれに含まれているAPIです。

以下にプライバシーサンドボックスで有効化される機能をいくつか軽く紹介します。

Topics API: サードパーティーCookieなどを用いたユーザーの追跡を廃止していく一方で、適した広告を届けるためにユーザーの興味がある内容を取得するAPI
Protected Audience API: 一度商品やサービスを閲覧したユーザーに対して、リマーケティングを可能にするAPI
Attribution Reporting API: サードパーティCookieを利用せずに、広告コンバージョンの測定を可能にするAPI
ストレージパーティショニング: サイトに埋め込まれたiframeは今まで埋め込まれたサイトとストレージを共有できたが、今後は分離される。
Fenced frames: プライバシーに配慮したiframeを実現するfencedframes要素。この要素では埋め込んだサイトと埋め込まれたサイト間でデータのやりとりが行えない。

詳しい内容については、以下のプライバシーサンドボックスについてのドキュメントを見ると良いと思います。

https://developer.chrome.com/ja/docs/privacy-sandbox/