2021-05-18のJS: Node.js 14.17.0、TypeScript 4.3 RC、Angular v12

_i18n/ja/_posts/2021/2021-05-18-node.js-14.17.0-typescript-4.3-rc-angular-v12.md

@@ -0,0 +1,244 @@
+---
+title: "2021-05-18のJS:  Node.js 14.17.0、TypeScript 4.3 RC、Angular v12"
+author: "azu"
+layout: post
+date : 2021-05-18T02:32:50.556Z
+category: JSer
+tags:
+- TypeScript
+- React
+- node.js
+- CSS
+- issue
+
+---
+
+JSer.info #540 - 現在のLTSの最新版であるNode v14.17.0がリリースされました。
+
+- [Node v14.17.0 (LTS) | Node.js](https://nodejs.org/en/blog/release/v14.17.0/)
+
+Node v14.17.0では、Node.js 15.x で追加された機能やモジュールがバックポートされています。
+
+診断情報を扱う[diagnostics_channel](https://nodejs.org/api/diagnostics_channel.html)モジュールの追加、UUID v4を生成する`crypto.randomUUID()`が追加されています。
+`crypto.randomUUID()` はWHATWGで定義されている仕様で、[Chromeにも実装が追加](https://chromium.googlesource.com/chromium/src/+/e70b29ae998ed65902cdaeb0b2418a13d0755773)されています。
+
+- [WICG/uuid: UUID V4](https://github.com/WICG/uuid)
+- [crypto.randomUUID() - Chrome Platform Status](https://www.chromestatus.com/feature/5689159362543616)
+
+また、` --experimental-abortcontroller`の実験フラグ付きですが、`AbortController`と`AbortSignal`の対応が次のメソッドに追加されています。
+
+- `child_process.exec`
+- `child_process.execFile`
+- `child_process.fork`
+- `child_process.spawn`
+- `dgram.createSocket`
+- `events.on`
+- `events.once`
+- `fs.readFile`
+- `fs.watch`
+- `fs.writeFile`
+- `http.request`
+- `https.request`
+- `http2Session.request`
+- Promise版の`setImmediate`と`setTimeout`
+
+----
+
+TypeScript 4.3 RC(リリース候補)がリリースされました。
+
+- [Announcing TypeScript 4.3 RC | TypeScript](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/)
+
+基本的な変更内容はBetaのものを含んでいます。
+
+- [2021-04-06のJS: TypeScript 4.3 Beta、hls.js v1.0.0(Apple Low-Latency HLS)、Storybook 6.2 - JSer.info](https://jser.info/2021/04/06/typescript-4.3-beta-hls.js-v1.0.0apple-low-latency-hls-storybook-6.2/)
+
+RCで新たに追加されたものとして、`--incremental`と`--watch`を使った初回のビルドが遅い問題が解消されています。
+
+- [Do not calculate signatures if old state is not used by sheetalkamat · Pull Request #43314 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/pull/43314)
+- [Make initial incremental/watch builds as fast normal builds by sokra · Pull Request #42960 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/pull/42960)
+
+また、`--incremental`フラグなどを使った際に生成される[`.tsbuildinfo`のファイルサイズが改善](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/#tsbuildinfo-size-improvements)されています。
+
+----
+
+[6ヶ月ごとにメジャーアップデート](https://angular.io/guide/releases#release-frequency)されるAngularの最新版であるAngular 12がリリースされました。
+
+- [Angular v12 is now available. It’s that time again, friends — we’re… | by Mark Techson | May, 2021 | Angular Blog](https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49)
+- [Release 12.0.0 · angular/angular](https://github.com/angular/angular/releases/tag/12.0.0)
+
+View Engineは非推奨となりIvyがデフォルトへと移行、Legacy i18n Message IDsからの移行ツールが公開されています。
+
+- [Angular - Migrating legacy localization IDs](https://angular.io/guide/migration-legacy-message-id)
+
+以前、開発終了を告知されていたProtractorについても、Angular 12からProtractorはデフォルトでは新規プロジェクトには含めないようになっています。
+
+- [Future of Angular E2E & Plans for Protractor · Issue #5502 · angular/protractor](https://github.com/angular/protractor/issues/5502#issuecomment-837432362)
+
+また、Angular 12ではIE 11のサポートが非推奨となり警告が出るようになっています。
+IE 11のサポートはAngular 13で削除される予定です。
+そのため、AngularでのIEサポートはAngular 12が最後となり、Angular 12のLTS期限である2022年11月で完全にIEサポートが終了する予定となっています。
+
+- [RFC: Internet Explorer 11 support deprecation and removal · Issue #41840 · angular/angular](https://github.com/angular/angular/issues/41840)
+
+その他には、インラインSaaSのサポートなど。 TypeScript 4.2へのアップデート、webpack 5を実験的にサポートなども含まれています。
+
+
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## What do you not like about DefinitelyTyped as a user and contributor? · Issue #44030 · microsoft/TypeScript
+[github.com/microsoft/TypeScript/issues/44030](https://github.com/microsoft/TypeScript/issues/44030 "What do you not like about DefinitelyTyped as a user and contributor? · Issue #44030 · microsoft/TypeScript")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">issue</span></p>
+
+DefinitelyTypedへの意見を募集しているIssue
+
+
+----
+
+## Node v14.17.0 (LTS) | Node.js
+[nodejs.org/en/blog/release/v14.17.0/](https://nodejs.org/en/blog/release/v14.17.0/ "Node v14.17.0 (LTS) | Node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node v14.17.0リリース。
+試験的に`diagnostics_channel`を追加、`crypto.randomUUID()`の追加。
+また、Node.js 15で実装されていたコアモジュールにおける`AbortController`と`AbortSignal`の対応をバックポートなど
+
+
+----
+
+## Deno 1.10 Release Notes | Deno Blog
+[deno.com/blog/v1.10](https://deno.com/blog/v1.10 "Deno 1.10 Release Notes | Deno Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Deno 1.10リリース。
+`deno test`がisolateした状態でparallelにテストを実行、`permissions`の指定に対応、出力の変更、コメントのコードの型チェックに対応など。
+`Worker.postMessage`がstructured clone algorithmに対応、localStorageなどのWeb Storage APIに対応。
+`WebAssembly.Memory`が`shared`オプションに対応、`--import-map`へリモートURLを指定できるようになるなど
+
+
+----
+
+## Announcing TypeScript 4.3 RC | TypeScript
+[devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/](https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/ "Announcing TypeScript 4.3 RC | TypeScript")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">ReleaseNote</span></p>
+
+TypeScript 4.3 RCリリース。
+setterにgetterとは異なる型を指定できるように、`override`キーワードの追加、Template String Typeの改善。
+Private Class Elements(fields/methods/accessors)のサポート、`static` Index Signatureのサポート。
+`ConstructorParameters`がAbstract classをサポート、Genericsにおける型の絞り込みの改善、Promiseオブジェクトを条件式に渡してしまうミスのチェックを追加。
+その他には、`.tsbuildinfo`のサイズ改善、watch時の初回ビルドの改善など。
+
+
+----
+
+## Angular v12 is now available. It’s that time again, friends — we’re… | by Mark Techson | May, 2021 | Angular Blog
+[blog.angular.io/angular-v12-is-now-available-32ed51fbfd49](https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49 "Angular v12 is now available. It’s that time again, friends — we’re… | by Mark Techson | May, 2021 | Angular Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Angular</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Angular 12リリース。
+View Engineは非推奨となりIvyがデフォルトへと移行、Legacy i18n Message IDsからの移行ツール、インラインSaaSのサポートなど。
+TypeScript 4.2へのアップデート、webpack 5を実験的にサポート、IE 11サポートの非推奨化など
+
+- [Release 12.0.0 · angular/angular](https://github.com/angular/angular/releases/tag/12.0.0 "Release 12.0.0 · angular/angular")
+- [Angular - Migrating legacy localization IDs](https://angular.io/guide/migration-legacy-message-id "Angular - Migrating legacy localization IDs")
+
+----
+
+## V8 release v9.1 · V8
+[v8.dev/blog/v8-release-91](https://v8.dev/blog/v8-release-91 "V8 release v9.1 · V8")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">V8</span> <span class="jser-tag">ReleaseNote</span></p>
+
+V8 v9.1リリース。
+Top-level awaitのデフォルトサポート、`#foo in obj`のPrivate brand checksのサポートなど
+
+
+----
+
+## Announcing Docusaurus 2 Beta | Docusaurus
+[docusaurus.io/blog/2021/05/12/announcing-docusaurus-two-beta](https://docusaurus.io/blog/2021/05/12/announcing-docusaurus-two-beta "Announcing Docusaurus 2 Beta | Docusaurus")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">document</span></p>
+
+Docusaurus 2 Betaリリース
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Writing A Type Safe Store | Lachlan Miller
+[lachlan-miller.me/articles/advanced-type-a-type-safe-store-for-vue-3](https://lachlan-miller.me/articles/advanced-type-a-type-safe-store-for-vue-3 "Writing A Type Safe Store | Lachlan Miller")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p>
+
+Vueのステート管理ライブラリであるPiniaのType SafeなStoreの型定義の解説
+
+- [posva/pinia: 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support](https://github.com/posva/pinia/ "posva/pinia: 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support")
+
+----
+
+## Next Gen CSS: @container | CSS-Tricks
+[css-tricks.com/next-gen-css-container/](https://css-tricks.com/next-gen-css-container/ "Next Gen CSS: @container | CSS-Tricks")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p>
+
+`@container`についての記事。
+親要素には`contain`プロパティを指定する必要がある点、`@container`でのレスポンシブデザインについて
+
+
+----
+
+## Cross-browser tracking vulnerablity in Tor, Safari, Chrome and Firefox - FingerprintJS
+[fingerprintjs.com/blog/external-protocol-flooding/](https://fingerprintjs.com/blog/external-protocol-flooding/ "Cross-browser tracking vulnerablity in Tor, Safari, Chrome and Firefox - FingerprintJS")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">security</span> <span class="jser-tag">privacy</span> <span class="jser-tag">article</span></p>
+
+ブラウザからURLスキームでアプリを開くときの挙動を利用してフィンガープリントできるという話。
+未知のプロトコルを開く際にはダイアログでの確認やユーザインタラクションが必要となっている。
+しかし、それぞれのブラウザで既知のプロトコルや`about:blank`を使ったSOPでの抜け道で、どのアプリがインストールされているかを判定できるという話
+
+
+----
+
+## DocBaseのフロントエンド改修をどのように進めたか – KRAY Inc.
+[kray.jp/blog/how-to-docbase-renewal/](https://kray.jp/blog/how-to-docbase-renewal/ "DocBaseのフロントエンド改修をどのように進めたか – KRAY Inc.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CoffeeScript</span> <span class="jser-tag">React</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">refacoring</span> <span class="jser-tag">article</span></p>
+
+Backbone + Marionette + CoffeeScriptで書かれていたウェブサービスをReact + TypeScriptに一括で移行した話。
+E2Eを使ったテスト、構造を維持しながらReact化、コンポーネントへの分離などの移行の方法についてなど
+
+
+----
+
+## Babel is used by millions, so why are we running out of money? · Babel
+[babeljs.io/blog/2021/05/10/funding-update.html](https://babeljs.io/blog/2021/05/10/funding-update.html "Babel is used by millions, so why are we running out of money? · Babel")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">babel</span> <span class="jser-tag">article</span></p>
+
+Babelの資金の状態、ロードマップ、寄付について。
+
+- [Babel Roadmap · Babel](https://babeljs.io/docs/en/roadmap#babel-2021-roadmap "Babel Roadmap · Babel")
+
+----
+
+## styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
+[blog.cybozu.io/entry/2020/06/25/105457](https://blog.cybozu.io/entry/2020/06/25/105457 "styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">React</span> <span class="jser-tag">article</span> <span class="jser-tag">saas</span></p>
+
+Sassで書かれていたスタイルをCSS in JSに移行する話。
+styled-componentsを使って書く場合にスタイリングとJSXを分離するためのルール、Sassの変数を抽出して移行するスクリプトについてなど
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## coderaiser/simport: Import like with require but using async
+[github.com/coderaiser/simport](https://github.com/coderaiser/simport "coderaiser/simport: Import like with require but using async")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">library</span></p>
+
+ESMなNode.jsで`require`、`__filename`、`__dirname`などのshim機能を提供するライブラリ
+
+
+----