Frontend Weekly 2023-03-14

Playwright のコードを生成する#

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

1
npx playwright codegen wikipedia.org

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

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

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

View Transitions API#

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

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

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

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

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

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

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

Style Queris#

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

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

1
@container style(--theme: warm) {
2
  .card {
3
    background-color: wheat;
4
    border-color: brown;
5
  }
6
}

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 セレクター の拡張 of S#

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

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

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

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

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

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

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

package.json support#

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

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

以前からモバイルではファビコンとサイト名が検索結果に表示されていました。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

Webpack との互換性#

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

将来性#

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

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