Frontend Weekly 2024-05-17

2024年5月17日

Google I/O 2024、React Conf 2024、React Compiler、Merging Remix and React Router、Safari 17.5、Chrome 125、Console Insights in Chrome DevTools、Playwright v1.44.0、MSW v2.3.0、Astro 4.9などについて紹介する。

Table of Contents

# Google I/O 2024
# React Conf 2024
# React Compiler
# Merging Remix and React Router
# WebKit Features in Safari 17.5
# text-wrap: balance
# light-dark()
# @starting-style
# Chrome 125
# CSS Anchor Positioning
# Compute Pressure API
# Storage Access API (SAA) extended to non-cookie storage
# CSS round(), mod(), rem()
# Others
# Console Insights in Chrome DevTools
# Playwright v1.44.0
# Using Playwright to Monitor Third-Party Resources That Could Impact User Experience
# MSW v2.3.0
# Astro 4.9
# TSKaigi 2024
# Using the Page Visibility API
# DenoによるJSDocによるドキュメント勧め
# Misconceptions about CSS Specificity
# Node.js の進化に伴い不要となったパッケージ
# ブラウザのリファラーをどう設定するべきか
# div一つで色々な図形を作る
# pnpmの依存解決について

Google I/O 2024

5月15日にGoogle I/O 2024が開催されました。Web関連は次のリンク先で確認できます。

Google I/O 2024: Videos, sessions, and other content

React Conf 2024

React Conf 2024が5月15日から16日に掛けて開催されました。アーカイブをYouTubeで確認することが出来ます。

Day 1

React Conf 2024

Day 2

React Conf 2024

React Compiler

React CompilerがOSSとして公開されました。Babel pluginとして現状提供されており、IR/SSRへの変換などはRustで実装されています。

react/compiler at 149b917c8a4022aeaa170c4fb826107dd2333c68 · facebook/react

どのような変換が行われるかはReact Compiler Playgroundで試すことが出来ます。

React Compiler Playground

合わせてReact Compilerのドキュメントも公開されました。

React Compiler – React

次のような状況のようです。

フィードバックを受けるためにOSS化された、まだ実験的な機能。
- React v19 Beta未満で利用するとエラーが出るようです。
ViteとWebpackつまりRemixやNext.jsでも動く。
- Babelプラグインで提供されているので、Babelを使うように設定すれば使えるのは当たり前ではある。
- Next.jsは、既にoptionでの提供を準備しているようです。
- Babelで提供されたことに対してネガティヴな意見が見られるが、コアはRustで分けて実装されているため、他の手段での提供も十分に考えられる。
react-compiler-healthcheck や eslint-plugin-react-compiler を利用することで、正常にコンポーネントやライブラリを最適化できるかを確認できる。
- Reactのルールに従っている、で問題なく動作することが条件のようです。
段階的に利用するために、ディレクトリ毎や、オプトインモード（アノテーションモード）によるコンポーネント・フック毎のReact Compilerの導入もできる。
- compilationMode: "annotation" オプションを渡すことで、use clientのようにuse memoを付けたコンポーネントやフックのみに適用できる。ただし、これは早期採用者を支援するための機能とのこと。

Merging Remix and React Router

新しいRemixはReact Router v7としてリリースする予定のようです。

Remixは以前からReact Routerのフレームワークのようなものでしたが、Viteプラグイン対応やSPAモードにより、RemixとReact Routerの差分がほぼなくなったことが理由として言及されています。

