Frontend Weekly 2023-03-14

2023年3月14日

Playwrightのコード生成、画面情報がおかしいときの対処、Chrome 111、Deno 1.31、Google Searchのファビコンとサイト名、Rspack 0.1.0などについて紹介する。

#Frontend weekly

Table of Contents

# Q & A
# Playwrightのコードを生成する
# 画面に出ている情報がおかしいときに考えること
# Chrome 111
# View Transitions API
# Style Queris
# CSS Color Module Level 4
# CSS 三角関数の追加
# CSSセレクター :nth-childの拡張 of S
# Deno 1.31
# package.json support
# Google Search
# ファビコンとサイト名の検索結果への表示
# ファビコンの置き場所
# Rspack 0.1.0
# Webpackとの互換性
# 将来性

Q & A

普段の業務において、質問を受けた際の回答などから共有した方が良さそうな内容をピックアップしました。

Playwrightのコードを生成する

次のコマンドを行うとスクリプトを自動生成してくれます。便利。

npx playwright codegen wikipedia.org

画面に出ている情報がおかしいときに考えること

画面に出ている情報と想定しているレスポンスが一致しないが、理由が分からないという質問が稀にあります。このような問題が発生した場合、開発環境でクライアントのコードを見るのではなく、次のようなフローで確認することをおすすめします。

まずはDatadogや検証ツールのNetworkで、想定通りのレスポンスが帰ってきているか、エラーが起きていないかを確認する。
レスポンスに問題がなければ、クライアント側でのレスポンスの扱い方がおかしいです。
レスポンスに問題があれば、リクエストや、バックエンドのコードを確認しましょう。

Chrome 111

2023年3月7日にGoogle Chrome 111がリリースされました。Google Chrome 111には、話題になっている機能以外にも多くの興味深い機能が追加されています。

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

View Transitions API

View Transitions APIを利用すれば、画面の更新前後で重複することなくDOMを変更するスムーズな画面遷移を簡単に実現出来ます。モバイルアプリのページ遷移をイメージすると良いでしょう。

今までも実装を頑張れば、このような実装は可能でしたが、View Transitons APIの登場によって、より無駄なく簡素な記述で可能になりました。

document.startViewTransition(() => {
	// 画面の更新処理
	navigate(...)
});

.page-header {
  /* 画面遷移中に共有、重複しない要素に名前をつける */
  view-transition-name: page-header;
  contain: paint;
}

/* 画面遷移時に更新前の画面がどのように振る舞うか */
::view-transition-old(root) {
  mix-blend-mode: plus-lighter;
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}

/* 画面遷移時に更新後の画面がどのように振る舞うか */
::view-transition-new(root) {
  mix-blend-mode: plus-lighter;
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}

賢い方は、ここまで見てMPAでは利用できなさそうだなと思われるかもしれません。ですが今後MPAへの対応が予定されており、実はすでに実験的な機能としてフラグを有効化すれば利用することが出来ます。興味のある方は、このドキュメントを見てください。

Style Queris

2022年9月にChrome 105でリリースされたコンテナクエリの拡張で、コンテナ要素のスタイルに合わせて、子要素のスタイルを指定できるようになります。

現状Chrome 111では、CSS変数を利用している場合のみ利用できます。

@container style(--theme: warm) {
  .card {
    background-color: wheat;
    border-color: brown;
  }
}

https://developer.chrome.com/blog/style-queries/

CSS Color Module Level 4

高解像度ディスプレイがサポートされ、選択できる色が50%増えて1,600万色になったらしいです。すごいですね。またCSS関数color()、lch()、oklab()、color-mix()などがサポートされ、12の新しい色空間と7つの新しい色域を利用できるようになりました。

これにより、今まで以上に凝ったデザインを簡単に実現できるようになりますし、特にグラデーションや色を使ったアニメーションはより美しいものを作れるようになるでしょう。

CSS 三角関数の追加

CSS関数sin()、cos()、tan()、acos()、asin()、atan()、atan2(x,y) がサポートされました。

あまり使う機会はないかもしれませんが、例えば波状のアニメーションはとても簡単に実装できるようになりました。

CSSセレクター :nth-childの拡張 of S

基本的な記法は:nth-child(an + b of S)です。Sにはセレクターを指定し、Sの条件に合うものの内an + b番目のものを対象に取ります。

/* highlightクラスを持っている子要素の中で2番目を選択する。*/
:nth-child(2 of .highlight) {
}

/* highlightクラスを持っている且つ2番目の子要素を選択する。 */
.highlight:nth-child(2) {
}

Sを複数指定することも出来ます。

/* highlightクラスまたはsaleクラスを持っている子要素の中で2番目を選択する */
:nth-child(4 of .highlight, .sale) {
}

これが特に便利なケースとして、Chromeのドキュメントにも挙げられている不可視の要素を省いたスタイル付けが挙げられます。今まではフィルター機能のあるテーブルでストライプ柄を維持するのは面倒でした。

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

Deno 1.31

2023年2月24日にDeno 1.31がリリースされました。 Node.js互換機能が本体に統合され、Node.jsから移行が容易になっています。

https://deno.com/blog/v1.31

package.json support

package.jsonに記載された依存関係の解決や、scriptsの実行を行えるようになりました。ただし現況、単純なスクリプトのみが利用できます。rimrafやcross-envなどは利用できません。

Google Search

ファビコンとサイト名の検索結果への表示

以前からモバイルではファビコンとサイト名が検索結果に表示されていました。2023年3月から、PCでの表示が正式に導入されました。

https://developers.google.com/search/docs/appearance/site-names?hl=ja

https://developers.google.com/search/docs/appearance/favicon-in-search?hl=ja

ファビコンの置き場所

2023年2月から、ファビコンを別ドメインにも置けるようになりました。

https://developers.google.com/search/updates?hl=en#february-2023

Rspack 0.1.0

TikTokで有名なByteDanceが、Rust製のWebpack互換バンドラを公開しました。性能がWebpackと比べた数倍優れているだけでなく、Webpackのエコシステムとの互換性がとても意識されています。

https://github.com/web-infra-dev/rspack

Webpackとの互換性

設定ファイルの構成がWebpackと非常に似ており、Webpackの主要なローダーやプラグインをほぼそのまま利用できます。またWebpackと同様に、JavaScriptを用いて独自のローダーやプラグインを実装することが出来ます。

将来性

Webpackの後継としては、すでにTurbopackがあり、当初からWebpackからの移行対応を行うと宣言していました。ですが、Turbopackは発表以降あまり大きな話題がありません。個人的にコミットログなどを見ていると開発体制があまり良くないのではないかなという気がしています。少なくともリリースノートは読みにくいです。

一方、Rspackはドキュメントが丁寧に書かれており、コミットのルールも徹底されているためリリースノートも読みやすいです。また今後Webpackとの統合も計画されており、Webpackチームと連携しているとのことなので、十分に将来性はあると思います。