2021-12-20のJS: npm v8.3.0、core-js 3.20.0、 The State of CSS 2021

_i18n/ja/_posts/2021/2021-12-20-npm-v8.3.0-core-js-3.20.0-the-state-of-css-2021.md

@@ -0,0 +1,195 @@
+---
+title: "2021-12-20のJS: npm v8.3.0、core-js 3.20.0、 The State of CSS 2021"
+author: "azu"
+layout: post
+date : 2021-12-20T10:49:17.551Z
+category: JSer
+tags:
+- npm
+- Tools
+- CSS
+- React
+- polyfill
+
+---
+
+JSer.info #571 - npm 8.3.0がリリースされました。
+
+- [Release v8.3.0 · npm/cli](https://github.com/npm/cli/releases/tag/v8.3.0)
+
+`package.json`の`overrides`フィールドによって、依存のバージョン指定を強制的に変更できるようになっています。
+これは、Yarnの[resolutions](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/)とよく似た機能となっています。
+
+- [rfcs/0036-overrides.md at main · npm/rfcs](https://github.com/npm/rfcs/blob/main/accepted/0036-overrides.md)
+
+---
+
+polyfillライブラリであるcore-js 3.20.0がリリースされました。
+
+- [Release 3.20.0 - 2021.12.16 · zloirock/core-js](https://github.com/zloirock/core-js/releases/tag/v3.20.0)
+
+`structuredClone`と`DOMException`のpolyfillが追加されています。(`structuredClone`が`DOMException`に依存しているため、`DOMException`も実装された)
+`structuredClone`はオブジェクトをdeep-cloneをするDOM APIで、次の記事でも解説されています。
+
+- [Deep-copying in JavaScript using structuredClone](https://web.dev/structured-clone/)
+
+core-js 3.20.0では、Stage 3の`Array.prototype.groupByToMap`のサポート。 Stage 1の`String.cooked`、Stage 0の`Function.prototype.unThis`と`Function.{isCallable, isConstructor}`のサポートなどが追加されています。
+
+また、core-jsとも関係する話ですが、TC39のECMAScript ProcessドキュメントのStage 1でpolyfillを実装することを推奨するべきかどうかという議論が行われています。
+
+- [Remove harmful stage 1 polyfill recommendation by ljharb · Pull Request #33 · tc39/process-document](https://github.com/tc39/process-document/pull/33)
+
+----
+
+CSSについての開発者アンケートであるThe State of CSS 2021の結果が公開されいます。
+
+- [The State of CSS 2021](https://2021.stateofcss.com/en-US/)
+
+CSSの機能、Pre/Post Processors、フレームワーク、CSS in JS、ツールやリソースなどの項目ごとのアンケート結果が公開されているので、興味がある人は見てみるとよさそうです。
+
+また、アンケートデータそのものやAPIも公開されているので、アンケートデータを使ってみるのもよさそうです。
+
+- [State of JS API](https://api.stateofjs.com/)
+- [State of CSS | Kaggle](https://www.kaggle.com/sachag/state-of-css)
+
+
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Release v8.3.0 · npm/cli
+[github.com/npm/cli/releases/tag/v8.3.0](https://github.com/npm/cli/releases/tag/v8.3.0 "Release v8.3.0 · npm/cli")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+npm 8.3.0リリース。
+`overrides`フィールドでのパッケージの依存バージョンの上書きをサポートなサポートなど
+
+- [rfcs/0036-overrides.md at main · npm/rfcs](https://github.com/npm/rfcs/blob/main/accepted/0036-overrides.md "rfcs/0036-overrides.md at main · npm/rfcs")
+
+----
+
+## Release 3.20.0 - 2021.12.16 · zloirock/core-js
+[github.com/zloirock/core-js/releases/tag/v3.20.0](https://github.com/zloirock/core-js/releases/tag/v3.20.0 "Release 3.20.0 - 2021.12.16 · zloirock/core-js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">polyfill</span> <span class="jser-tag">ReleaseNote</span></p>
+
+core-js 3.20.0リリース。
+`structuredClone`と`DOMException`の実装、Stage 3の`Array.prototype.groupByToMap`のサポート。
+Stage 1の`String.cooked`、Stage 0の`Function.prototype.unThis`と`Function.{isCallable, isConstructor}`のサポートなど
+
+
+----
+
+## Turborepo
+[turborepo.org/](https://turborepo.org/ "Turborepo")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Tools</span> <span class="jser-tag">monorepo</span> <span class="jser-tag">npm</span></p>
+
+monorepoのビルドツール。
+インクリメンタルビルド、ビルドキャッシュ、リモートキャッシングなどの機能を持っている。
+
+- [vercel/turborepo: The High-performance Build System for JavaScript &amp; TypeScript Codebases](https://github.com/vercel/turborepo "vercel/turborepo: The High-performance Build System for JavaScript &amp;amp; TypeScript Codebases")
+- [Vercel acquires Turborepo to accelerate build speed and improve developer experience – Vercel](https://vercel.com/blog/vercel-acquires-turborepo "Vercel acquires Turborepo to accelerate build speed and improve developer experience – Vercel")
+
+----
+
+## Deno 1.17 Release Notes
+[deno.com/blog/v1.17](https://deno.com/blog/v1.17 "Deno 1.17 Release Notes")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Deno 1.17リリース。
+Import assertionsのサポート、リモートモジュールの型チェックをスキップする`--no-check=remote`の追加、`AbortSignal#throwIfAborted`のサポート。
+また、`Deno.test`のoverloads APIを追加、`--watch`フラグで外部ファイルのWatchをサポート。
+Unstableとして`Deno.connectTls()`がALPNの指定をサポート、timerがプログラムの終了をブロックさせなくする`Deno.unrefTimer`の追加など。
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Web Performance Calendar » CSS me not
+[calendar.perfplanet.com/2021/css-me-not/](https://calendar.perfplanet.com/2021/css-me-not/ "Web Performance Calendar » CSS me not")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p>
+
+CSSファイルの肥大化を避けるために不要なCSSを検知する方法について。
+CSSファイルの読み込みをToggleするブックマークレット、Chrome開発者ツールのCoverageツール、UnCSSで各セレクタに`background-image`のログを仕込む方法について。
+
+
+----
+
+## Updates from the 87th meeting of TC39 - DEV Community 👩‍💻👨‍💻
+[dev.to/hemanth/updates-from-the-87th-meeting-of-tc39-44e4](https://dev.to/hemanth/updates-from-the-87th-meeting-of-tc39-44e4 "Updates from the 87th meeting of TC39 - DEV Community 👩‍💻👨‍💻")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">article</span> <span class="jser-tag">news</span></p>
+
+2021年12月のTC39 MeetingによるECMAScriptのProposalステータスの変更点まとめ
+
+
+----
+
+## Deep-copying in JavaScript using structuredClone
+[web.dev/structured-clone/](https://web.dev/structured-clone/ "Deep-copying in JavaScript using structuredClone")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">DOM</span> <span class="jser-tag">API</span> <span class="jser-tag">article</span></p>
+
+`structuredClone`でのdeep cloneについて。
+shallow cloneとの比較、`structuredClone`でコピーできないデータの制限について。
+
+
+----
+<h1 class="site-genre">スライド、動画関係</h1>
+
+----
+
+## The State of CSS 2021
+[2021.stateofcss.com/](https://2021.stateofcss.com/ "The State of CSS 2021")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">Survey</span></p>
+
+CSSについて開発者アンケートであるThe State of CSS 2021が公開された。
+CSSの機能、Pre/Post Processors、フレームワーク、CSS in JS、ツールやリソースなどの項目ごとのアンケート結果が公開されている
+
+
+----
+
+## React Conf 2021 Recap – React Blog
+[reactjs.org/blog/2021/12/17/react-conf-2021-recap.html](https://reactjs.org/blog/2021/12/17/react-conf-2021-recap.html "React Conf 2021 Recap – React Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">video</span> <span class="jser-tag">Conference</span></p>
+
+React Conf 2021の動画まとめ
+
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## Shopify/react-native-skia: High-performance React Native Graphics using Skia
+[github.com/Shopify/react-native-skia](https://github.com/Shopify/react-native-skia "Shopify/react-native-skia: High-performance React Native Graphics using Skia")
+<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></p>
+
+React Native向けのSkia bindingライブラリ
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## t12t/a11y-components
+[github.com/t12t/a11y-components](https://github.com/t12t/a11y-components "t12t/a11y-components")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">UI</span> <span class="jser-tag">accessibility</span> <span class="jser-tag">links</span></p>
+
+アクセッシブルなコンポーネントについてのリンク集
+
+
+----
+
+## quick-lint/quick-lint-js: quick-lint-js finds bugs in JavaScript programs
+[github.com/quick-lint/quick-lint-js](https://github.com/quick-lint/quick-lint-js "quick-lint/quick-lint-js: quick-lint-js finds bugs in JavaScript programs")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">ESLint</span> <span class="jser-tag">C++</span> <span class="jser-tag">Tools</span></p>
+
+C++で書かれたJavaScriptのLintツール
+
+- [Faster, easier, friendlier: how quick-lint-js will take over ESLint](https://quick-lint-js.com/blog/version-1.0/ "Faster, easier, friendlier: how quick-lint-js will take over ESLint")
+
+----