Cybozu Frontend Monthly #52

タイトル画像

イベント概要

サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

※フロントエンドウィークリーとは

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ #サイボウズフロントエンドウィークリー で実況しています。

zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2024年11月26日

イベントページ

https://cybozu.connpass.com/event/336958/

配信URL

https://www.youtube.com/watch?v=JXpZP8_0_V8

メンバー

@b4h0_c4t@b4h0_c4t
@sajikix@sajikix
@mugi_uno@mugi_uno
@nus3_@nus3_

コンテンツ

👀 Notable Articles

State of CSS 2024

State of CSS 2024 の回答結果が公開されました。 近年、CSS エコシステムが急成長しており、多くの新機能や周辺ツールについてのアンケートが含まれています。

Feature では、Baseline 2024 の中で最も利用されているものは backdrop-filter となっており、逆に最も利用されていないものは offset-path でした。 また、リーディングリストの結果を見ると、offset-path の他に離散的なアニメーションを扱うための transition-behavior も回答者の興味を引いているようです。

CSS Framework では、 Tailwind と Bootstrap が圧倒的な利用率を誇っています。

CSS-in-JS では、CSS Modules や styled components が圧倒的な利用率を誇る中、ゼロランタイム CSS-in-JS である vanilla-extract が 7% とそこそこの利用者がついていることがわかります。

ブラウザ(非)互換性の項目では、Anchor Positiong が最も熱望されている機能である一方で、Container Queries や :has() といった既に実現されている機能に対しての投票も多かったようです。

Cypress で Firefox のテストに WebDriverIO を使い始めた

WebdriverIO の X のアカウントでポストされており、Cypress に WebdriverIO が使われるとはどういうことなのか気になって調べてみました。

Firefox が 2024 年末には Chrome DevTools Protocol(CDP)のサポートを廃止し、WebDriver BiDi への移行を推奨したことを受け、Cypress では、Firefox で使うプロトコルを CDP から WebDriver BiDi へ移行しようとしています。 https://github.com/cypress-io/cypress/blob/develop/packages/server/lib/browsers/firefox_automation.md#purpose
https://github.com/cypress-io/cypress/issues/30219

Cypress では WebDriver BiDi に対応するため、marionette-client を geckodriver に置き換えました。 https://github.com/cypress-io/cypress/pull/30250

この geckodriver への置き換えに際し、webdriverio-community が提供するラッパーライブラリを採用することで、WebDriver BiDi プロトコルが利用できるようになったようです。（おそらく。翻訳ミスってたら教えてください。） https://github.com/webdriverio-community/node-geckodriver
https://bugzilla.mozilla.org/show_bug.cgi?id=1604723

WebdriverIO は v9 リリースで、WebDriver BiDi プロトコルがサポートされ、デフォルトで使われるようになりましたし、仕様の策定が進むにつれて、関連ライブラリの対応もさらに進みそうに感じました。

Our Journey with Caching

Next.js 15 以降で Experimental で利用可能となった dynamicIO によって、今後キャッシュの取り扱いがどのように変化するかについて説明されている記事です。

Next.js 14 以前での Next.js App Router では、キャッシュ周りに関しては基本的にすべて有効であることが前提という設計であり、Client 側での Router Cache などについては Opt-out する方法もありませんでした。しかし、全体的に Opt-in の形に見直され、キャッシュが必要な部分で明示的な宣言する形に設計が変わりつつあります。

その中の一つとしての機能が dynamicIO であり、これを有効にすると、fetch() などの処理が含まれていた場合に、該当箇所について “use cache” を宣言して静的レンダリング（キャシュ対象）であることを宣言するか、あるいは <Suspence> での Wrap が必須となり、どちらも省略するとビルド時にエラーとなります。同じ Experimental な機能である PPR（Partial Prerendering）において、静的・動的の境界を <Suspense> で判断するため、dynamicIO を利用することで、必然的に動的な部分のみが <Suspense> で Wrap されていくことになり、その外側で有効に PPR が適用されるようになります。

Next.js 14 までに App Router に関してのキャッシュの知識を得たり記事を書いたりした人（私もですが…）からすると、ある意味リセットが必要となってしまいますが、個人的には従来の暗黙的な挙動が多い状態と比較すると、かなりわかりやすい形に向かっている印象があります。

Announcing TypeScript 5.7 RC

TypeScript 5.7 RC がリリースされました。予定通りに行けば 11 月の末ごろには正式版がリリースされる予定です。

今回はその中から個人的に注目しているものを紹介します。

Checks for Never-Initialized Variables

初期化していない変数に対するチェックが厳しくなりました。今まで変数の初期化チェックが甘くなる例として変数が別の関数でアクセスされる場合などがありましたが、今回の変更で部分的にこの問題が解決されています。

function foo() {
  let result: number
  function printResult() {
    console.log(result) // 初期化してないよってエラーになる(今までエラーにならなかった)
  }
}

Path Rewriting for Relative Paths

相対パスで import する際の拡張子の扱い(.js/.ts)について新しく --rewriteRelativeImportExtensions というオプションが追加されました。

そもそも ESM 環境下ではファイルの拡張子は省略できず、TS 環境下でも一般的には.jsを使う必要があります。一方、近年 ts ファイルをそのまま実行できるランタイムが増えており、このようなランタイムで実行する場合は.tsでパスを指定します。必ずそのようなランタイムで実行されることが保証できれば良いのですが、Node.js が試験的に--experimental-strip-typesオプションで TS ファイルのサポートを始めたことで、「.tsで読む場合」と「トランスパイルして.jsとしなければならない場合」の２パターンが同時に発生しうるようになりました。

このような問題を解決すべく　--rewriteRelativeImportExtensions オプションの有効化時は tsc 実行時に初めて相対パスの.ts拡張子を.jsに書き換える機能を提供します。一方で対応できない文法や機能などもあり利用するには大きな注意が必要です。基本的には--experimental-strip-typesを有効にしている環境のための対応策と考えた方が良いでしょう。

詳しくは Uhyo さんの書かれた TS 5.7 の —rewriteRelativeImportExtensions オプションを使う前に読む記事を読むと良さそうです。

Validated JSON Imports in —module nodenext

moduleオプションで nodenextを指定した場合、JSON の import では Import Attributes を利用した記法に変更しなくてはならなくなりました。

import myConfig from "./myConfig.json" with { type: "json" };

Import Attributes は今年(2024 年)10 月の TC39 meeting で Stage4 になり来年の ES2025 として入るようになる機能です。import 文の後ろに with {key:value}でメタ情報などを追加できるようになります。

現状は --module nodenext 時のみですが、今後 JSON や JS 以外のファイルを import する際は Import Attributes を利用することがデファクトになるかも知れないので覚えておくと良さそうです。

🗓 Monthly Articles

📖 Framework, Library

⚡️ Services

💬 Languages

🖥 Browsers

📝 Specifications

🦆 Others

フロントエンドエキスパートチームについて

https://speakerdeck.com/cybozuinsideout/frontendexpert-team