Fork me on GitHub

2020-05-18のJS: TypeScript 3.9、Deno 1.0、Playwright 1.0

Edit on GitHub 編集履歴を見る

JSer.info #488 - TypeScript 3.9がリリースされました。

Promise.allの型推論がされています。
また3.9 β時点では導入される予定だったawaited問題が見つかったため、3.9時点では導入されないことになりました。

その他にはビルドパフォーマンスの改善、Type Errorとなることを期待する// @ts-expect-errorコメントの追加などが行われています。
JSへとコード変換における非互換な変更として、クラスのGetter/Setterをenumerable: trueに変換するのではなく、enumerable: falseに変換する変更が含まれています。
これは、ECMAScriptの仕様で定義されているのと同じ挙動で、Babelも同様の挙動です。


V8を使ったJavaScript/TypeScriptランタイムであるDeno 1.0.0がリリースされました。

Node.jsの作者でもあるRyan Dahlが中心となっていって作成されており、次の動画でもコンセプトが話されています。
DenoはNode.jsのForkではなく、一から新しく実装されています。

Denoはデフォルトでサンドボックス上でコードが実行されます。
ネットワークやファイルアクセスなどの機能はオプトインで有効化できるようになっています。

また、TypeScriptをサポートとしており、コード実行以外にもFormatterBundlerなどの機能も持っています。

npmのようなパッケージの仕組みとは別にURLからES Modulesをロードできる仕組みを持ち、
Go言語ライクなStandard libraryも提供しています。


PuppeteerライクなAPIを持つクラスブラウザテストフレームワークのPlaywright 1.0がリリースされました。

PlaywrightはChromium、WebKit、FirefoxをそれぞれにPatchをあててつつサポートしています。
PuppeteerもChromium、Firefoxをサポートしていますが、Chrome DevTools Protocol(CDP)に基づいたサポートとなっています。そのため、CDPそのものを扱っていないWebKitはPuppeteerではサポートされていません。

Playwrightは、Puppeteerをforkしてこの辺の違いもカバーしクロスブラウザのテストフレームワークとして使うのに適したAPI/エミュレーション機能を持つことを目的としています。

Playwrightでは、waitForTimeのような時間ではなく、waitForEventのようなイベントの発生を待つ仕組み持ちflaky testsを回避しやすくなっています。
複数の独立したコンテキストを定義して並列実行の安定性を向上、ネットワークルーティングなどさまざまなAPIをもっています。


ヘッドライン


Announcing TypeScript 3.9 | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-3-9/

TypeScript ReleaseNote

TypeScript 3.9リリース。Promise.allの型改善、ビルドパフォーマンスの改善、Type Errorとなることを期待する// @ts-expect-errorコメントの追加など。 また、ECMAScript仕様にあわせてGetter/Setterをトランスパイルするように変更など


Release Notes for Safari Technology Preview 106 | WebKit

webkit.org/blog/10580/release-notes-for-safari-technology-preview-106/

safari ReleaseNote

Safari Technology Preview 106リリース。
CSSの:where() pseudo-classのサポート、ES2020のBigIntをサポート、Intl.RelativeTimeFormatのサポートなど


Deno 1.0

deno.land/v1

deno ReleaseNote node.js

Deno 1.0リリース。
V8を使ったJavaScript/TypeScriptランタイム。
オプトインで機能を有効化でき、formatterなどを同梱していて、Go言語ライクなStandard libraryを持っている。


Fast and reliable cross-browser testing with Playwright 🎭

medium.com/@arjunattam/fast-and-reliable-cross-browser-testing-with-playwright-155c0e8a821f

browser testing library ReleaseNote

Playwright 1.0.0リリース。
Chrome、Firefox、SafariをサポートしたPuppeteer-likeなAPIを持つクスブラウザテストフレームワーク。
時間ではなくイベントに対して待機できる仕組み、複数の独立したコンテキストの定義、さまざまなブラウザAPIに対応している


アーティクル


How to use prefers-reduced-motion in React · Josh W Comeau

joshwcomeau.com/react/prefers-reduced-motion/

React JavaScript article

Reactでprefers-reduced-motionを利用したアニメーションの削減を実装する方法について。
React hooksを使った実装、SSRを考慮したパターンについて


What's New In DevTools (Chrome 84)  |  Web  |  Google Developers

developers.google.com/web/updates/2020/05/devtools

Chrome debug article

Chrome 84の開発者ツールの変更点について。
パフォーマンスパネルにWeb Vitalsを反映した項目の追加、PromiseオブジェクトのStatusをコンソールに表示するように、CSS revert プロパティのサポートなど


Kite Launches AI-Powered JavaScript Completions - Code Faster with Kite

www.kite.com/blog/product/kite-launches-ai-powered-javascript-completions/

JavaScript editor article

機械学習ベースのコード補完ツールであるKiteがJavaScriptの補完に対応したという話


How an anti ad-blocker works: Reverse-engineering BlockAdBlock

xy2.dev/article/re-bab/

ad JavaScript article

AdBlockのBlockerの実装を見ていく話。


スライド、動画関係


Production Ready State Management for React | Kea 2.0

kea.js.org/

React JavaScript library

React向けのステート管理ライブラリ。
Actions、Reducers、Listeners、Loaders、Selectors、Valuesを扱う


ReactEurope 2020 - YouTube

www.youtube.com/playlist?list=PLCC436JpVnK0Q4WHoB85ZYBwcCyTaMgAl

React イベント video

React Europe 2020の動画一覧


Focused Session: Performance profiling for Web Applications with Sam Saccone - YouTube

www.youtube.com/watch?v=j9LW94EN7n4

performance video debug browser

ウェブアプリケーションのボトルネックの見つけ方について動画。
初期ロードのネットワークにおけるクリティカルパスの問題とpreload、
操作中のパフォーマンスのボトルネックの見つけ方についてのケーススタディ


サイト、サービス、ドキュメント


addyosmani/puppeteer-webperf: Automating Web Performance testing with Puppeteer 🎪

github.com/addyosmani/puppeteer-webperf

Chrome performance JavaScript example

Puppeteerを使ったパフォーマンス計測のメトリクス取得などのスニペットリポジトリ


ソフトウェア、ツール、ライブラリ関係


Raynos/npm-bin-deps: NPR allows you to run your CLI dependencies without having a copy in node_modules.

github.com/Raynos/npm-bin-deps

npm node.js Tools

npm run-scriptからコマンドとして利用するパッケージをpackage.jsonbinDependenciesとして定義して、利用するツール


sandersn/downlevel-dts: Convert a new d.ts to one that works with older versions of Typescript

github.com/sandersn/downlevel-dts

TypeScript Tools

TypeScriptの型定義のダウングレードを行うツール。
TypeScriptの古い機能を使って新しい機能を再現するように型定義を変換するツール


facebookexperimental/Recoil: Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

github.com/facebookexperimental/Recoil

React JavaScript library

React向けのステート管理ライブラリ。


書籍関係


JavaScript: The Definitive Guide, 7th Edition - O'Reilly Media

shop.oreilly.com/product/0636920048633.do

JavaScript book

JavaScriptについての書籍。
サイ本 第7版


この記事へ修正リクエストをする
記事を紹介する