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をサポートとしており、コード実行以外にもFormatter、Bundlerなどの機能も持っています。
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をもっています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Announcing TypeScript 3.9 | TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-3-9/
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 Technology Preview 106リリース。
CSSの:where() pseudo-classのサポート、ES2020のBigIntをサポート、Intl.RelativeTimeFormatのサポートなど
Deno 1.0
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
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で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 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/
機械学習ベースのコード補完ツールであるKiteがJavaScriptの補完に対応したという話
How an anti ad-blocker works: Reverse-engineering BlockAdBlock
AdBlockのBlockerの実装を見ていく話。
スライド、動画関係
Production Ready State Management for React | Kea 2.0
React向けのステート管理ライブラリ。
Actions、Reducers、Listeners、Loaders、Selectors、Valuesを扱う
ReactEurope 2020 - YouTube
www.youtube.com/playlist?list=PLCC436JpVnK0Q4WHoB85ZYBwcCyTaMgAl
React Europe 2020の動画一覧
Focused Session: Performance profiling for Web Applications with Sam Saccone - YouTube
www.youtube.com/watch?v=j9LW94EN7n4
ウェブアプリケーションのボトルネックの見つけ方について動画。
初期ロードのネットワークにおけるクリティカルパスの問題とpreload、
操作中のパフォーマンスのボトルネックの見つけ方についてのケーススタディ
サイト、サービス、ドキュメント
addyosmani/puppeteer-webperf: Automating Web Performance testing with Puppeteer 🎪
github.com/addyosmani/puppeteer-webperf
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 run-scriptからコマンドとして利用するパッケージをpackage.jsonにbinDependenciesとして定義して、利用するツール
sandersn/downlevel-dts: Convert a new d.ts to one that works with older versions of Typescript
github.com/sandersn/downlevel-dts
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: The Definitive Guide, 7th Edition - O'Reilly Media
shop.oreilly.com/product/0636920048633.do
JavaScriptについての書籍。
サイ本 第7版
