From 22f8b4697986e65624a76c15dd819e2d09e55b16 Mon Sep 17 00:00:00 2001 From: azu Date: Wed, 30 Mar 2022 13:54:07 +0000 Subject: [PATCH 01/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-03-30-586draft.md | 32 +++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 _i18n/ja/_posts/2022/2022-03-30-586draft.md diff --git a/_i18n/ja/_posts/2022/2022-03-30-586draft.md b/_i18n/ja/_posts/2022/2022-03-30-586draft.md new file mode 100644 index 00000000000..65659db5d03 --- /dev/null +++ b/_i18n/ja/_posts/2022/2022-03-30-586draft.md @@ -0,0 +1,32 @@ +--- +title: "2022-03-30のJS: " +author: "azu" +layout: post +date : 2022-03-30T13:53:41.949Z +category: JSer +tags: +- React + +--- + +JSer.info #586 + +---- + +

ヘッドライン

+ +---- + +## React v18.0 – React Blog +[reactjs.org/blog/2022/03/29/react-v18.html](https://reactjs.org/blog/2022/03/29/react-v18.html "React v18.0 – React Blog") +

React ReleaseNote

+ +React 18リリース。 +Concurrent Renderingに対応するための変更と新しいAPIが追加される。 +setStateの呼び出しを自動的にバッチ化とopt-outするための`flushSync`を追加、ページ遷移時の状態を扱うTransition APIを追加。 +クライアントに`createRoot`/`hydrateRoot`、サーバに`renderToPipeableStream`/`renderToReadableStream`を追加。 +``が開発時は再マウントをテストする挙動に変更、`useId`/`useSyncExternalStore`/`useInsertionEffect`のHooksの追加など。 + +- [How to Upgrade to React 18 – React Blog](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html "How to Upgrade to React 18 – React Blog") + +---- From bbe65bd105dc7742ab077e141f35063d61787963 Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 31 Mar 2022 08:57:04 +0000 Subject: [PATCH 02/23] Update 586 draft --- ...-30-586draft.md => 2022-03-31-586draft.md} | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) rename _i18n/ja/_posts/2022/{2022-03-30-586draft.md => 2022-03-31-586draft.md} (55%) diff --git a/_i18n/ja/_posts/2022/2022-03-30-586draft.md b/_i18n/ja/_posts/2022/2022-03-31-586draft.md similarity index 55% rename from _i18n/ja/_posts/2022/2022-03-30-586draft.md rename to _i18n/ja/_posts/2022/2022-03-31-586draft.md index 65659db5d03..65e25cdeee9 100644 --- a/_i18n/ja/_posts/2022/2022-03-30-586draft.md +++ b/_i18n/ja/_posts/2022/2022-03-31-586draft.md @@ -1,11 +1,13 @@ --- -title: "2022-03-30のJS: " +title: "2022-03-31のJS: " author: "azu" layout: post -date : 2022-03-30T13:53:41.949Z +date : 2022-03-31T08:56:39.192Z category: JSer tags: - React +- Firefox +- performance --- @@ -30,3 +32,17 @@ setStateの呼び出しを自動的にバッチ化とopt-outするための`flus - [How to Upgrade to React 18 – React Blog](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html "How to Upgrade to React 18 – React Blog") ---- +

アーティクル

+ +---- + +## Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog +[hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/](https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/ "Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog") +

Firefox performance article

+ +Firefoxのパフォーマンスタブが新しくなる。 +プロファイルを記録し、そのパフォーマンスデータを https://profiler.firefox.com/ で表示と共有ができるようになる。 + +- [Firefox Profiler](https://profiler.firefox.com/ "Firefox Profiler") + +---- From 6e83e6a87e98a19d7489d71355a9cb29df66fa36 Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 31 Mar 2022 09:08:02 +0000 Subject: [PATCH 03/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-03-31-586draft.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/_i18n/ja/_posts/2022/2022-03-31-586draft.md b/_i18n/ja/_posts/2022/2022-03-31-586draft.md index 65e25cdeee9..b44ae0b2a23 100644 --- a/_i18n/ja/_posts/2022/2022-03-31-586draft.md +++ b/_i18n/ja/_posts/2022/2022-03-31-586draft.md @@ -2,12 +2,13 @@ title: "2022-03-31のJS: " author: "azu" layout: post -date : 2022-03-31T08:56:39.192Z +date : 2022-03-31T09:08:01.903Z category: JSer tags: - React - Firefox - performance +- Chrome --- @@ -45,4 +46,15 @@ Firefoxのパフォーマンスタブが新しくなる。 - [Firefox Profiler](https://profiler.firefox.com/ "Firefox Profiler") +---- + +## What's New In DevTools (Chrome 100) - Chrome Developers +[developer.chrome.com/blog/new-in-devtools-100/](https://developer.chrome.com/blog/new-in-devtools-100/ "What's New In DevTools (Chrome 100) - Chrome Developers") +

Chrome article

+ +Chrome 100の開発社ツールの変更点について。 +`@support`のサポート、Recorderで`data-test`属性などのサポート、記録済みのセレクタの変更をサポート。 +"Droppped frames"を"Partially presented frames"という表現に変更など + + ---- From 037d795beeb0fc51296064d2fefd130155b27bdf Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 31 Mar 2022 09:37:01 +0000 Subject: [PATCH 04/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-03-31-586draft.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/_i18n/ja/_posts/2022/2022-03-31-586draft.md b/_i18n/ja/_posts/2022/2022-03-31-586draft.md index b44ae0b2a23..c8433c7f74b 100644 --- a/_i18n/ja/_posts/2022/2022-03-31-586draft.md +++ b/_i18n/ja/_posts/2022/2022-03-31-586draft.md @@ -2,13 +2,14 @@ title: "2022-03-31のJS: " author: "azu" layout: post -date : 2022-03-31T09:08:01.903Z +date : 2022-03-31T09:37:01.017Z category: JSer tags: - React - Firefox - performance - Chrome +- HTML --- @@ -32,6 +33,15 @@ setStateの呼び出しを自動的にバッチ化とopt-outするための`flus - [How to Upgrade to React 18 – React Blog](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html "How to Upgrade to React 18 – React Blog") +---- + +## nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill +[github.com/nuxodin/dialog-polyfill](https://github.com/nuxodin/dialog-polyfill "nuxodin/dialog-polyfill: \"insert and thats it\"-dialog-polyfill") +

HTML polyfill JavaScript

+ +Dialog要素のpolyfillライブラリ + + ----

アーティクル

From 7ee5d02728b0447bc41b1b63933adca515a3e4c6 Mon Sep 17 00:00:00 2001 From: azu Date: Fri, 1 Apr 2022 14:50:35 +0000 Subject: [PATCH 05/23] Update 586 draft --- ...2-03-31-586draft.md => 2022-04-01-586draft.md} | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) rename _i18n/ja/_posts/2022/{2022-03-31-586draft.md => 2022-04-01-586draft.md} (79%) diff --git a/_i18n/ja/_posts/2022/2022-03-31-586draft.md b/_i18n/ja/_posts/2022/2022-04-01-586draft.md similarity index 79% rename from _i18n/ja/_posts/2022/2022-03-31-586draft.md rename to _i18n/ja/_posts/2022/2022-04-01-586draft.md index c8433c7f74b..33e9f249c2d 100644 --- a/_i18n/ja/_posts/2022/2022-03-31-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-01-586draft.md @@ -1,8 +1,8 @@ --- -title: "2022-03-31のJS: " +title: "2022-04-01のJS: " author: "azu" layout: post -date : 2022-03-31T09:37:01.017Z +date : 2022-04-01T14:50:14.452Z category: JSer tags: - React @@ -42,6 +42,17 @@ setStateの呼び出しを自動的にバッチ化とopt-outするための`flus Dialog要素のpolyfillライブラリ +---- + +## Release v6.3.0 · remix-run/react-router +[github.com/remix-run/react-router/releases/tag/v6.3.0](https://github.com/remix-run/react-router/releases/tag/v6.3.0 "Release v6.3.0 · remix-run/react-router") +

React library ReleaseNote

+ +React Router 6.3.0リリース。 +v5からv6に移行を補助するための`react-router-dom-v5-compat`モジュールの追加 + +- [Official v5 to v6 Migration Guide · Discussion #8753 · remix-run/react-router](https://github.com/remix-run/react-router/discussions/8753 "Official v5 to v6 Migration Guide · Discussion #8753 · remix-run/react-router") + ----

アーティクル

From 35e755e393172dede02dd4d4e55713bb9fa0bdd1 Mon Sep 17 00:00:00 2001 From: azu Date: Sat, 2 Apr 2022 13:33:31 +0000 Subject: [PATCH 06/23] Update 586 draft --- ...-04-01-586draft.md => 2022-04-02-586draft.md} | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) rename _i18n/ja/_posts/2022/{2022-04-01-586draft.md => 2022-04-02-586draft.md} (85%) diff --git a/_i18n/ja/_posts/2022/2022-04-01-586draft.md b/_i18n/ja/_posts/2022/2022-04-02-586draft.md similarity index 85% rename from _i18n/ja/_posts/2022/2022-04-01-586draft.md rename to _i18n/ja/_posts/2022/2022-04-02-586draft.md index 33e9f249c2d..4c566d591f4 100644 --- a/_i18n/ja/_posts/2022/2022-04-01-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-02-586draft.md @@ -1,13 +1,13 @@ --- -title: "2022-04-01のJS: " +title: "2022-04-02のJS: " author: "azu" layout: post -date : 2022-04-01T14:50:14.452Z +date : 2022-04-02T13:33:10.220Z category: JSer tags: - React -- Firefox - performance +- Firefox - Chrome - HTML @@ -78,4 +78,14 @@ Chrome 100の開発社ツールの変更点について。 "Droppped frames"を"Partially presented frames"という表現に変更など +---- + +## When does React render your component? +[www.zhenghao.io/posts/react-rerender](https://www.zhenghao.io/posts/react-rerender "When does React render your component?") +

React article performance

+ +Reactコンポーネントがいつレンダリングされるかについて書かれた記事。 +Reactコンポーネントが再レンダリングされる条件、PropsとChildコンポーネントのレンダリング、Contextと再レンダリングについてなど + + ---- From 8fc31d14f2dc7380fabf125da93f835380e7c934 Mon Sep 17 00:00:00 2001 From: azu Date: Sat, 2 Apr 2022 14:56:37 +0000 Subject: [PATCH 07/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-04-02-586draft.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/_i18n/ja/_posts/2022/2022-04-02-586draft.md b/_i18n/ja/_posts/2022/2022-04-02-586draft.md index 4c566d591f4..8062e435ad4 100644 --- a/_i18n/ja/_posts/2022/2022-04-02-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-02-586draft.md @@ -2,13 +2,13 @@ title: "2022-04-02のJS: " author: "azu" layout: post -date : 2022-04-02T13:33:10.220Z +date : 2022-04-02T14:56:37.667Z category: JSer tags: - React - performance -- Firefox - Chrome +- Firefox - HTML --- @@ -53,6 +53,20 @@ v5からv6に移行を補助するための`react-router-dom-v5-compat`モジュ - [Official v5 to v6 Migration Guide · Discussion #8753 · remix-run/react-router](https://github.com/remix-run/react-router/discussions/8753 "Official v5 to v6 Migration Guide · Discussion #8753 · remix-run/react-router") +---- + +## Chromium Blog: Chrome 101: Federated Credential Management Origin Trial, Media Capabilities for WebRTC, and More +[blog.chromium.org/2022/03/chrome-101-federated-credential.html](https://blog.chromium.org/2022/03/chrome-101-federated-credential.html "Chromium Blog: Chrome 101: Federated Credential Management Origin Trial, Media Capabilities for WebRTC, and More") +

Chrome ReleaseNote

+ +Chrome 101ベータリリース。 +UA文字列の削減の開始。 +Origin TrialとしてFedCMの追加、Priority Hintsがデフォルトで有効化。 +`AudioContext.outputLatency`の実装、CSSの`ont-palette`プロパティの実装、MediaCapabilities APIがWebRTCをサポート。 +Third-Party contextでのWebSQLのサポートを削除など + +- [Chromium Blog: User-Agent Reduction Origin Trial and Dates](https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html "Chromium Blog: User-Agent Reduction Origin Trial and Dates") + ----

アーティクル

From c08091d0df0537fad9b4738c5cfb43ce2baa051b Mon Sep 17 00:00:00 2001 From: azu Date: Sun, 3 Apr 2022 01:25:16 +0000 Subject: [PATCH 08/23] Update 586 draft --- ...22-04-02-586draft.md => 2022-04-03-586draft.md} | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) rename _i18n/ja/_posts/2022/{2022-04-02-586draft.md => 2022-04-03-586draft.md} (89%) diff --git a/_i18n/ja/_posts/2022/2022-04-02-586draft.md b/_i18n/ja/_posts/2022/2022-04-03-586draft.md similarity index 89% rename from _i18n/ja/_posts/2022/2022-04-02-586draft.md rename to _i18n/ja/_posts/2022/2022-04-03-586draft.md index 8062e435ad4..a159fd30fff 100644 --- a/_i18n/ja/_posts/2022/2022-04-02-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-03-586draft.md @@ -1,8 +1,8 @@ --- -title: "2022-04-02のJS: " +title: "2022-04-03のJS: " author: "azu" layout: post -date : 2022-04-02T14:56:37.667Z +date : 2022-04-03T01:25:15.921Z category: JSer tags: - React @@ -67,6 +67,16 @@ Third-Party contextでのWebSQLのサポートを削除など - [Chromium Blog: User-Agent Reduction Origin Trial and Dates](https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html "Chromium Blog: User-Agent Reduction Origin Trial and Dates") +---- + +## ECMAScript proposal updates @ 2022-03 | ECMAScript Daily +[ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update "ECMAScript proposal updates @ 2022-03 | ECMAScript Daily") +

ECMAScript proposal news

+ +2022年3月のTC39 MeetingでのECMAScript ProposalのStage変更まとめ。 +Type AnnotationsがStage 1に、DecoratorがStage 3となった。 + + ----

アーティクル

From dab03b45b0ba048521d43046e35cd080b9663d06 Mon Sep 17 00:00:00 2001 From: azu Date: Sun, 3 Apr 2022 04:47:28 +0000 Subject: [PATCH 09/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-04-03-586draft.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/_i18n/ja/_posts/2022/2022-04-03-586draft.md b/_i18n/ja/_posts/2022/2022-04-03-586draft.md index a159fd30fff..3d39ab78be5 100644 --- a/_i18n/ja/_posts/2022/2022-04-03-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-03-586draft.md @@ -2,7 +2,7 @@ title: "2022-04-03のJS: " author: "azu" layout: post -date : 2022-04-03T01:25:15.921Z +date : 2022-04-03T04:47:27.932Z category: JSer tags: - React @@ -77,6 +77,17 @@ Third-Party contextでのWebSQLのサポートを削除など Type AnnotationsがStage 1に、DecoratorがStage 3となった。 +---- + +## Announcing React Native 0.68 · React Native +[reactnative.dev/blog/2022/03/30/version-068](https://reactnative.dev/blog/2022/03/30/version-068 "Announcing React Native 0.68 · React Native") +

React iOS Android ReleaseNote

+ +React Native 0.68リリース。 +依存関係のアップデート、opt-inでNew Architectureへの対応に対応。 +React 18の対応は含まれていない。 + + ----

アーティクル

From 46007ff65c4b64bdaa46e64e2385136b941bcefc Mon Sep 17 00:00:00 2001 From: azu Date: Sun, 3 Apr 2022 04:54:55 +0000 Subject: [PATCH 10/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-04-03-586draft.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/_i18n/ja/_posts/2022/2022-04-03-586draft.md b/_i18n/ja/_posts/2022/2022-04-03-586draft.md index 3d39ab78be5..66211681883 100644 --- a/_i18n/ja/_posts/2022/2022-04-03-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-03-586draft.md @@ -2,7 +2,7 @@ title: "2022-04-03のJS: " author: "azu" layout: post -date : 2022-04-03T04:47:27.932Z +date : 2022-04-03T04:54:34.152Z category: JSer tags: - React @@ -88,6 +88,16 @@ React Native 0.68リリース。 React 18の対応は含まれていない。 +---- + +## Release 0.7.0 · facebookexperimental/Recoil +[github.com/facebookexperimental/Recoil/releases/tag/0.7.0](https://github.com/facebookexperimental/Recoil/releases/tag/0.7.0 "Release 0.7.0 · facebookexperimental/Recoil") +

React library ReleaseNote

+ +Recoil 0.7.0リリース。 +`atom()`と`atomFamily()`に`default`オプションを追加、Snapshotに`getStoreID()`メソッドの追加など + + ----

アーティクル

From 6ce6f86b18fca3897a2894c4e78747a173c19827 Mon Sep 17 00:00:00 2001 From: azu Date: Sun, 3 Apr 2022 05:53:44 +0000 Subject: [PATCH 11/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-04-03-586draft.md | 23 +++++++++++---------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/_i18n/ja/_posts/2022/2022-04-03-586draft.md b/_i18n/ja/_posts/2022/2022-04-03-586draft.md index 66211681883..3d42914008e 100644 --- a/_i18n/ja/_posts/2022/2022-04-03-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-03-586draft.md @@ -2,7 +2,7 @@ title: "2022-04-03のJS: " author: "azu" layout: post -date : 2022-04-03T04:54:34.152Z +date : 2022-04-03T05:53:20.781Z category: JSer tags: - React @@ -67,16 +67,6 @@ Third-Party contextでのWebSQLのサポートを削除など - [Chromium Blog: User-Agent Reduction Origin Trial and Dates](https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html "Chromium Blog: User-Agent Reduction Origin Trial and Dates") ----- - -## ECMAScript proposal updates @ 2022-03 | ECMAScript Daily -[ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update "ECMAScript proposal updates @ 2022-03 | ECMAScript Daily") -

ECMAScript proposal news

- -2022年3月のTC39 MeetingでのECMAScript ProposalのStage変更まとめ。 -Type AnnotationsがStage 1に、DecoratorがStage 3となった。 - - ---- ## Announcing React Native 0.68 · React Native @@ -98,6 +88,17 @@ Recoil 0.7.0リリース。 `atom()`と`atomFamily()`に`default`オプションを追加、Snapshotに`getStoreID()`メソッドの追加など +---- + +## ECMAScript proposal updates @ 2022-03 | ECMAScript Daily +[ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update "ECMAScript proposal updates @ 2022-03 | ECMAScript Daily") +

ECMAScript proposal news

+ +2022年3月のTC39 MeetingでのECMAScript ProposalのStage変更まとめ。 +Type AnnotationsがStage 1に、DecoratorがStage 3となった。 + +- [Updates from the 89th TC39 meeting - DEV Community 👩‍💻👨‍💻](https://dev.to/hemanth/updates-from-the-89th-tc39-meeting-5bkf "Updates from the 89th TC39 meeting - DEV Community 👩‍💻👨‍💻") + ----

アーティクル

From 2a5fddd4f362a7f363690dc6e452bf7b8bbf5564 Mon Sep 17 00:00:00 2001 From: azu Date: Mon, 4 Apr 2022 11:55:43 +0000 Subject: [PATCH 12/23] Update 586 draft --- ...04-03-586draft.md => 2022-04-04-586draft.md} | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) rename _i18n/ja/_posts/2022/{2022-04-03-586draft.md => 2022-04-04-586draft.md} (89%) diff --git a/_i18n/ja/_posts/2022/2022-04-03-586draft.md b/_i18n/ja/_posts/2022/2022-04-04-586draft.md similarity index 89% rename from _i18n/ja/_posts/2022/2022-04-03-586draft.md rename to _i18n/ja/_posts/2022/2022-04-04-586draft.md index 3d42914008e..1d414d64e52 100644 --- a/_i18n/ja/_posts/2022/2022-04-03-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-04-586draft.md @@ -1,8 +1,8 @@ --- -title: "2022-04-03のJS: " +title: "2022-04-04のJS: " author: "azu" layout: post -date : 2022-04-03T05:53:20.781Z +date : 2022-04-04T11:55:43.482Z category: JSer tags: - React @@ -134,4 +134,17 @@ Reactコンポーネントがいつレンダリングされるかについて書 Reactコンポーネントが再レンダリングされる条件、PropsとChildコンポーネントのレンダリング、Contextと再レンダリングについてなど +---- +

ソフトウェア、ツール、ライブラリ関係

+ +---- + +## nicolo-ribaudo/jest-light-runner: A Jest runner that runs tests directly in bare Node.js, without virtualizing the environment. +[github.com/nicolo-ribaudo/jest-light-runner](https://github.com/nicolo-ribaudo/jest-light-runner "nicolo-ribaudo/jest-light-runner: A Jest runner that runs tests directly in bare Node.js, without virtualizing the environment.") +

jest node.js library

+ +Jest向けの軽量なRunner。 +`jest-runner`からテストケースごとのIsolationのサポートを取り除くことで、テストの実行をより早くしている。 + + ---- From e004b538c7f5f34ebb26dfc03676081e0b811592 Mon Sep 17 00:00:00 2001 From: azu Date: Mon, 4 Apr 2022 13:11:43 +0000 Subject: [PATCH 13/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-04-04-586draft.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/_i18n/ja/_posts/2022/2022-04-04-586draft.md b/_i18n/ja/_posts/2022/2022-04-04-586draft.md index 1d414d64e52..ffc8dca5be8 100644 --- a/_i18n/ja/_posts/2022/2022-04-04-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-04-586draft.md @@ -2,7 +2,7 @@ title: "2022-04-04のJS: " author: "azu" layout: post -date : 2022-04-04T11:55:43.482Z +date : 2022-04-04T13:11:42.940Z category: JSer tags: - React @@ -134,6 +134,16 @@ Reactコンポーネントがいつレンダリングされるかについて書 Reactコンポーネントが再レンダリングされる条件、PropsとChildコンポーネントのレンダリング、Contextと再レンダリングについてなど +---- + +## Understanding Layout Algorithms +[www.joshwcomeau.com/css/understanding-layout-algorithms/](https://www.joshwcomeau.com/css/understanding-layout-algorithms/ "Understanding Layout Algorithms") +

CSS article

+ +CSSのレイアウトアルゴリズム(レイアウトモード)について。 +それぞれのレイアウトアルゴリズムによって同じプロパティでもどのように処理されるかは異なる。プロパティはレイアウアウトアルゴリズムという関数に渡される引数のようなものという話。 + + ----

ソフトウェア、ツール、ライブラリ関係

From 9a6df76ae0995a8fb9128d0d9666c8cea81f0f56 Mon Sep 17 00:00:00 2001 From: azu Date: Mon, 4 Apr 2022 13:12:35 +0000 Subject: [PATCH 14/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-04-04-586draft.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_i18n/ja/_posts/2022/2022-04-04-586draft.md b/_i18n/ja/_posts/2022/2022-04-04-586draft.md index ffc8dca5be8..7dbfab12769 100644 --- a/_i18n/ja/_posts/2022/2022-04-04-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-04-586draft.md @@ -2,7 +2,7 @@ title: "2022-04-04のJS: " author: "azu" layout: post -date : 2022-04-04T13:11:42.940Z +date : 2022-04-04T13:12:14.190Z category: JSer tags: - React @@ -141,7 +141,7 @@ Reactコンポーネントが再レンダリングされる条件、PropsとChil

CSS article

CSSのレイアウトアルゴリズム(レイアウトモード)について。 -それぞれのレイアウトアルゴリズムによって同じプロパティでもどのように処理されるかは異なる。プロパティはレイアウアウトアルゴリズムという関数に渡される引数のようなものという話。 +それぞれのレイアウトアルゴリズムによって同じプロパティでもどのように処理されるかは異なる。プロパティはレイアウトアルゴリズムという関数に渡される引数のようなものという話。 ---- From 9c556f02b12a26ae154a0df77ca7cec70d0b33e7 Mon Sep 17 00:00:00 2001 From: azu Date: Mon, 4 Apr 2022 14:45:30 +0000 Subject: [PATCH 15/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-04-04-586draft.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/_i18n/ja/_posts/2022/2022-04-04-586draft.md b/_i18n/ja/_posts/2022/2022-04-04-586draft.md index 7dbfab12769..39da9c7243a 100644 --- a/_i18n/ja/_posts/2022/2022-04-04-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-04-586draft.md @@ -2,7 +2,7 @@ title: "2022-04-04のJS: " author: "azu" layout: post -date : 2022-04-04T13:12:14.190Z +date : 2022-04-04T14:45:09.479Z category: JSer tags: - React @@ -99,6 +99,18 @@ Type AnnotationsがStage 1に、DecoratorがStage 3となった。 - [Updates from the 89th TC39 meeting - DEV Community 👩‍💻👨‍💻](https://dev.to/hemanth/updates-from-the-89th-tc39-meeting-5bkf "Updates from the 89th TC39 meeting - DEV Community 👩‍💻👨‍💻") +---- + +## vite/CHANGELOG.md at main · vitejs/vite +[github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30 "vite/CHANGELOG.md at main · vitejs/vite") +

vite ReleaseNote

+ +Vite 2.9.0リリース。 +依存関係のscanとpre-bundleの処理を改善、実験的にCSSのSource Mapのサポート、Web WorkerのSource Mapサポートの改善。 +Glob Importsに`{ as: 'raw' }`を追加し、`{ assert: { type: 'raw' }}`は非推奨化。 +Plugin向けの変更として、ClientとServer間をWebSocketsでやりとりできるAPIの追加など + + ----

アーティクル

From f5f32cd57ef72a0364401e912e0abaaf6f4383b1 Mon Sep 17 00:00:00 2001 From: azu Date: Mon, 4 Apr 2022 14:54:32 +0000 Subject: [PATCH 16/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-04-04-586draft.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/_i18n/ja/_posts/2022/2022-04-04-586draft.md b/_i18n/ja/_posts/2022/2022-04-04-586draft.md index 39da9c7243a..e7883ee755d 100644 --- a/_i18n/ja/_posts/2022/2022-04-04-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-04-586draft.md @@ -2,7 +2,7 @@ title: "2022-04-04のJS: " author: "azu" layout: post -date : 2022-04-04T14:45:09.479Z +date : 2022-04-04T14:54:32.073Z category: JSer tags: - React @@ -156,6 +156,18 @@ CSSのレイアウトアルゴリズム(レイアウトモード)について。 それぞれのレイアウトアルゴリズムによって同じプロパティでもどのように処理されるかは異なる。プロパティはレイアウトアルゴリズムという関数に渡される引数のようなものという話。 +---- +

サイト、サービス、ドキュメント

+ +---- + +## Shakerphobia +[shakerphobia.netlify.app/](https://shakerphobia.netlify.app/ "Shakerphobia") +

JavaScript Tools bundler

+ +npmパッケージ時からimportするものを指定し、Tree Shaking後のbundle sizeを計測するツール + + ----

ソフトウェア、ツール、ライブラリ関係

From f3dc64d6465d0bd4e050fe3cb6ac8c14ab6846f1 Mon Sep 17 00:00:00 2001 From: azu Date: Tue, 5 Apr 2022 02:25:09 +0000 Subject: [PATCH 17/23] Update 586 draft --- ...022-04-04-586draft.md => 2022-04-05-586draft.md} | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) rename _i18n/ja/_posts/2022/{2022-04-04-586draft.md => 2022-04-05-586draft.md} (95%) diff --git a/_i18n/ja/_posts/2022/2022-04-04-586draft.md b/_i18n/ja/_posts/2022/2022-04-05-586draft.md similarity index 95% rename from _i18n/ja/_posts/2022/2022-04-04-586draft.md rename to _i18n/ja/_posts/2022/2022-04-05-586draft.md index e7883ee755d..28a4c1dd124 100644 --- a/_i18n/ja/_posts/2022/2022-04-04-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-05-586draft.md @@ -1,8 +1,8 @@ --- -title: "2022-04-04のJS: " +title: "2022-04-05のJS: " author: "azu" layout: post -date : 2022-04-04T14:54:32.073Z +date : 2022-04-05T02:25:09.692Z category: JSer tags: - React @@ -156,6 +156,15 @@ CSSのレイアウトアルゴリズム(レイアウトモード)について。 それぞれのレイアウトアルゴリズムによって同じプロパティでもどのように処理されるかは異なる。プロパティはレイアウトアルゴリズムという関数に渡される引数のようなものという話。 +---- + +## Locale Aware Sorting in JavaScript +[elijahmanor.com/byte/js-locale-sort](https://elijahmanor.com/byte/js-locale-sort "Locale Aware Sorting in JavaScript") +

i18n JavaScript article

+ +`Intl.Collator`を使ったローカライズされた文字列のソートについて + + ----

サイト、サービス、ドキュメント

From 7cd0126cb9c59aef04f3fbd9e96be1c94e38b940 Mon Sep 17 00:00:00 2001 From: azu Date: Tue, 5 Apr 2022 02:31:54 +0000 Subject: [PATCH 18/23] Update 586 draft --- _i18n/ja/_posts/2022/2022-04-05-586draft.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/_i18n/ja/_posts/2022/2022-04-05-586draft.md b/_i18n/ja/_posts/2022/2022-04-05-586draft.md index 28a4c1dd124..bb50e8810b5 100644 --- a/_i18n/ja/_posts/2022/2022-04-05-586draft.md +++ b/_i18n/ja/_posts/2022/2022-04-05-586draft.md @@ -2,7 +2,7 @@ title: "2022-04-05のJS: " author: "azu" layout: post -date : 2022-04-05T02:25:09.692Z +date : 2022-04-05T02:31:54.356Z category: JSer tags: - React @@ -111,6 +111,17 @@ Glob Importsに`{ as: 'raw' }`を追加し、`{ assert: { type: 'raw' }}`は非 Plugin向けの変更として、ClientとServer間をWebSocketsでやりとりできるAPIの追加など +---- + +## Electron 18.0.0 | Electron +[www.electronjs.org/blog/electron-18-0](https://www.electronjs.org/blog/electron-18-0 "Electron 18.0.0 | Electron") +

Electron ReleaseNote

+ +Electron 18.0.0リリース。 +Chromium 100、Node.js 16.13.2、V8 10.0へアップデート。 +Electron 15で`nativeWindowOpen: true`がデフォルトとなったため、これを無効化するためだけに残されていた`nativeWindowOpen`オプションが削除された。 + + ----

アーティクル

From f3659b06c05ab25137c03749a8990746f1e862d9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 5 Apr 2022 02:47:23 +0000 Subject: [PATCH 19/23] Update _i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md --- .../2022-04-05-react-18-vite-2.9.0-firefox.md | 211 ++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 _i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md diff --git a/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md b/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md new file mode 100644 index 00000000000..33bafb8f3d9 --- /dev/null +++ b/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md @@ -0,0 +1,211 @@ +--- +title: "2022-04-05のJS: React 18、Vite 2.9.0、Firefoxの新しいパフォーマンスツール" +author: "azu" +layout: post +date : 2022-04-05T02:31:54.356Z +category: JSer +tags: +- React +- performance +- Chrome +- Firefox +- HTML + +--- + +JSer.info #586 - - [React v18.0 – React Blog](https://reactjs.org/blog/2022/03/29/react-v18.html) +- [How to Upgrade to React 18 – React Blog](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) +- [React 周辺ツールの React v18 サポート](https://zenn.dev/arayaryoma/scraps/3845eb077129b6) + +- [vite/CHANGELOG.md at main · vitejs/vite](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30) + + +- [Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog](https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/) + +---- + +

ヘッドライン

+ +---- + +## React v18.0 – React Blog +[reactjs.org/blog/2022/03/29/react-v18.html](https://reactjs.org/blog/2022/03/29/react-v18.html "React v18.0 – React Blog") +

React ReleaseNote

+ +React 18リリース。 +Concurrent Renderingに対応するための変更と新しいAPIが追加される。 +setStateの呼び出しを自動的にバッチ化とopt-outするための`flushSync`を追加、ページ遷移時の状態を扱うTransition APIを追加。 +クライアントに`createRoot`/`hydrateRoot`、サーバに`renderToPipeableStream`/`renderToReadableStream`を追加。 +``が開発時は再マウントをテストする挙動に変更、`useId`/`useSyncExternalStore`/`useInsertionEffect`のHooksの追加など。 + +- [How to Upgrade to React 18 – React Blog](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html "How to Upgrade to React 18 – React Blog") + +---- + +## nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill +[github.com/nuxodin/dialog-polyfill](https://github.com/nuxodin/dialog-polyfill "nuxodin/dialog-polyfill: \"insert and thats it\"-dialog-polyfill") +

HTML polyfill JavaScript

+ +Dialog要素のpolyfillライブラリ + + +---- + +## Release v6.3.0 · remix-run/react-router +[github.com/remix-run/react-router/releases/tag/v6.3.0](https://github.com/remix-run/react-router/releases/tag/v6.3.0 "Release v6.3.0 · remix-run/react-router") +

React library ReleaseNote

+ +React Router 6.3.0リリース。 +v5からv6に移行を補助するための`react-router-dom-v5-compat`モジュールの追加 + +- [Official v5 to v6 Migration Guide · Discussion #8753 · remix-run/react-router](https://github.com/remix-run/react-router/discussions/8753 "Official v5 to v6 Migration Guide · Discussion #8753 · remix-run/react-router") + +---- + +## Chromium Blog: Chrome 101: Federated Credential Management Origin Trial, Media Capabilities for WebRTC, and More +[blog.chromium.org/2022/03/chrome-101-federated-credential.html](https://blog.chromium.org/2022/03/chrome-101-federated-credential.html "Chromium Blog: Chrome 101: Federated Credential Management Origin Trial, Media Capabilities for WebRTC, and More") +

Chrome ReleaseNote

+ +Chrome 101ベータリリース。 +UA文字列の削減の開始。 +Origin TrialとしてFedCMの追加、Priority Hintsがデフォルトで有効化。 +`AudioContext.outputLatency`の実装、CSSの`ont-palette`プロパティの実装、MediaCapabilities APIがWebRTCをサポート。 +Third-Party contextでのWebSQLのサポートを削除など + +- [Chromium Blog: User-Agent Reduction Origin Trial and Dates](https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html "Chromium Blog: User-Agent Reduction Origin Trial and Dates") + +---- + +## Announcing React Native 0.68 · React Native +[reactnative.dev/blog/2022/03/30/version-068](https://reactnative.dev/blog/2022/03/30/version-068 "Announcing React Native 0.68 · React Native") +

React iOS Android ReleaseNote

+ +React Native 0.68リリース。 +依存関係のアップデート、opt-inでNew Architectureへの対応に対応。 +React 18の対応は含まれていない。 + + +---- + +## Release 0.7.0 · facebookexperimental/Recoil +[github.com/facebookexperimental/Recoil/releases/tag/0.7.0](https://github.com/facebookexperimental/Recoil/releases/tag/0.7.0 "Release 0.7.0 · facebookexperimental/Recoil") +

React library ReleaseNote

+ +Recoil 0.7.0リリース。 +`atom()`と`atomFamily()`に`default`オプションを追加、Snapshotに`getStoreID()`メソッドの追加など + + +---- + +## ECMAScript proposal updates @ 2022-03 | ECMAScript Daily +[ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update "ECMAScript proposal updates @ 2022-03 | ECMAScript Daily") +

ECMAScript proposal news

+ +2022年3月のTC39 MeetingでのECMAScript ProposalのStage変更まとめ。 +Type AnnotationsがStage 1に、DecoratorがStage 3となった。 + +- [Updates from the 89th TC39 meeting - DEV Community 👩‍💻👨‍💻](https://dev.to/hemanth/updates-from-the-89th-tc39-meeting-5bkf "Updates from the 89th TC39 meeting - DEV Community 👩‍💻👨‍💻") + +---- + +## vite/CHANGELOG.md at main · vitejs/vite +[github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30 "vite/CHANGELOG.md at main · vitejs/vite") +

vite ReleaseNote

+ +Vite 2.9.0リリース。 +依存関係のscanとpre-bundleの処理を改善、実験的にCSSのSource Mapのサポート、Web WorkerのSource Mapサポートの改善。 +Glob Importsに`{ as: 'raw' }`を追加し、`{ assert: { type: 'raw' }}`は非推奨化。 +Plugin向けの変更として、ClientとServer間をWebSocketsでやりとりできるAPIの追加など + + +---- + +## Electron 18.0.0 | Electron +[www.electronjs.org/blog/electron-18-0](https://www.electronjs.org/blog/electron-18-0 "Electron 18.0.0 | Electron") +

Electron ReleaseNote

+ +Electron 18.0.0リリース。 +Chromium 100、Node.js 16.13.2、V8 10.0へアップデート。 +Electron 15で`nativeWindowOpen: true`がデフォルトとなったため、これを無効化するためだけに残されていた`nativeWindowOpen`オプションが削除された。 + + +---- +

アーティクル

+ +---- + +## Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog +[hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/](https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/ "Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog") +

Firefox performance article

+ +Firefoxのパフォーマンスタブが新しくなる。 +プロファイルを記録し、そのパフォーマンスデータを https://profiler.firefox.com/ で表示と共有ができるようになる。 + +- [Firefox Profiler](https://profiler.firefox.com/ "Firefox Profiler") + +---- + +## What's New In DevTools (Chrome 100) - Chrome Developers +[developer.chrome.com/blog/new-in-devtools-100/](https://developer.chrome.com/blog/new-in-devtools-100/ "What's New In DevTools (Chrome 100) - Chrome Developers") +

Chrome article

+ +Chrome 100の開発社ツールの変更点について。 +`@support`のサポート、Recorderで`data-test`属性などのサポート、記録済みのセレクタの変更をサポート。 +"Droppped frames"を"Partially presented frames"という表現に変更など + + +---- + +## When does React render your component? +[www.zhenghao.io/posts/react-rerender](https://www.zhenghao.io/posts/react-rerender "When does React render your component?") +

React article performance

+ +Reactコンポーネントがいつレンダリングされるかについて書かれた記事。 +Reactコンポーネントが再レンダリングされる条件、PropsとChildコンポーネントのレンダリング、Contextと再レンダリングについてなど + + +---- + +## Understanding Layout Algorithms +[www.joshwcomeau.com/css/understanding-layout-algorithms/](https://www.joshwcomeau.com/css/understanding-layout-algorithms/ "Understanding Layout Algorithms") +

CSS article

+ +CSSのレイアウトアルゴリズム(レイアウトモード)について。 +それぞれのレイアウトアルゴリズムによって同じプロパティでもどのように処理されるかは異なる。プロパティはレイアウトアルゴリズムという関数に渡される引数のようなものという話。 + + +---- + +## Locale Aware Sorting in JavaScript +[elijahmanor.com/byte/js-locale-sort](https://elijahmanor.com/byte/js-locale-sort "Locale Aware Sorting in JavaScript") +

i18n JavaScript article

+ +`Intl.Collator`を使ったローカライズされた文字列のソートについて + + +---- +

サイト、サービス、ドキュメント

+ +---- + +## Shakerphobia +[shakerphobia.netlify.app/](https://shakerphobia.netlify.app/ "Shakerphobia") +

JavaScript Tools bundler

+ +npmパッケージ時からimportするものを指定し、Tree Shaking後のbundle sizeを計測するツール + + +---- +

ソフトウェア、ツール、ライブラリ関係

+ +---- + +## nicolo-ribaudo/jest-light-runner: A Jest runner that runs tests directly in bare Node.js, without virtualizing the environment. +[github.com/nicolo-ribaudo/jest-light-runner](https://github.com/nicolo-ribaudo/jest-light-runner "nicolo-ribaudo/jest-light-runner: A Jest runner that runs tests directly in bare Node.js, without virtualizing the environment.") +

jest node.js library

+ +Jest向けの軽量なRunner。 +`jest-runner`からテストケースごとのIsolationのサポートを取り除くことで、テストの実行をより早くしている。 + + +---- From e4b126ed7935533d955a3bd920aeac48d934773e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 5 Apr 2022 02:47:24 +0000 Subject: [PATCH 20/23] Delete _i18n/ja/_posts/2022/2022-04-05-586draft.md --- _i18n/ja/_posts/2022/2022-04-05-586draft.md | 204 -------------------- 1 file changed, 204 deletions(-) delete mode 100644 _i18n/ja/_posts/2022/2022-04-05-586draft.md diff --git a/_i18n/ja/_posts/2022/2022-04-05-586draft.md b/_i18n/ja/_posts/2022/2022-04-05-586draft.md deleted file mode 100644 index bb50e8810b5..00000000000 --- a/_i18n/ja/_posts/2022/2022-04-05-586draft.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: "2022-04-05のJS: " -author: "azu" -layout: post -date : 2022-04-05T02:31:54.356Z -category: JSer -tags: -- React -- performance -- Chrome -- Firefox -- HTML - ---- - -JSer.info #586 - ----- - -

ヘッドライン

- ----- - -## React v18.0 – React Blog -[reactjs.org/blog/2022/03/29/react-v18.html](https://reactjs.org/blog/2022/03/29/react-v18.html "React v18.0 – React Blog") -

React ReleaseNote

- -React 18リリース。 -Concurrent Renderingに対応するための変更と新しいAPIが追加される。 -setStateの呼び出しを自動的にバッチ化とopt-outするための`flushSync`を追加、ページ遷移時の状態を扱うTransition APIを追加。 -クライアントに`createRoot`/`hydrateRoot`、サーバに`renderToPipeableStream`/`renderToReadableStream`を追加。 -``が開発時は再マウントをテストする挙動に変更、`useId`/`useSyncExternalStore`/`useInsertionEffect`のHooksの追加など。 - -- [How to Upgrade to React 18 – React Blog](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html "How to Upgrade to React 18 – React Blog") - ----- - -## nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill -[github.com/nuxodin/dialog-polyfill](https://github.com/nuxodin/dialog-polyfill "nuxodin/dialog-polyfill: \"insert and thats it\"-dialog-polyfill") -

HTML polyfill JavaScript

- -Dialog要素のpolyfillライブラリ - - ----- - -## Release v6.3.0 · remix-run/react-router -[github.com/remix-run/react-router/releases/tag/v6.3.0](https://github.com/remix-run/react-router/releases/tag/v6.3.0 "Release v6.3.0 · remix-run/react-router") -

React library ReleaseNote

- -React Router 6.3.0リリース。 -v5からv6に移行を補助するための`react-router-dom-v5-compat`モジュールの追加 - -- [Official v5 to v6 Migration Guide · Discussion #8753 · remix-run/react-router](https://github.com/remix-run/react-router/discussions/8753 "Official v5 to v6 Migration Guide · Discussion #8753 · remix-run/react-router") - ----- - -## Chromium Blog: Chrome 101: Federated Credential Management Origin Trial, Media Capabilities for WebRTC, and More -[blog.chromium.org/2022/03/chrome-101-federated-credential.html](https://blog.chromium.org/2022/03/chrome-101-federated-credential.html "Chromium Blog: Chrome 101: Federated Credential Management Origin Trial, Media Capabilities for WebRTC, and More") -

Chrome ReleaseNote

- -Chrome 101ベータリリース。 -UA文字列の削減の開始。 -Origin TrialとしてFedCMの追加、Priority Hintsがデフォルトで有効化。 -`AudioContext.outputLatency`の実装、CSSの`ont-palette`プロパティの実装、MediaCapabilities APIがWebRTCをサポート。 -Third-Party contextでのWebSQLのサポートを削除など - -- [Chromium Blog: User-Agent Reduction Origin Trial and Dates](https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html "Chromium Blog: User-Agent Reduction Origin Trial and Dates") - ----- - -## Announcing React Native 0.68 · React Native -[reactnative.dev/blog/2022/03/30/version-068](https://reactnative.dev/blog/2022/03/30/version-068 "Announcing React Native 0.68 · React Native") -

React iOS Android ReleaseNote

- -React Native 0.68リリース。 -依存関係のアップデート、opt-inでNew Architectureへの対応に対応。 -React 18の対応は含まれていない。 - - ----- - -## Release 0.7.0 · facebookexperimental/Recoil -[github.com/facebookexperimental/Recoil/releases/tag/0.7.0](https://github.com/facebookexperimental/Recoil/releases/tag/0.7.0 "Release 0.7.0 · facebookexperimental/Recoil") -

React library ReleaseNote

- -Recoil 0.7.0リリース。 -`atom()`と`atomFamily()`に`default`オプションを追加、Snapshotに`getStoreID()`メソッドの追加など - - ----- - -## ECMAScript proposal updates @ 2022-03 | ECMAScript Daily -[ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2022/04/03/ecmascript-proposal-update "ECMAScript proposal updates @ 2022-03 | ECMAScript Daily") -

ECMAScript proposal news

- -2022年3月のTC39 MeetingでのECMAScript ProposalのStage変更まとめ。 -Type AnnotationsがStage 1に、DecoratorがStage 3となった。 - -- [Updates from the 89th TC39 meeting - DEV Community 👩‍💻👨‍💻](https://dev.to/hemanth/updates-from-the-89th-tc39-meeting-5bkf "Updates from the 89th TC39 meeting - DEV Community 👩‍💻👨‍💻") - ----- - -## vite/CHANGELOG.md at main · vitejs/vite -[github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30 "vite/CHANGELOG.md at main · vitejs/vite") -

vite ReleaseNote

- -Vite 2.9.0リリース。 -依存関係のscanとpre-bundleの処理を改善、実験的にCSSのSource Mapのサポート、Web WorkerのSource Mapサポートの改善。 -Glob Importsに`{ as: 'raw' }`を追加し、`{ assert: { type: 'raw' }}`は非推奨化。 -Plugin向けの変更として、ClientとServer間をWebSocketsでやりとりできるAPIの追加など - - ----- - -## Electron 18.0.0 | Electron -[www.electronjs.org/blog/electron-18-0](https://www.electronjs.org/blog/electron-18-0 "Electron 18.0.0 | Electron") -

Electron ReleaseNote

- -Electron 18.0.0リリース。 -Chromium 100、Node.js 16.13.2、V8 10.0へアップデート。 -Electron 15で`nativeWindowOpen: true`がデフォルトとなったため、これを無効化するためだけに残されていた`nativeWindowOpen`オプションが削除された。 - - ----- -

アーティクル

- ----- - -## Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog -[hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/](https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/ "Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog") -

Firefox performance article

- -Firefoxのパフォーマンスタブが新しくなる。 -プロファイルを記録し、そのパフォーマンスデータを https://profiler.firefox.com/ で表示と共有ができるようになる。 - -- [Firefox Profiler](https://profiler.firefox.com/ "Firefox Profiler") - ----- - -## What's New In DevTools (Chrome 100) - Chrome Developers -[developer.chrome.com/blog/new-in-devtools-100/](https://developer.chrome.com/blog/new-in-devtools-100/ "What's New In DevTools (Chrome 100) - Chrome Developers") -

Chrome article

- -Chrome 100の開発社ツールの変更点について。 -`@support`のサポート、Recorderで`data-test`属性などのサポート、記録済みのセレクタの変更をサポート。 -"Droppped frames"を"Partially presented frames"という表現に変更など - - ----- - -## When does React render your component? -[www.zhenghao.io/posts/react-rerender](https://www.zhenghao.io/posts/react-rerender "When does React render your component?") -

React article performance

- -Reactコンポーネントがいつレンダリングされるかについて書かれた記事。 -Reactコンポーネントが再レンダリングされる条件、PropsとChildコンポーネントのレンダリング、Contextと再レンダリングについてなど - - ----- - -## Understanding Layout Algorithms -[www.joshwcomeau.com/css/understanding-layout-algorithms/](https://www.joshwcomeau.com/css/understanding-layout-algorithms/ "Understanding Layout Algorithms") -

CSS article

- -CSSのレイアウトアルゴリズム(レイアウトモード)について。 -それぞれのレイアウトアルゴリズムによって同じプロパティでもどのように処理されるかは異なる。プロパティはレイアウトアルゴリズムという関数に渡される引数のようなものという話。 - - ----- - -## Locale Aware Sorting in JavaScript -[elijahmanor.com/byte/js-locale-sort](https://elijahmanor.com/byte/js-locale-sort "Locale Aware Sorting in JavaScript") -

i18n JavaScript article

- -`Intl.Collator`を使ったローカライズされた文字列のソートについて - - ----- -

サイト、サービス、ドキュメント

- ----- - -## Shakerphobia -[shakerphobia.netlify.app/](https://shakerphobia.netlify.app/ "Shakerphobia") -

JavaScript Tools bundler

- -npmパッケージ時からimportするものを指定し、Tree Shaking後のbundle sizeを計測するツール - - ----- -

ソフトウェア、ツール、ライブラリ関係

- ----- - -## nicolo-ribaudo/jest-light-runner: A Jest runner that runs tests directly in bare Node.js, without virtualizing the environment. -[github.com/nicolo-ribaudo/jest-light-runner](https://github.com/nicolo-ribaudo/jest-light-runner "nicolo-ribaudo/jest-light-runner: A Jest runner that runs tests directly in bare Node.js, without virtualizing the environment.") -

jest node.js library

- -Jest向けの軽量なRunner。 -`jest-runner`からテストケースごとのIsolationのサポートを取り除くことで、テストの実行をより早くしている。 - - ----- From dd970693598f73b0b5fce59fadea5f74beae6810 Mon Sep 17 00:00:00 2001 From: azu Date: Tue, 5 Apr 2022 11:48:37 +0900 Subject: [PATCH 21/23] Update 2022-04-05-react-18-vite-2.9.0-firefox.md --- .../2022-04-05-react-18-vite-2.9.0-firefox.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md b/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md index 33bafb8f3d9..d8963780b41 100644 --- a/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md +++ b/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md @@ -40,15 +40,6 @@ setStateの呼び出しを自動的にバッチ化とopt-outするための`flus - [How to Upgrade to React 18 – React Blog](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html "How to Upgrade to React 18 – React Blog") ----- - -## nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill -[github.com/nuxodin/dialog-polyfill](https://github.com/nuxodin/dialog-polyfill "nuxodin/dialog-polyfill: \"insert and thats it\"-dialog-polyfill") -

