|
| 1 | +--- |
| 2 | +title: "2022-04-06のJS: React 18、Vite 2.9.0、Firefoxの新しいパフォーマンスツール" |
| 3 | +author: "azu" |
| 4 | +layout: post |
| 5 | +date : 2022-04-06T09:31:54.356Z |
| 6 | +category: JSer |
| 7 | +tags: |
| 8 | +- React |
| 9 | +- performance |
| 10 | +- Chrome |
| 11 | +- Firefox |
| 12 | +- HTML |
| 13 | + |
| 14 | +--- |
| 15 | + |
| 16 | +JSer.info #586 - React 18が正式リリースされました。 |
| 17 | + |
| 18 | +- [React v18.0 – React Blog](https://reactjs.org/blog/2022/03/29/react-v18.html) |
| 19 | + |
| 20 | +Internet Explorerのサポートが終了されています。 |
| 21 | + |
| 22 | +主な変更としてConcurrent Renderingに対応するための変更と新しいAPIが追加されています。 |
| 23 | +setStateの呼び出しを自動的にバッチ化とopt-outするための`flushSync`を追加、緊急と緊急ではない状態の更新を扱うTransition APIがされています。 |
| 24 | + |
| 25 | +クライアントの`ReactDOM.render`とPReactDOM.hydrate`とサーバの`renderToString`はそれぞれ非推奨となっています。 |
| 26 | +これに対応する新しいAPIとして、クライアントに`createRoot`/`hydrateRoot`、サーバに`renderToPipeableStream`/`renderToReadableStream`が追加されています。 |
| 27 | + |
| 28 | +また、`<StrictMode>`が開発時は再マウントをテストする挙動に変更、`useId`/`useSyncExternalStore`/`useInsertionEffect`のHooksの追加なども行われています。 |
| 29 | + |
| 30 | +詳しいマイグレーション方法については次のドキュメントが公開されています。 |
| 31 | + |
| 32 | +- [How to Upgrade to React 18 – React Blog](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) |
| 33 | + |
| 34 | +TypeScriptの型定義はまだReact 18の対応版が公開されていませんが、次のIssueとPRで対応されています。 |
| 35 | + |
| 36 | +- [[RFC] React 18 and types-only breaking changes · Issue #46691 · DefinitelyTyped/DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/46691) |
| 37 | + - [[react] React 18 types by eps1lon · Pull Request #56210 · DefinitelyTyped/DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) |
| 38 | + |
| 39 | +React周辺のツールやライブラリのReact 18対応については、次の記事でまとめられています。 |
| 40 | + |
| 41 | +- [React 周辺ツールの React v18 サポート](https://zenn.dev/arayaryoma/scraps/3845eb077129b6) |
| 42 | + |
| 43 | +--- |
| 44 | + |
| 45 | +Vite 2.9.0がリリースされました。 |
| 46 | + |
| 47 | +- [vite/CHANGELOG.md at main · vitejs/vite](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#290-2022-03-30) |
| 48 | + |
| 49 | +依存関係のscanとpre-bundleの処理を改善、実験的にCSSのSource Mapのサポート、Web WorkerのSource Mapサポートの改善が含まれています。 |
| 50 | +Glob Importsに`{ as: 'raw' }`を追加し、`{ assert: { type: 'raw' }}`は非推奨化されています。 |
| 51 | + |
| 52 | +`{ 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です。そのため読み込むモジュールの評価方法を変更する構文ではありません。 |
| 53 | + |
| 54 | +一方で、読み込むモジュールの評価方法を指定するProposalとして[Import Reflection](https://github.com/tc39/proposal-import-reflection)があります。Vite 2.9では、こちらのImport Reflectionを意識した構文に変更されました。 |
| 55 | + |
| 56 | +--- |
| 57 | + |
| 58 | +Firefoxのパフォーマンスツールが新しくなっています。 |
| 59 | + |
| 60 | +- [Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog](https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/) |
| 61 | + |
| 62 | +UIも大きく変わり、取得できるデータもWebサイトや動画などの特性に合わせたプリセットが用意されていて、それぞれに合わせたプロファイルが取れるようになっています。 |
| 63 | +また、取得したパフォーマンスデータは https://profiler.firefox.com/ で表示と共有ができるようになっています。 |
| 64 | + |
| 65 | +---- |
| 66 | + |
| 67 | +<h1 class="site-genre">ヘッドライン</h1> |
| 68 | + |
| 69 | +---- |
| 70 | + |
| 71 | +## React v18.0 – React Blog |
| 72 | +[reactjs.org/blog/2022/03/29/react-v18.html](https://reactjs.org/blog/2022/03/29/react-v18.html "React v18.0 – React Blog") |
| 73 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">ReleaseNote</span></p> |
| 74 | + |
| 75 | +React 18リリース。 |
| 76 | +Concurrent Renderingに対応するための変更と新しいAPIが追加される。 |
| 77 | +setStateの呼び出しを自動的にバッチ化とopt-outするための`flushSync`を追加、ページ遷移時の状態を扱うTransition APIを追加。 |
| 78 | +クライアントに`createRoot`/`hydrateRoot`、サーバに`renderToPipeableStream`/`renderToReadableStream`を追加。 |
| 79 | +`<StrictMode>`が開発時は再マウントをテストする挙動に変更、`useId`/`useSyncExternalStore`/`useInsertionEffect`のHooksの追加など。 |
| 80 | + |
| 81 | +- [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") |
| 82 | + |
| 83 | +---- |
| 84 | + |
| 85 | +## Release v6.3.0 · remix-run/react-router |
| 86 | +[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") |
| 87 | +<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> |
| 88 | + |
| 89 | +React Router 6.3.0リリース。 |
| 90 | +v5からv6に移行を補助するための`react-router-dom-v5-compat`モジュールの追加 |
| 91 | + |
| 92 | +- [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") |
| 93 | + |
| 94 | +---- |
| 95 | + |
| 96 | +## Chromium Blog: Chrome 101: Federated Credential Management Origin Trial, Media Capabilities for WebRTC, and More |
| 97 | +[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") |
| 98 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p> |
| 99 | + |
| 100 | +Chrome 101ベータリリース。 |
| 101 | +UA文字列の削減の開始。 |
| 102 | +Origin TrialとしてFedCMの追加、Priority Hintsがデフォルトで有効化。 |
| 103 | +`AudioContext.outputLatency`の実装、CSSの`ont-palette`プロパティの実装、MediaCapabilities APIがWebRTCをサポート。 |
| 104 | +Third-Party contextでのWebSQLのサポートを削除など |
| 105 | + |
| 106 | +- [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") |
| 107 | + |
| 108 | +---- |
| 109 | + |
| 110 | +## Announcing React Native 0.68 · React Native |
| 111 | +[reactnative.dev/blog/2022/03/30/version-068](https://reactnative.dev/blog/2022/03/30/version-068 "Announcing React Native 0.68 · React Native") |
| 112 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">iOS</span> <span class="jser-tag">Android</span> <span class="jser-tag">ReleaseNote</span></p> |
| 113 | + |
| 114 | +React Native 0.68リリース。 |
| 115 | +依存関係のアップデート、opt-inでNew Architectureへの対応に対応。 |
| 116 | +React 18の対応は含まれていない。 |
| 117 | + |
| 118 | + |
| 119 | +---- |
| 120 | + |
| 121 | +## Release 0.7.0 · facebookexperimental/Recoil |
| 122 | +[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") |
| 123 | +<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> |
| 124 | + |
| 125 | +Recoil 0.7.0リリース。 |
| 126 | +`atom()`と`atomFamily()`に`default`オプションを追加、Snapshotに`getStoreID()`メソッドの追加など |
| 127 | + |
| 128 | + |
| 129 | +---- |
| 130 | + |
| 131 | +## ECMAScript proposal updates @ 2022-03 | ECMAScript Daily |
| 132 | +[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") |
| 133 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">proposal</span> <span class="jser-tag">news</span></p> |
| 134 | + |
| 135 | +2022年3月のTC39 MeetingでのECMAScript ProposalのStage変更まとめ。 |
| 136 | +Type AnnotationsがStage 1に、DecoratorがStage 3となった。 |
| 137 | + |
| 138 | +- [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 👩💻👨💻") |
| 139 | + |
| 140 | +---- |
| 141 | + |
| 142 | +## vite/CHANGELOG.md at main · vitejs/vite |
| 143 | +[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") |
| 144 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">vite</span> <span class="jser-tag">ReleaseNote</span></p> |
| 145 | + |
| 146 | +Vite 2.9.0リリース。 |
| 147 | +依存関係のscanとpre-bundleの処理を改善、実験的にCSSのSource Mapのサポート、Web WorkerのSource Mapサポートの改善。 |
| 148 | +Glob Importsに`{ as: 'raw' }`を追加し、`{ assert: { type: 'raw' }}`は非推奨化。 |
| 149 | +Plugin向けの変更として、ClientとServer間をWebSocketsでやりとりできるAPIの追加など |
| 150 | + |
| 151 | + |
| 152 | +---- |
| 153 | + |
| 154 | +## Electron 18.0.0 | Electron |
| 155 | +[www.electronjs.org/blog/electron-18-0](https://www.electronjs.org/blog/electron-18-0 "Electron 18.0.0 | Electron") |
| 156 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Electron</span> <span class="jser-tag">ReleaseNote</span></p> |
| 157 | + |
| 158 | +Electron 18.0.0リリース。 |
| 159 | +Chromium 100、Node.js 16.13.2、V8 10.0へアップデート。 |
| 160 | +Electron 15で`nativeWindowOpen: true`がデフォルトとなったため、これを無効化するためだけに残されていた`nativeWindowOpen`オプションが削除された。 |
| 161 | + |
| 162 | + |
| 163 | +---- |
| 164 | +<h1 class="site-genre">アーティクル</h1> |
| 165 | + |
| 166 | +---- |
| 167 | + |
| 168 | +## Performance Tool in Firefox DevTools Reloaded - Mozilla Hacks - the Web developer blog |
| 169 | +[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") |
| 170 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Firefox</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p> |
| 171 | + |
| 172 | +Firefoxのパフォーマンスタブが新しくなる。 |
| 173 | +プロファイルを記録し、そのパフォーマンスデータを https://profiler.firefox.com/ で表示と共有ができるようになる。 |
| 174 | + |
| 175 | +- [Firefox Profiler](https://profiler.firefox.com/ "Firefox Profiler") |
| 176 | + |
| 177 | +---- |
| 178 | + |
| 179 | +## What's New In DevTools (Chrome 100) - Chrome Developers |
| 180 | +[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") |
| 181 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">article</span></p> |
| 182 | + |
| 183 | +Chrome 100の開発者ツールの変更点について。 |
| 184 | +`@support`のサポート、Recorderで`data-test`属性などのサポート、記録済みのセレクタの変更をサポート。 |
| 185 | +"Droppped frames"を"Partially presented frames"という表現に変更など |
| 186 | + |
| 187 | + |
| 188 | +---- |
| 189 | + |
| 190 | +## When does React render your component? |
| 191 | +[www.zhenghao.io/posts/react-rerender](https://www.zhenghao.io/posts/react-rerender "When does React render your component?") |
| 192 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">article</span> <span class="jser-tag">performance</span></p> |
| 193 | + |
| 194 | +Reactコンポーネントがいつレンダリングされるかについて書かれた記事。 |
| 195 | +Reactコンポーネントが再レンダリングされる条件、PropsとChildコンポーネントのレンダリング、Contextと再レンダリングについてなど |
| 196 | + |
| 197 | + |
| 198 | +---- |
| 199 | + |
| 200 | +## Understanding Layout Algorithms |
| 201 | +[www.joshwcomeau.com/css/understanding-layout-algorithms/](https://www.joshwcomeau.com/css/understanding-layout-algorithms/ "Understanding Layout Algorithms") |
| 202 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p> |
| 203 | + |
| 204 | +CSSのレイアウトアルゴリズム(レイアウトモード)について。 |
| 205 | +それぞれのレイアウトアルゴリズムによって同じプロパティでもどのように処理されるかは異なる。プロパティはレイアウトアルゴリズムという関数に渡される引数のようなものという話。 |
| 206 | + |
| 207 | + |
| 208 | +---- |
| 209 | + |
| 210 | +## Locale Aware Sorting in JavaScript |
| 211 | +[elijahmanor.com/byte/js-locale-sort](https://elijahmanor.com/byte/js-locale-sort "Locale Aware Sorting in JavaScript") |
| 212 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">i18n</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p> |
| 213 | + |
| 214 | +`Intl.Collator`を使ったローカライズされた文字列のソートについて |
| 215 | + |
| 216 | + |
| 217 | +---- |
| 218 | +<h1 class="site-genre">サイト、サービス、ドキュメント</h1> |
| 219 | + |
| 220 | +---- |
| 221 | + |
| 222 | +## Shakerphobia |
| 223 | +[shakerphobia.netlify.app/](https://shakerphobia.netlify.app/ "Shakerphobia") |
| 224 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">bundler</span></p> |
| 225 | + |
| 226 | +npmパッケージ時からimportするものを指定し、Tree Shaking後のbundle sizeを計測するツール |
| 227 | + |
| 228 | + |
| 229 | +---- |
| 230 | + |
| 231 | +## nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill |
| 232 | +[github.com/nuxodin/dialog-polyfill](https://github.com/nuxodin/dialog-polyfill "nuxodin/dialog-polyfill: \"insert and thats it\"-dialog-polyfill") |
| 233 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">polyfill</span> <span class="jser-tag">JavaScript</span></p> |
| 234 | + |
| 235 | +Dialog要素のpolyfillライブラリ |
| 236 | + |
| 237 | + |
| 238 | +---- |
| 239 | +<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1> |
| 240 | + |
| 241 | +---- |
| 242 | + |
| 243 | +## nicolo-ribaudo/jest-light-runner: A Jest runner that runs tests directly in bare Node.js, without virtualizing the environment. |
| 244 | +[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.") |
| 245 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">jest</span> <span class="jser-tag">node.js</span> <span class="jser-tag">library</span></p> |
| 246 | + |
| 247 | +Jest向けの軽量なRunner。 |
| 248 | +`jest-runner`からテストケースごとのIsolationのサポートを取り除くことで、テストの実行をより早くしている。 |
| 249 | + |
| 250 | + |
| 251 | +---- |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments