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を立ち上げられます。

eslint --inspect-config

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

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:testを利用するようになっている。

データフェッチングの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:testの中で、ファイル毎にプロセス分離をデフォルトでしていないのは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 ロールを指定すべき

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

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

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ロールを付けましょう。

str.length、 […str].length、 Intl.Segmenterの違い

文字数のカウントはどれが正解なのか?

• str.length：サロゲートペアをうまくカウント出来ない
• […str].length：異字体セレクタがあると上手くカウント出来ない
• Intl.Segmenter：見た目通りのカウントができる

ちゃんと計測していて良い。

概要は大量のデータを扱うと確かに遅いが、通常の利用範囲内であれば、パフォーマンス上の懸念は薄いというものだが、まとめに書かれている通り環境による差があるので、実際計測してみることに価値がある。

LocalStorageはパフォーマンスにどれほど悪影響か？実測して確かめる

rebaseとsquash merge宗派

2024年Gitワークフロー再考 | フューチャー技術ブログ