HTML polyfill JavaScript

- -Dialog要素のpolyfillライブラリ - - ---- ## Release v6.3.0 · remix-run/react-router @@ -149,7 +140,7 @@ Firefoxのパフォーマンスタブが新しくなる。 [developer.chrome.com/blog/new-in-devtools-100/](https://developer.chrome.com/blog/new-in-devtools-100/ "What's New In DevTools (Chrome 100) - Chrome Developers")

Chrome article

-Chrome 100の開発社ツールの変更点について。 +Chrome 100の開発者ツールの変更点について。 `@support`のサポート、Recorderで`data-test`属性などのサポート、記録済みのセレクタの変更をサポート。 "Droppped frames"を"Partially presented frames"という表現に変更など @@ -195,6 +186,15 @@ CSSのレイアウトアルゴリズム(レイアウトモード)について。 npmパッケージ時からimportするものを指定し、Tree Shaking後のbundle sizeを計測するツール +---- + +## nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill +[github.com/nuxodin/dialog-polyfill](https://github.com/nuxodin/dialog-polyfill "nuxodin/dialog-polyfill: \"insert and thats it\"-dialog-polyfill") +

HTML polyfill JavaScript

+ +Dialog要素のpolyfillライブラリ + + ----

ソフトウェア、ツール、ライブラリ関係

