2022-05-24のJS: Deno 1.22、Storybook 6.5(webpack Lazy Compilation)、Next.js Layouts RFC

_i18n/ja/_posts/2022/2022-05-24-deno-1.22-storybook-6.5webpack-lazy-compilation-next.js-layouts-rfc.md

@@ -0,0 +1,230 @@
+---
+title: "2022-05-24のJS: Deno 1.22、Storybook 6.5(webpack Lazy Compilation)、Next.js Layouts RFC"
+author: "azu"
+layout: post
+date : 2022-05-24T03:06:17.234Z
+category: JSer
+tags:
+- video
+- Tools
+- browser
+- testing
+- google
+
+---
+
+JSer.info #593 - Deno 1.22がリリースされました。
+
+- [Deno 1.22 Release Notes](https://deno.com/blog/v1.22)
+
+Denoには、3つの型チェックモードがあります。
+
+- Full: ローカルとリモートの依存関係を含めた全ての型をチェックする
+- Local: ローカルの型のみをチェックする
+- None: 型をチェックしない
+
+1.21まではコマンドによっては"Full"モードで型チェックをしていましたが、1.22からは"Local"モードで型チェックをするのがデフォルトとなりました。
+また、次のリリース予定である1.23では、`deno run`と`deno cache`はデフォルトで"None"モードとなり型チェックをしなくなる予定となっています。
+
+そのほかの変更として、`Deno.emit()`を削除、Worker内でも`Deno`名前空間がデフォルトで有効化、`--no-config`フラグの追加などが行われています。
+また、`Navigator.userAgent`のサポート、[`Response.json()`静的メソッド](https://github.com/whatwg/fetch/pull/1392)の追加なども含まれます。
+
+---
+
+Storybook 6.5.0がリリースされました。
+
+- [Release v6.5.0 · storybookjs/storybook](https://github.com/storybookjs/storybook/releases/tag/v6.5.0)
+
+webpack 5のlazy compilationをサポートが追加され、開発モードでの起動速度や再ビルドのパフォーマンスが改善されています。
+
+- [Storybook Lazy Compilation for Webpack](https://storybook.js.org/blog/storybook-lazy-compilation-for-webpack/)
+- [Storybook Performance: Vite vs Webpack](https://storybook.js.org/blog/storybook-performance-from-webpack-to-vite/)
+
+その他には、React 18の`createRoot`のサポート、MDX2のサポートが行われています。
+また、Viteの設定ファイル(`vite.config.js`)がある場合は、自動的にViteを使うように変更されています。
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Deno 1.22 Release Notes
+[deno.com/blog/v1.22](https://deno.com/blog/v1.22 "Deno 1.22 Release Notes")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Deno 1.22.0リリース。
+デフォルトの型チェックの対象が依存関係を含まないローカルのみとなる。
+`Deno.emit()`を削除、Worker内でも`Deno`名前空間がデフォルトで有効化、`--no-config`フラグの追加。
+`Navigator.userAgent`のサポート、`Response.json()`静的メソッドの追加など
+
+- [Release v1.22.0 · denoland/deno](https://github.com/denoland/deno/releases/tag/v1.22.0 "Release v1.22.0 · denoland/deno")
+
+----
+
+## Release v6.5.0 · storybookjs/storybook
+[github.com/storybookjs/storybook/releases/tag/v6.5.0](https://github.com/storybookjs/storybook/releases/tag/v6.5.0 "Release v6.5.0 · storybookjs/storybook")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">debug</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Storybook v6.5.0リリース。
+webpack 5のlazy compilationをサポート、React 18の`createRoot`のサポート、MDX2のサポート。
+また、Viteの設定ファイルがある場合は、自動的にViteを使うように変更されている。
+
+- [storybook/MIGRATION.md at next · storybookjs/storybook](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-64x-to-650 "storybook/MIGRATION.md at next · storybookjs/storybook")
+
+----
+
+## 7.18.0 Released: Destructuring private elements and TypeScript 4.7 · Babel
+[babeljs.io/blog/2022/05/19/7.18.0](https://babeljs.io/blog/2022/05/19/7.18.0 "7.18.0 Released: Destructuring private elements and TypeScript 4.7 · Babel")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">babel</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Babel v7.18.0リリース。
+TypeScript 4.7のoptional variance(`in`/`out`)、instantiation expressionsなどに対応。
+Stage 2のPrivate destructuringのサポート、`regenerator-runtime`を自動的にinline化する変更など
+
+
+----
+
+## Release v4.0.0 · capricorn86/happy-dom
+[github.com/capricorn86/happy-dom/releases/tag/v4.0.0](https://github.com/capricorn86/happy-dom/releases/tag/v4.0.0 "Release v4.0.0 · capricorn86/happy-dom")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">DOM</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Happy DOM v4.0.0リリース。
+Void Elementのシリアライズバグを修正。
+`<img />`を`<img>`にシリアライズ、一方でSVG要素は`<circle />`を`<circle></circle>`へとシリアライズするように修正。
+
+
+----
+
+## Release v2.2.0 · MithrilJS/mithril.js
+[github.com/MithrilJS/mithril.js/releases/tag/v2.2.0](https://github.com/MithrilJS/mithril.js/releases/tag/v2.2.0 "Release v2.2.0 · MithrilJS/mithril.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+mithril.js v2.2.0リリース。
+
+
+----
+
+## Node v18.2.0 (Current) | Node.js
+[nodejs.org/en/blog/release/v18.2.0/](https://nodejs.org/en/blog/release/v18.2.0/ "Node v18.2.0 (Current) | Node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js 18.2.0リリース。
+OpenSSLのセキュリティ修正、`http.Server`に`closeAllConnections`と`closeIdleConnections`を追加。
+`perf_hooks`に`PerformanceResourceTiming`のサポートを追加など
+
+
+----
+
+## nvh95/jest-preview: Debug your Jest tests. Effortlessly.🛠🖼
+[github.com/nvh95/jest-preview](https://github.com/nvh95/jest-preview "nvh95/jest-preview: Debug your Jest tests. Effortlessly.🛠🖼")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">jest</span> <span class="jser-tag">browser</span> <span class="jser-tag">testing</span> <span class="jser-tag">library</span></p>
+
+Jestで実行中のテストに`debug()`関数を仕込むことで、実行中のテストが作成したHTMLをブラウザでプレビューしながらデバッグできるライブラリ。
+
+
+----
+
+## adriancooney/puppeteer-heap-snapshot: API and CLI tool to fetch and query Chome DevTools heap snapshots.
+[github.com/adriancooney/puppeteer-heap-snapshot](https://github.com/adriancooney/puppeteer-heap-snapshot "adriancooney/puppeteer-heap-snapshot: API and CLI tool to fetch and query Chome DevTools heap snapshots.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">puppeteer</span> <span class="jser-tag">library</span> <span class="jser-tag">Tools</span></p>
+
+Puppeteerを使いサイトへアクセスして、Heap Snapshotを取得し、そのSnapshotから特定のプロパティ名にマッチするオブジェクトを取り出すスクレイピングライブラリ。
+
+- [Web Scraping via Javascript Runtime Heap Snapshots - Adrian Cooney&#039;s Blog](https://www.adriancooney.ie/blog/web-scraping-via-javascript-heap-snapshots "Web Scraping via Javascript Runtime Heap Snapshots - Adrian Cooney&amp;#039;s Blog")
+
+----
+
+## Release electron v19.0.0 · electron/electron
+[github.com/electron/electron/releases/tag/v19.0.0](https://github.com/electron/electron/releases/tag/v19.0.0 "Release electron v19.0.0 · electron/electron")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Electron</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Electron v19.0.0リリース。
+Chromium 102、V8 10.2、Node.js 16.14.2にアップデート。
+Electron 20からpreload scriptsは自動的にsandboxで実行される。
+そのため、`nodeIntegration: true` かつ `sandbox`が無指定の場合に警告が出るようになった。
+
+
+----
+
+## Release v7.0.0 · faker-js/faker
+[github.com/faker-js/faker/releases/tag/v7.0.0](https://github.com/faker-js/faker/releases/tag/v7.0.0 "Release v7.0.0 · faker-js/faker")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Faker v7.0.0リリース。
+default exportを削除、ES2020をサポートしている環境をターゲットに変更、Node.js 12のサポート終了など
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?
+[www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ "The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">fonts</span> <span class="jser-tag">accessibility</span> <span class="jser-tag">article</span></p>
+
+`px`と`rem`について。
+`px`指定はブラウザのデフォルトフォントサイズの影響を受けないが`rem`は影響を受ける。
+使う場所による違い、デフォルトフォントサイズを大きくして確認する方法、ルートのフォントサイズを小さくする問題についてなど
+
+
+----
+
+## Blog - Layouts RFC | Next.js
+[nextjs.org/blog/layouts-rfc](https://nextjs.org/blog/layouts-rfc "Blog - Layouts RFC | Next.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">article</span> <span class="jser-tag">proposal</span></p>
+
+Next.jsの新しいLayout RFCを解説する記事。
+`app/`というディレクトリでopt-inする形となり、`layout.js`と`page.js`というファイル名の命名規則使ったルーティングとレイアウトの仕組みについて。
+また、この新しいLayout RFCではReact Server Componentsがデフォルトとなることについてなど
+
+- [RFC: Layouts · Discussion #37136 · vercel/next.js](https://github.com/vercel/next.js/discussions/37136 "RFC: Layouts · Discussion #37136 · vercel/next.js")
+
+----
+<h1 class="site-genre">スライド、動画関係</h1>
+
+----
+
+## Web at I/O 2022 - YouTube
+[www.youtube.com/playlist?list&#x3D;PLNYkxOF6rcIDKuCU73tmdRN\_-mI3tKFPD](https://www.youtube.com/playlist?list=PLNYkxOF6rcIDKuCU73tmdRN_-mI3tKFPD "Web at I/O 2022 - YouTube")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">google</span> <span class="jser-tag">web </span> <span class="jser-tag">video</span> <span class="jser-tag">Conference</span></p>
+
+Google I/O 2022のWeb関係の動画まとめ
+
+
+----
+
+## Playwright 1.22: Component Tests (preview) Overview - YouTube
+[www.youtube.com/watch?v&#x3D;y3YxX4sFJbM](https://www.youtube.com/watch?v=y3YxX4sFJbM "Playwright 1.22: Component Tests (preview) Overview - YouTube")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">playwright</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">browser</span> <span class="jser-tag">testing</span> <span class="jser-tag">video</span></p>
+
+Playwright v1.22で試験的に実装されたComponent Tests機能の解説動画。
+どのような仕組みでブラウザにコンポーネントをmountしているか、コンポーネントのテスト実行、デバッガーとの連携、キーボード入力やスクリーンショットの撮影などについて
+
+- [Release v1.22.0 · microsoft/playwright](https://github.com/microsoft/playwright/releases/tag/v1.22.0 "Release v1.22.0 · microsoft/playwright")
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## markdoc/markdoc: A powerful, flexible, Markdown-based authoring framework.
+[github.com/markdoc/markdoc](https://github.com/markdoc/markdoc "markdoc/markdoc: A powerful, flexible, Markdown-based authoring framework.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Markdown</span> <span class="jser-tag">document</span> <span class="jser-tag">library</span></p>
+
+Markdownベースのドキュメントオーサリングライブラリ。
+パーサ、バリデーション、カスタムタグなどを拡張に対応している。
+markdown-itのtokenize結果をもとにASTを組み立て、それをレンダリングするRendererを持つ
+
+
+----
+
+## honojs/hono: Ultrafast web framework for Cloudflare Workers. Fast, but not only fast.
+[github.com/honojs/hono](https://github.com/honojs/hono "honojs/hono: Ultrafast web framework for Cloudflare Workers. Fast, but not only fast.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">cloudflare</span> <span class="jser-tag">library</span> <span class="jser-tag">JavaScript</span></p>
+
+Cloudflare Workers向けのルーティングライブラリ
+
+
+----