2021-05-04のJS: Babel 7.14.0、RxJS 7.0.0、Safari 14.1

_i18n/ja/_posts/2021/2021-05-04-babel-7.14.0-rxjs-7.0.0-safari-14.1.md

@@ -0,0 +1,240 @@
+---
+title: "2021-05-04のJS: Babel 7.14.0、RxJS 7.0.0、Safari 14.1"
+author: "azu"
+layout: post
+date : 2021-05-04T12:44:24.309Z
+category: JSer
+tags:
+- node.js
+- React
+- babel
+- Angular
+- E2E
+
+---
+
+JSer.info #538 - Babel 7.14.0がリリースされています。
+
+- [7.14.0 Released: New class features enabled by default, TypeScript 4.3, and better CommonJS interop · Babel](https://babeljs.io/blog/2021/04/29/7.14.0)
+- [Release v7.14.0 · babel/babel](https://github.com/babel/babel/releases/tag/v7.14.0)
+
+[2021-04のTC39ミーティング](https://ecmascript-daily.github.io/ecmascript/2021/05/04/ecmascript-proposal-update)でStage 4となったclass fields/private methodsなどを`@babel/preset-env`がデフォルトでサポートするようになりました。
+そのため、`@babel/plugin-proposal-class-properties`と`@babel/plugin-proposal-private-methods`を個別のプラグインとして入れる必要はなくなっています。
+
+また、Node.jsのESMからCommonJSのモジュールをインポートする際の相互運用性を向上させるオプションとして、`importInterop: "node"`オプションの追加されています。
+
+- [Implement `importInterop: "node"` option for module transforms by nicolo-ribaudo · Pull Request #12838 · babel/babel](https://github.com/babel/babel/pull/12838)
+- [@babel/plugin-transform-modules-commonjs · Babel](https://babeljs.io/docs/en/babel-plugin-transform-modules-commonjs#importinterop)
+
+またTypeScript 4.3のサポート、Stage 1のES Proposalである`async do` expressionのサポートなども含まれています。
+
+---
+
+RxJS 7.0.0がリリースされています。
+
+- [rxjs/CHANGELOG.md at master · ReactiveX/rxjs](https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#700-2021-04-29)
+- [RxJS - Breaking Changes in Version 7](https://rxjs.dev/deprecations/breaking-changes)
+
+RxJS 7.0.0ではファイルサイズが6.xに対して53%程度に小さくなっています。
+また、TypeScriptの型の修正やAPIの一貫性の修正などが含まれています。
+機能追加として、Async IteratorやReadable Streamの対応、`animationFrames`、`share(config)`の追加などが含まれています。
+
+次のスライドと動画でも詳しく紹介されています。
+
+- [RxJS Live Asia 2021 - Google スライド](https://docs.google.com/presentation/d/1-LU7YE3NWw8jHeAgdmLu4CBfG7osCx6MsSIeFs16k60/edit#slide=id.g389cbad6b8_0_36)
+- [RxJS Live! ASIA - YouTube](https://www.youtube.com/watch?v=0S5ISwDaFHI)
+
+---
+
+[New WebKit Features in Safari 14.1 | WebKit](https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/)では、Safari 14.1の変更点について書かれています。
+
+Flexbox Gapのサポート、macOSで`input`要素の`type`属性で`date`と`time`と`datetime-local`のサポートが追加されています。また、speech recognitionを含むWeb Speech API、MediaRecorder API、WebMのサポートなども追加されています。
+JavaScriptではClass Fields、WekRefのサポート、i18n APIのサポート改善、WebAssemblyのThreadingのサポートなどが含まれています。
+また、Private Click Measurementをデフォルトで有効化、Storage AccessAPIの更新やWeb Inspectorのアップデートなども含まれています。
+
+
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Future of Angular E2E &amp; Plans for Protractor · Issue #5502 · angular/protractor
+[github.com/angular/protractor/issues/5502](https://github.com/angular/protractor/issues/5502 "Future of Angular E2E &amp; Plans for Protractor · Issue #5502 · angular/protractor")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Angular</span> <span class="jser-tag">E2E</span> <span class="jser-tag">issue</span> <span class="jser-tag">news</span> <span class="jser-tag">testing</span></p>
+
+AngularでのE2EテストフレームワークであるProtractorの開発終了のスケジュールについて。
+他のテストフレームワークが充実してきているので、2021年5月にDprecatedとし、2020年末に開発終了とするスケジュールについて。
+
+
+----
+
+## 7.14.0 Released: New class features enabled by default, TypeScript 4.3, and better CommonJS interop · Babel
+[babeljs.io/blog/2021/04/29/7.14.0](https://babeljs.io/blog/2021/04/29/7.14.0 "7.14.0 Released: New class features enabled by default, TypeScript 4.3, and better CommonJS interop · Babel")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">babel</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Babel 7.14.0リリース。
+Stage 4となったclass fieldsをpreset-envがデフォルトでサポート、`importInterop: "node"`オプションの追加、TypeScript 4.3のサポート。
+また、Stage 1のES Proposalである`async do` expressionのサポートなど
+
+- [Release v7.14.0 · babel/babel](https://github.com/babel/babel/releases/tag/v7.14.0 "Release v7.14.0 · babel/babel")
+
+----
+
+## rxjs/CHANGELOG.md at master · ReactiveX/rxjs
+[github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#700-2021-04-29](https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#700-2021-04-29 "rxjs/CHANGELOG.md at master · ReactiveX/rxjs")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Rx</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+RxJS 7.0.0リリース。
+TypeScript 4.2未満のサポート終了、`rxjs-compat`の削除、`lift`をexposeしないように、各種演算子のAPI変更など
+
+- [RxJS - Breaking Changes in Version 7](https://rxjs.dev/deprecations/breaking-changes "RxJS - Breaking Changes in Version 7")
+
+----
+
+## New WebKit Features in Safari 14.1 | WebKit
+[webkit.org/blog/11648/new-webkit-features-in-safari-14-1/](https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/ "New WebKit Features in Safari 14.1 | WebKit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Safari 14.1の変更点について。
+Flexbox Gap、macOSでDate&Time input、Web Speech API、MediaRecorder API、WebMのサポートなど。
+JavaScriptのClass Fields、WekRefのサポート、i18n APIのサポート改善、WebAssemblyのThreadingのサポートなど。
+また、Private Click Measurementをデフォルトで有効化、Storage AccessAPIの更新など。
+
+
+----
+
+## Release yargs v17.0.0 · yargs/yargs
+[github.com/yargs/yargs/releases/tag/v17.0.0](https://github.com/yargs/yargs/releases/tag/v17.0.0 "Release yargs v17.0.0 · yargs/yargs")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">node.js</span> <span class="jser-tag">deno</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+コマンドライン引数パーサーのyargs 17.0.0リリース。
+破壊的な変更として、Node.js 10のサポート終了、PrivateメソッドにPrivate Fieldsを使うように変更、`reset()`メソッドを非推奨化など。
+Node v14.8.0からTop-Level Awaitをサポートしたため、`yargs()`や`parseAsync`など色々な処理で非同期処理に対応するように変更など
+
+
+----
+
+## ECMAScript proposal updates @ 2021-04 | ECMAScript Daily
+[ecmascript-daily.github.io/ecmascript/2021/05/04/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2021/05/04/ecmascript-proposal-update "ECMAScript proposal updates @ 2021-04 | ECMAScript Daily")
+<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>
+
+2021年4月のTC39 MeetingsでStageが変わったProposalのまとめ。
+Class Field/Private MethodsがStage 4となり、ES2022に入ることが決まった
+
+
+----
+
+## Mantine
+[mantine.dev/](https://mantine.dev/ "Mantine")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">UI</span></p>
+
+ReactコンポーネントとHooksのフレームワーク。
+CSS-in-JSにはJSSを利用している。
+
+- [cssinjs/jss: JSS is an authoring tool for CSS which uses JavaScript as a host language.](https://github.com/cssinjs/jss "cssinjs/jss: JSS is an authoring tool for CSS which uses JavaScript as a host language.")
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## React17のevent delegationの破壊的変更を理解する
+[zenn.dev/co9xs/articles/react17-event-delegation](https://zenn.dev/co9xs/articles/react17-event-delegation "React17のevent delegationの破壊的変更を理解する")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">article</span></p>
+
+React 17のevent delegationの変更についての記事。
+実際に動作が変わるサンプルを元に、React 17でのevent delegationの仕組みの変化について解説している
+
+- [React v17.0 Release Candidate: 新機能「なし」 – React Blog](https://ja.reactjs.org/blog/2020/08/10/react-v17-rc.html "React v17.0 Release Candidate: 新機能「なし」 – React Blog")
+
+----
+
+## How to Use ECMAScript Modules in Node.js
+[dmitripavlutin.com/ecmascript-modules-nodejs/](https://dmitripavlutin.com/ecmascript-modules-nodejs/ "How to Use ECMAScript Modules in Node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">article</span></p>
+
+Node.jsでのECMAScript modulesの使い方についての記事。
+モジュールモード、モジュールのimportの方法、Dynamic Import、CommonJSなモジュールのimport、`import.meta`についてなど
+
+
+----
+
+## Build an HTTPS-intercepting JavaScript proxy in 30 seconds flat | HTTP Toolkit
+[httptoolkit.tech/blog/javascript-mitm-proxy-mockttp/](https://httptoolkit.tech/blog/javascript-mitm-proxy-mockttp/ "Build an HTTPS-intercepting JavaScript proxy in 30 seconds flat | HTTP Toolkit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">library</span> <span class="jser-tag">article</span></p>
+
+mockttpを使ったhttpsのサイトをProxyで書き換える方法についての紹介記事
+
+- [httptoolkit/mockttp: Powerful friendly HTTP mock server &amp; proxy](https://github.com/httptoolkit/mockttp "httptoolkit/mockttp: Powerful friendly HTTP mock server &amp;amp; proxy")
+
+----
+
+## Node.js 10がサポート終了したので、Node.js 12以降だとできるようになることをまとめる
+[zenn.dev/azu/scraps/bb1106a04ed9e6](https://zenn.dev/azu/scraps/bb1106a04ed9e6 "Node.js 10がサポート終了したので、Node.js 12以降だとできるようになることをまとめる")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">article</span></p>
+
+Node.js 12から利用できるようになったNode.jsのAPIや機能、V8アップデートによるECMAScriptサポートについてまとめた記事。
+
+
+----
+
+## Hosting SQLite databases on Github Pages - (or any static file hoster) - phiresky&#039;s blog
+[phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/](https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/ "Hosting SQLite databases on Github Pages - (or any static file hoster) - phiresky&#039;s blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">SQLite</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">WebAssembly</span> <span class="jser-tag">article</span></p>
+
+WebAssemblyにコンパイルしたSQLiteと参照用のSQLiteファイルを用意し、必要な部分だけを取得できる仕組みを作ったという話。
+DBファイルをすべてメモリへ載せないで使うために、HTTP Rangeリクエストを使って必要なchunkだけを取得するHTTPベースの仮想ファイルシステムを作っている。
+SQLiteのDBのページサイズやスキーマ情報から必要な部分だけをRangeリクエストで取得している。
+
+
+----
+
+## Introducing CloudFront Functions – Run Your Code at the Edge with Low Latency at Any Scale | AWS News Blog
+[aws.amazon.com/jp/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/](https://aws.amazon.com/jp/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/ "Introducing CloudFront Functions – Run Your Code at the Edge with Low Latency at Any Scale | AWS News Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">aws</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">webservice</span> <span class="jser-tag">cdn</span> <span class="jser-tag">article</span></p>
+
+AWS CloudFrontでCDNエッジな処理をJavaScriptでかけるサービス。
+ECMAScript 5.1互換なJavaScript、処理時間が1ms以内、メモリは2MB以内、パッケージサイズは10kb以下のファイルサイズ、Network/File IOなし
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## itsjavi/jsx-runtime: Extremely lightweight JSX runtime (&lt;2KB) to write JSX without React in TypeScript or JavaScript.
+[github.com/itsjavi/jsx-runtime](https://github.com/itsjavi/jsx-runtime "itsjavi/jsx-runtime: Extremely lightweight JSX runtime (&lt;2KB) to write JSX without React in TypeScript or JavaScript.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">jsx</span> <span class="jser-tag">babel</span> <span class="jser-tag">Tools</span> <span class="jser-tag">TypeScript</span></p>
+
+JSXで書いて変換するとStandaloneで動作するコードを出力するJSX TransformerとRuntime
+
+
+----
+
+## Fower
+[fower.vercel.app/](https://fower.vercel.app/ "Fower")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">CSS</span> <span class="jser-tag">library</span> <span class="jser-tag">React</span> <span class="jser-tag">Vue</span> <span class="jser-tag">Svelte</span></p>
+
+TailwindcssライクなUtility-firstのCSS in JSライブラリ。
+ReactやVue、またスタイルをJavaScriptで生成するためReact Nativeにも対応する。
+UtilityベースのスタイルをPropsとして指定し、TSXや各フレームワーク用のコード補完に対応している。
+
+- [Fower v1.0. After half a year’s efforts, today… | by forsigner | Apr, 2021 | ITNEXT](https://itnext.io/fower-v1-0-8df48723de0b "Fower v1.0. After half a year’s efforts, today… | by forsigner | Apr, 2021 | ITNEXT")
+
+----
+<h1 class="site-genre">書籍関係</h1>
+
+----
+
+## Multithreaded JavaScript
+[learning.oreilly.com/library/view/multithreaded-javascript/9781098104429/](https://learning.oreilly.com/library/view/multithreaded-javascript/9781098104429/ "Multithreaded JavaScript")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">webworker</span> <span class="jser-tag">ServiceWorker</span> <span class="jser-tag">book</span></p>
+
+2021年11月発売
+JavaScriptでのマルチスレッドについての書籍。
+Web Worker、Service Worker、SharedWorkerなどについて
+
+
+----