From 7be01513437dcdc12f56bb15adb40a3af7e4a091 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 6 Apr 2022 00:23:49 +0000 Subject: [PATCH 22/23] Update _i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md --- .../2022-04-05-react-18-vite-2.9.0-firefox.md | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md b/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md index d8963780b41..01627cb1c5d 100644 --- a/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md +++ b/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md @@ -13,15 +13,55 @@ tags: --- -JSer.info #586 - - [React v18.0 – React Blog](https://reactjs.org/blog/2022/03/29/react-v18.html) +JSer.info #586 - React 18が正式リリースされました。 + +- [React v18.0 – React Blog](https://reactjs.org/blog/2022/03/29/react-v18.html) + +Internet Explorerのサポートが終了されています。 + +主な変更としてConcurrent Renderingに対応するための変更と新しいAPIが追加されています。 +setStateの呼び出しを自動的にバッチ化とopt-outするための`flushSync`を追加、緊急と緊急ではない状態の更新を扱うTransition APIがされています。 + +クライアントの`ReactDOM.render`とPReactDOM.hydrate`とサーバの`renderToString`はそれぞれ非推奨となっています。 +これに対応する新しいAPIとして、クライアントに`createRoot`/`hydrateRoot`、サーバに`renderToPipeableStream`/`renderToReadableStream`が追加されています。 + +また、``が開発時は再マウントをテストする挙動に変更、`useId`/`useSyncExternalStore`/`useInsertionEffect`のHooksの追加なども行われています。 + +詳しいマイグレーション方法については次のドキュメントが公開されています。 + - [How to Upgrade to React 18 – React Blog](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) + +TypeScriptの型定義はまだReact 18の対応版が公開されていませんが、次のIssueとPRで対応されています。 + +- [[RFC] React 18 and types-only breaking changes · Issue #46691 · DefinitelyTyped/DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/46691) + - [[react] React 18 types by eps1lon · Pull Request #56210 · DefinitelyTyped/DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) + +React周辺のツールやライブラリのReact 18対応については、次の記事でまとめられています。 + - [React 周辺ツールの React v18 サポート](https://zenn.dev/arayaryoma/scraps/3845eb077129b6) +--- + +Vite 2.9.0がリリースされました。 + - [vite/CHANGELOG.md at main · vitejs/vite](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30) +依存関係のscanとpre-bundleの処理を改善、実験的にCSSのSource Mapのサポート、Web WorkerのSource Mapサポートの改善が含まれています。 +Glob Importsに`{ as: 'raw' }`を追加し、`{ assert: { type: 'raw' }}`は非推奨化されています。 + +`{ assert: { type: 'raw' }}`はVite 2.8で、[Import Assertions](https://github.com/tc39/proposal-import-assertions)を意識して導入された構文ですが、Import Assertionsは読み込むモジュールの`type`を検証(assert)する[目的](https://github.com/WICG/webcomponents/issues/839)のProposalです。そのため読み込むモジュールの評価方法を変更する構文ではありません。 + +一方で、読み込むモジュールの評価方法を指定するProposalとして[Import Reflection](https://github.com/tc39/proposal-import-reflection)があります。Vite 2.9では、こちらのImport Reflectionを意識した構文に変更されました。 + +--- + +Firefoxのパフォーマンスツールが新しくなっています。 - [Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog](https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/) +UIも大きく変わり、取得できるデータもWebサイトや動画などの特性に合わせたプリセットが用意されていて、それぞれに合わせたプロファイルが取れるようになっています。 +また、取得したパフォーマンスデータは https://profiler.firefox.com/ で表示と共有ができるようになっています。 + ----