実際、Remixの機能のほとんどはReact Routerで既に利用できます。インポート元を@remix-run/*からreact-routerに切り替えるだけで利用できるようにする予定とのことです。この変更によってReact RouterからRemixへの段階的な移行がよりしやすくなると思われます。

Merging Remix and React Router

WebKit Features in Safari 17.5

5月13日にSafari 17.5がリリースされました。

WebKit Features in Safari 17.5

text-wrap: balance

text-wrap: balanceがサポートされました。このプロパティを指定すると、各行が均等な長さになるように改行されるようになります。

Safariのサポートによって、ほとんどの環境で利用できるようになりました。

light-dark()

ライトモードとダークモードの色を指定できるlight-dark()関数が追加されました。これもSafariのサポートにより、ほとんどの環境で利用できるようになりました。

color-scheme: light dark;
color: light-dark(black, white);

@starting-style

@starting-styleは、トランジションさせる要素の初期状態を指定できるアットルールです。これもほとんとの環境で利用できるようになりました。

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    opacity: 0;
    transform: scaleX(0);
  }
}

Chrome 125

Chrome 125がリリースされました。

New in Chrome 125 | Blog | Chrome for Developers

CSS Anchor Positioning

CSS Anchor Positioningは、CSSのみで指定された要素を基準に要素を配置する機能です。ChromeやEdgeでしか現状利用できません。

Introducing the CSS anchor positioning API | Blog | Chrome for Developers

これは複数の新しいプロパティや値を含んでおり、色々なことが出来ます。以下に主なパターンを書き出しました。詳しくは記事を見てください。

.anchor {
  anchor-name: --anchor-el;
}
/* インセット領域を利用した配置 */
.anchored-notice-1 {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of anchored elem at top center of anchor  */
  /* top, left, right, bottom, inline-(start|end), block-(start|end) */
  inset-area: top;
}
/* 絶対配置を利用した配置 */
.anchord-notice-2 {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  right: anchor(right);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}
.anchord-notice-3 {
  position: absolute;
  position-anchor: --anchor-el;
  inset-area: right span-bottom;
  /*
  * 配置位置をアンカーの位置に応じて変更する。
  */
  position-try-options: --bottom;
}
/* alternate position */
@position-try --bottom {
  inset-area: bottom;
}
.anchord-notice-4 {
  position: absolute;
  position-anchor: --anchor-el;
  inset-area: top;
  /* 自動的に反転させる flip-blockとflip-inlineの組み合わせ*/
  position-try-options: flip-block;
}
.anchord-notice-5 {
  position: fixed;
  position-anchor: --anchor-el;
  /* アンカーが表示されている間、配置された要素を表示し続ける */
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

DEMO:

Anchor position tool

Compute Pressure API

Compute Pressure APIがサポートされました。現状Chromeぐらいでしか利用できません。

Compute Pressure API | Web Platform | Chrome for Developers

Compute Pressure APIは、大きな負荷の変化を検出できます。これによりビデオ会議Webアプリなどのリアルタイムアプリケーションで、負荷が高まった際に画質を落とすなどの対応ができます。

function callback(records) {
  const lastRecord = records[records.length - 1];
  console.log(`Current pressure ${lastRecord.state}`);
  if (lastRecord.state === "critical") {
    // disable video feeds
  } else if (lastRecord.state === "serious") {
    // disable video filter effects
  } else {
    // enable all video feeds and filter effects
  }
}

const observer = new PressureObserver(callback);
await observer.observe("cpu", {
  sampleInterval: 1000, // 1000ms
});

Storage Access APIはクロスサイトCookieの代替として導入されたAPIです。iframeなどを通して別のサイトに埋め込まれたコンテンツに対してサードパーティーCookieへのアクセスを提供していました。Chrome 125からindexedDBやlocalStorageなどCookie以外のストレージにもアクセスできるようになりました。

Storage Access API - Web API | MDN

Storage Access API の使用 - Web API | MDN

CSS round(), mod(), rem()

round()は指定に応じて、四捨五入や切り捨て・切り上げを行います。Chromeのサポートにより、ほとんどの環境で利用できるようになりました。

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

mod()、rem()は名前の通りです。

/* Math.round相当。デフォルトはnearest */
width: round(var(--width), 50px);
/* Math.ceil相当 */
width: round(up, 101px, var(--interval));
/* Math.floor相当 */
width: round(down, var(--height), var(--interval));
/* Math.tranc相当 */
margin: round(to-zero, -105px, 10px);
margin: mod(29vmin, 6vmin); /* 5vmin */
rotate: mod(135deg, -90deg); /* -45deg */
line-height: rem(21, 2); /* 1 */
rotate: rem(140deg, -90deg); /* 50deg */