1591 文字

8 分

Frontend Weekly 2023-07-31

2023-07-31

Tech

Frontend weekly

/

Storybook

/

Valibot

/

Chrome

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 なども活用すれば最強に思える

1
import { z } from "zod";
2

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

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

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

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

1
import {
2
  object,
3
  string,
4
  number,
5
  minLength,
6
  maxLength,
7
  minValue,
8
  maxValue,
9
} from "valibot";
10

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

現時点では、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/