ヘッドライン

From 22561bd011279fd57b31fbef6bc09201bc51fab8 Mon Sep 17 00:00:00 2001 From: azu Date: Wed, 6 Apr 2022 09:25:15 +0900 Subject: [PATCH 23/23] Update and rename 2022-04-5-react-18-vite-2.9.0-firefox.md to 2022-04-06-react-18-vite-2.9.0-firefox.md --- ...0-firefox.md => 2022-04-06-react-18-vite-2.9.0-firefox.md} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename _i18n/ja/_posts/2022/{2022-04-05-react-18-vite-2.9.0-firefox.md => 2022-04-06-react-18-vite-2.9.0-firefox.md} (99%) diff --git a/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md b/_i18n/ja/_posts/2022/2022-04-06-react-18-vite-2.9.0-firefox.md similarity index 99% rename from _i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md rename to _i18n/ja/_posts/2022/2022-04-06-react-18-vite-2.9.0-firefox.md index 01627cb1c5d..bcfed0e49fd 100644 --- a/_i18n/ja/_posts/2022/2022-04-05-react-18-vite-2.9.0-firefox.md +++ b/_i18n/ja/_posts/2022/2022-04-06-react-18-vite-2.9.0-firefox.md @@ -1,8 +1,8 @@ --- -title: "2022-04-05のJS: React 18、Vite 2.9.0、Firefoxの新しいパフォーマンスツール" +title: "2022-04-06のJS: React 18、Vite 2.9.0、Firefoxの新しいパフォーマンスツール" author: "azu" layout: post -date : 2022-04-05T02:31:54.356Z +date : 2022-04-06T09:31:54.356Z category: JSer tags: - React