Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
2021-05-04のJS: Babel 7.14.0、RxJS 7.0.0、Safari 14.1 (#863)
* Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update 538 draft * Update _i18n/ja/_posts/2021/2021-05-04-babel-7.14.0-rxjs-7.0.0-safari-14.1.md * Delete _i18n/ja/_posts/2021/2021-05-04-538draft.md * Update _i18n/ja/_posts/2021/2021-05-04-babel-7.14.0-rxjs-7.0.0-safari-14.1.md * Update 2021-05-04-babel-7.14.0-rxjs-7.0.0-safari-14.1.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
95a7139
commit 35309ff
Showing
1 changed file
with
240 additions
and
0 deletions.
There are no files selected for viewing
240 changes: 240 additions & 0 deletions
240
_i18n/ja/_posts/2021/2021-05-04-babel-7.14.0-rxjs-7.0.0-safari-14.1.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 & Plans for Protractor · Issue #5502 · angular/protractor | ||
| [github.com/angular/protractor/issues/5502](https://github.com/angular/protractor/issues/5502 "Future of Angular E2E & 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 & proxy](https://github.com/httptoolkit/mockttp "httptoolkit/mockttp: Powerful friendly HTTP mock server &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'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'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 (<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 (<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などについて | ||
|
|
||
|
|
||
| ---- |