Frontend Weekly 2024-07-05
ECMAScript 2024 の仕様が承認
https://github.com/tc39/ecma262/releases/tag/es2024
ES2024 の機能についての解説記事。
Ecma International approves ECMAScript 2024: What’s new?
Map.groupBy(),Object.groupBy()Promise.withResolvers()RegExp flag /v- Resizable
ArrayBuffersandSharedArrayBuffers - String methods
.isWellFormed(),.toWellFormed() Atomics.waitAsync()for async waits on shared memory
Playwright v1.45.0
Playwright v1.45.0 が 6 月 25 日にリリースされました。
https://github.com/microsoft/playwright/releases/tag/v1.45.0
Clock API
時間に依存する動作を正確にシミュレートするための Clock API が追加されました。これは今まで制御が困難であった Date や setTimeout、requestAnimationFrame などを内部的に上書きし、手動での制御を可能にします。
その他
--fail-on-flaky-tests：Flaky テストが再試行時に成功しても落とすオプションtestConfig.respectGitIgnore：.gitignore に記載されているファイルを対象に外すかどうかのオプション。testDir が設定されていない場合、デフォルトでも。gitignore をリスペクトされる。
dotenvx v1.0.0
2024 年 6 月 24 日に dotenvx v1 がリリースされました。これは dotenv 作者による dotenv の後継です。
From dotenv to dotenvx: Next Generation Config Management
dotenv の問題であった、.env ファイルの漏洩、複数環境の両立、プラットフォーム間の不一致を解決することを目的にしているようです。
プラットフォーム間の不一致：dotenvx では、npm や brew、curl など様々な手段でインストールできます。
複数環境の両立：dotenvx では -f フラグを用いて .env.* ファイルを読み込みます。これにより柔軟性を持たせています。
dotenvx run -f .env.production -- node index.js
dotenvx run -f .env.local -f .env -- node index.js.env ファイルの漏洩：dotenvx encrypt で env ファイルを暗号化できます。
Others
useMediaQuery は window オブジェクトに依存しているから SSR で動作しないし、よくある実装である useEffect などを利用したものではレイアウトシフトの原因になる。
【React】useMediaQuery は最終手段にしよう
React の内部処理をビジュアライズするツール
React Internals Explorer | Deep Dive Into React
React/Next.js の fetch 拡張の流れとキャッシュ
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
JavaScript エコシステムのパフォーマンスの向上に取り組むプロジェクト e18e
JavaScript のライブラリの依存の最適化、依存の削減などについて書かれている。