1496 文字

7 分

Frontend Weekly 2024-04-12

2024-04-12

Tech

Frontend weekly

/

ESLint

/

Next.js

/

zx

ESLint v9.0.0#

2024 年 4 月 5 日に ESLint v9 がリリースされました。

ESLint v9.0.0 released - ESLint - Pluggable JavaScript Linter

ESLint v9 では、Flat config がデフォルトになりました。今後も eslintrc を利用する場合は、ESLINT_USE_FLAT_CONFIG 環境変数を false に設定する必要があります。

他にも JSDoc 関連のルールのビルトインされていた Formatter の削除など、破壊的変更が多く行われているため、バージョンを上げる際はマイグレーションガイドをよく確認しましょう。

また既に Flat config 対応を行っていたプラグインでも、ESLint v9 には対応できていない可能性があるため注意が必要です。

Migrate to v9.x - ESLint - Pluggable JavaScript Linter

ESLint Config Inspector#

ESLint v9 から ESLint 構成ファイルを視覚化できるコマンドが追加されました。

Introducing ESLint Config Inspector - ESLint - Pluggable JavaScript Linter

次のコマンドで Config Inspector を立ち上げられます。

1
eslint --inspect-config

ESLint をインストールしていない場合は、次のコマンドで起動できます。

1
npx @eslint/config-inspector

Next.js 14.2#

2024 年 4 月 11 日に Next.js 14.2 がリリースされました。

Next.js 14.2

Turbopack を引き続き頑張ってるっぽい。他

ビルドメモリ使用量削減

大規模な Next.js アプリケーションでは、運用ビルド中に OOM が発生することが分かった
最小限の Next.js アプリで、メモリ使用量とキャッシュファイルサイズが平均 2.2 GB から 190 MB 未満に減少された

CSS・CSS Modules の最適化

ページ間を移動するときにスタイルの競合を避けるために、CSS をチャンクすることによって Next.js が本番環境で CSS を最適化する方法を更新した。

サーバーコンポーネントとクライアントコンポーネント間の Tree shaking

react-aria-components最終的なバンドルサイズが-51.3%削減された

next/font を利用している場合、エラーが出ると言っている人が複数いるので注意

zx v8.0.0#

2024 年 4 月 6 日に zx v8.0.0 がリリースされた。

https://github.com/google/zx/releases/tag/8.0.0

esbuild に移行してパッケージサイズが削減された他、データをコマンドに渡す input オプションの追加、$の同期バージョンである$.syncの追加、killメソッドの追加など。

地味に、テストに node を利用するようになっている。

データフェッチングの Suspense は非推奨#

そもそも SWR の suspense 機能は experimental だが、React と SWR の開発者はデータフェッチングに Suspense を利用することを非推奨にしている。

SWR と Suspense の問題

Suspense を使用するデータフェッチングはライブラリレベルではまだサポートされていない。

renderToPipeableStream – React

Suspense 内部のコンポーネントはサーバーサイドでも実行されるため SWR と Suspense を使用するとハイドレーションのミスマッチが発生する問題が紹介されている。

この解決策として、Suspense を含むコンポーネントを Client でのみレンダリングされるようにしたりlazy, next/dynamicなどを利用して SSR させない方法と、Dan 先生が紹介していた fallbackData を利用する方法が紹介されている。fallbackData を利用する場合、Suspense の fallback が表示されなくなる点には注意。

Suspense and Server-Side Rendering · Issue #1906 · vercel/swr

Astro が Mocha から Node.js test runner に移行した話#

Migrating 500+ tests from Mocha to Node.js | Astro

Mocha/Vitest/Jest/node の中で、ファイル毎にプロセス分離をデフォルトでしていないのは Mocha だけ。そのため、ある程度の量までは Mocha が一番早そう。多くの CI など扱える並列数がそこまで高くない場合では Mocha がなんだかんだ早いイメージがあるといった話をしている人がいた。

テストフレームワークのパフォーマンスには、キャッシュや並列処理数など様々なものが影響するため、比較が難しい。マシンの能力が十分でない場合は、利用しているテストフレームワークの並列処理を無効にするのは有効。ローカルと CI で 10 倍以上の差があるようなケースでは、テストフレームワーク差よりも記述を気にした方がいい。

XHTML は正式に非推奨#

HTML Standard

Netlify Runtime v5#

Netlify Runtime v5 がリリースされた。 App Router のキャッシュやリバリデートに対応。

Introducing the new Next.js Runtime

list-style: none スタイルを指定した ul 要素には list ロールを指定すべき …？#

“Safari において、list-style: none スタイルを指定した <ul> 要素には list ロールが自動的に付与されないため、<ul> 要素には list ロールを明示するべき”という主張。

list-style: none スタイルを指定した ul 要素には list ロールを指定すべき

ただし、これはバグではなく意図した仕様であり、慎重になるべきです。

1
This was a purposeful change due to rampant "list"-itis by web developers.
2

3
In the same way WebKit differentiates layout tables from data tables, it now differentiates layout lists from data lists. VoiceOver users always used to file bugs that there were too many "start of list" "end of list" announcements on the Web. Customers seems much happier in the 3 years since this change went in.

170179 – VoiceOver does not announce a list for groups of links when list-style: none;

“ウェブ開発者がリストを過剰に使うようになったため意図的に入った変更。VoiceOver のユーザーは、ウェブ上で「リストの開始」「リストの終了」のアナウンスが多すぎるというバグをいつも指摘していた。”

そのコンテンツをリストとして読み上げてほしいかどうかを判断して、list ロールを付けましょう。