2024-07-01のJS: ES2024、Playwright v1.45.0、e18e(Ecosystem Performance) (#1204)

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update 698 draft

* Update _i18n/ja/_posts/2024/2024-07-01-es2024-playwright-v1.45.0-e18eecosystem-performance.md

* Delete _i18n/ja/_posts/2024/2024-07-01-698draft.md

* Update _i18n/ja/_posts/2024/2024-07-01-es2024-playwright-v1.45.0-e18eecosystem-performance.md

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: azu

_i18n/ja/_posts/2024/2024-07-01-es2024-playwright-v1.45.0-e18eecosystem-performance.md

@@ -0,0 +1,225 @@
+---
+title: "2024-07-01のJS: ES2024、Playwright v1.45.0、e18e(Ecosystem Performance) "
+author: "azu"
+layout: post
+date: 2024-07-01T13:22:00.731Z
+category: JSer
+tags:
+- ECMAScript
+- React
+- npm
+- nodejs
+- TypeScript
+
+---
+
+JSer.info #698 - ECMAScript 2024が正式にリリースされました。
+
+- [Release ES2024 Candidate February 28th 2024 · tc39/ecma262](https://github.com/tc39/ecma262/releases/tag/es2024-candidate-2024-02-28)
+
+ES2024では、`Object.groupBy`/`Map.groupBy`、`Promise.withResolvers`、`ArrayBuffers.prototype.resize`、`Atomics.waitAsync`などが追加されています。
+次の記事でも詳しく解説されています。
+
+- [Ecma International approves ECMAScript 2024: What’s new?](https://2ality.com/2024/06/ecmascript-2024.html)
+
+---
+
+Playwright v1.45.0がリリースされました。
+
+- [Release v1.45.0 · microsoft/playwright](https://github.com/microsoft/playwright/releases/tag/v1.45.0)
+
+時間を操作できるClock APIの追加、`--fail-on-flaky-tests`フラグの追加、`testConfig. respectGitIgnore`の追加などが行われています。
+
+---
+
+e18e (Ecosystem Performance) というプロジェクトが始まりました。
+
+- [e18e/e18e](https://github.com/e18e/e18e)
+
+e18eは、JavaScript エコシステムのパフォーマンスの向上に取り組むプロジェクトです。
+
+現状では、JavaScriptのパッケージに関するガイドラインなどをまとめています。
+依存を最新化するcleanup、無駄な依存を減らすspeedup、代替え方法を提供するlevelupという項目でそれぞれガイドが書かれています。
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Node.js — Node v20.15.0 (LTS)
+[nodejs.org/en/blog/release/v20.15.0](https://nodejs.org/en/blog/release/v20.15.0 "Node.js — Node v20.15.0 (LTS)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v20.15.0リリース。
+`node:test`が`plan`メソッドをサポート、`--inspect-wait`フラグを追加、`zlib.crc32()`を追加、`--disable-wasm-trap-handler`フラグを追加など
+
+
+----
+
+## Release ES2024 Candidate February 28th 2024 · tc39/ecma262
+[github.com/tc39/ecma262/releases/tag/es2024-candidate-2024-02-28](https://github.com/tc39/ecma262/releases/tag/es2024-candidate-2024-02-28 "Release ES2024 Candidate February 28th 2024 · tc39/ecma262")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">news</span></p>
+
+ECMAScript 2024がEcma GAで承認されたため正式にリリースされた。
+
+- [Ecma International approves ECMAScript 2024: What’s new?](https://2ality.com/2024/06/ecmascript-2024.html "Ecma International approves ECMAScript 2024: What’s new?")
+
+----
+
+## Announcing Rspack v1.0 Alpha - Rspack
+[www.rspack.dev/blog/announcing-1-0-alpha](https://www.rspack.dev/blog/announcing-1-0-alpha "Announcing Rspack v1.0 Alpha - Rspack")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">rspack</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Rspack 1.0 Aplhaリリース
+`optimization.concatenateModule`の有効か、Lightning CSSをビルトインサポート。
+オプションを一部変更など
+
+
+----
+
+## Release Version 17.0.0 Release Notes · facebook/relay
+[github.com/facebook/relay/releases/tag/v17.0.0](https://github.com/facebook/relay/releases/tag/v17.0.0 "Release Version 17.0.0 Release Notes · facebook/relay")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">GraphQL</span> <span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Relay v17.0.0リリース。
+Schema Validationの追加、explicit error handlingとsemantic nullabilityを実験的に追加など
+
+
+----
+
+## Release v1.45.0 · microsoft/playwright
+[github.com/microsoft/playwright/releases/tag/v1.45.0](https://github.com/microsoft/playwright/releases/tag/v1.45.0 "Release v1.45.0 · microsoft/playwright")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">playwright</span> <span class="jser-tag">ReleaseNote</span></p>
+
+playwright v1.45.0リリース。
+時間を操作できるClock APIの追加、`--fail-on-flaky-tests`フラグの追加、`testConfig. respectGitIgnore`の追加など
+
+
+----
+
+## Introducing React-Admin V5
+[marmelab.com/blog/2024/06/20/react-admin-v5.html](https://marmelab.com/blog/2024/06/20/react-admin-v5.html "Introducing React-Admin V5")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+React-admin v5 リリース
+
+- [Release 5.0.0 · marmelab/react-admin](https://github.com/marmelab/react-admin/releases/tag/v5.0.0 "Release 5.0.0 · marmelab/react-admin")
+
+----
+
+## Polyfill supply chain attack hits 100K+ sites
+[sansec.io/research/polyfill-supply-chain-attack](https://sansec.io/research/polyfill-supply-chain-attack "Polyfill supply chain attack hits 100K+ sites")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">polyfill</span> <span class="jser-tag">security</span> <span class="jser-tag">news</span></p>
+
+`polyfill.io`から読み込んでるコードにはマルウェア的なバックドアが含まれるようになったという話。
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## New JavaScript Set methods | MDN Blog
+[developer.mozilla.org/en-US/blog/javascript-set-methods/](https://developer.mozilla.org/en-US/blog/javascript-set-methods/ "New JavaScript Set methods | MDN Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">ECMAScript</span> <span class="jser-tag">article</span></p>
+
+ES2025に入るSet Methodsについて。
+Firefox 127で実装されている
+
+
+----
+
+## TypeScript v4.9からv5.5で追加された機能のおさらい - STORES Product Blog
+[product.st.inc/entry/2024/06/24/152109](https://product.st.inc/entry/2024/06/24/152109 "TypeScript v4.9からv5.5で追加された機能のおさらい - STORES Product Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p>
+
+最近のTypeScriptに追加された構文や型推論の機能について
+
+
+----
+
+## Ecma International approves ECMAScript 2024: What’s new?
+[2ality.com/2024/06/ecmascript-2024.html](https://2ality.com/2024/06/ecmascript-2024.html "Ecma International approves ECMAScript 2024: What’s new?")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">article</span></p>
+
+ES2024で追加された機能や構文についてのまとめ。
+`Object.groupBy`/`Map.groupBy`、`Promise.withResolvers`、`ArrayBuffers.prototype.resize`、`Atomics.waitAsync`など
+
+
+----
+
+## Bun の非互換な拡張 API - moriken&#039;s project
+[scrapbox.io/petamoriken/Bun\_%E3%81%AE%E9%9D%9E%E4%BA%92%E6%8F%9B%E3%81%AA%E6%8B%A1%E5%BC%B5\_API](https://scrapbox.io/petamoriken/Bun_%E3%81%AE%E9%9D%9E%E4%BA%92%E6%8F%9B%E3%81%AA%E6%8B%A1%E5%BC%B5_API "Bun の非互換な拡張 API - moriken&#039;s project")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">article</span></p>
+
+Bunの非標準な拡張APIについて
+
+
+----
+
+## Migrating to Next.js App Router with zero downtime — WorkOS
+[workos.com/blog/migrating-to-next-js-app-router-with-zero-downtime](https://workos.com/blog/migrating-to-next-js-app-router-with-zero-downtime "Migrating to Next.js App Router with zero downtime — WorkOS")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">article</span></p>
+
+Next.jsのPages RouterからApp Routerへの段階的な移行方法について。
+
+1. Next.jsのアップデート
+2. `useRouter`の移行
+3. 一時的な`/app/new`を作成
+4. `rewrites`を使ってクエリでのリダイレクト
+5. `/pages`の削除
+
+という手順で移行する方法について
+
+
+----
+
+## React 19 and Suspense - A Drama in 3 Acts | TkDodo&#039;s blog
+[tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts](https://tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts "React 19 and Suspense - A Drama in 3 Acts | TkDodo&#039;s blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">article</span></p>
+
+React 19 RCでのSuspense内の挙動の変更について。
+fetch-on-renderとrender-as-your-fetchのパターン、Fetch以外の非同期処理、React 19での修正予定についてなど
+
+
+----
+
+## Inline conditionals in CSS, now? • Lea Verou
+[lea.verou.me/blog/2024/css-conditionals-now/](https://lea.verou.me/blog/2024/css-conditionals-now/ "Inline conditionals in CSS, now? • Lea Verou")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p>
+
+CSSでif文を表現するテクニックについて。
+Binary Linear Interpolation、Toggles、Paused animations、Type Grinding、Variable animation nameなど
+
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## e18e/e18e
+[github.com/e18e/e18e](https://github.com/e18e/e18e "e18e/e18e")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">npm</span> <span class="jser-tag">performance</span> <span class="jser-tag">document</span></p>
+
+JavaScriptのパッケージに関するガイドライン。
+依存を最新化するcleanup、無駄な依存を減らすspeedup、代替え方法を提供するlevelupという項目でそれぞれガイドが書かれている
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## es-tooling/eslint-plugin-depend: An ESLint plugin for suggesting optimisations in choice of dependency, native equivalents, etc.
+[github.com/es-tooling/eslint-plugin-depend](https://github.com/es-tooling/eslint-plugin-depend "es-tooling/eslint-plugin-depend: An ESLint plugin for suggesting optimisations in choice of dependency, native equivalents, etc.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">plugin</span> <span class="jser-tag">npm</span></p>
+
+ネイティブで利用できるため無駄な依存やメンテナンスされていないパッケージなどを検出するESLintルール
+
+
+----