JSer.info #486 - Firefox 76がリリースされました。

Firefox 76では開発者ツールに多くの改善が含まれています。
特定のディレクトリをDebuggerの対象から除外できるように、"Copy stack trace"の追加、Action CableのWebSocket Inspectionのサポートなどが追加されています。

機能追加としてAudio workletsのサポート、CSS System Colorsのサポートが行われています。
その他には未知のプロトコルへのNavigation移動をブロックするように変更なども含まれています。

JavaScriptテストフレームワークのJest 26がリリースされました。

Jest 26: Tick Tock · Jest

@sinonjs/fake-timersベースの新しいFake Timerの追加、itやdescribeなどをexportする@jest/globalsの追加、Native ESMのサポートなどが含まれています。
破壊的な変更として、Node.js 8未満のサポートを終了しいくつかのコアモジュールでES5のビルドを提供しないように変更しています。
今後の変更予定として、Jest 27でデフォルトのtestRunnerを"jest-circus"に変更しenvironmentを"node"に変更する予定です。
また、Jest 28で"jest-jasmine2"と"jest-environment-jsdom"をコアから別のパッケージへと分離する予定となっています。

まとめると次のような変更が予定されています。

testRunner: jasmine2 → circus
testEnvironment: jsdom → node

Web Vitalsという記事では、ウェブサイトのパフォーマンスに関する重要な指標をCore Web Vitalsという概念にまとめて、Google/Chrome系のプロダクトで利用できるようにする話が書かれています。

現在のCore Web Vitalsは次の3つの指標で構成されています。

Largest Contentful Paint (LCP): ロードに関する指標
First Input Delay (FID): インタラクションに関する指標
Cumulative Layout Shift (CLS): 描画に関する指標

これらの指標を取得できるweb-vitalsというJavaScriptライブラリの提供(Performance Observerの値を利用するためChromeでしか取れない指標もある)やブラウザ拡張機能の提供なども行っています。

今後はChrome User Experience Report(既に対応済み)、PageSpeed Insights、Search Console などのツールでもこの指標を利用できるようにしていくとのことです。

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

Firefox 76: Audio worklets and other tricks - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2020/05/firefox-76-audio-worklets-and-other-tricks/

Firefox ReleaseNote

Firefox 76リリース。
開発者ツールの改善、Audio workletsのサポート、CSS System Colorsのサポート、未知のプロトコルへのNavigation移動をブロックするように変更など

Node v12.16.3 (LTS) | Node.js

nodejs.org/en/blog/release/v12.16.3/

node.js ReleaseNote

Node.js 12.16.3リリース。
Experimentalで実装されているconditional exportsに関するwarningメッセージが削除された

Announcing TypeScript 3.9 RC | TypeScript

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

TypeScript ReleaseNote

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

jQuery 3.5.1 Released: Fixing a Regression | Official jQuery Blog

blog.jquery.com/2020/05/04/jquery-3-5-1-released-fixing-a-regression/

jQuery ReleaseNote

jQuery 3.5.1リリース。
jQuery 3.5.0でのリグレッションを修正。3.5ではXSSに対するセキュリティ修正のため、意図的に後方互換性がない部分も含まれる

Jest 26: Tick Tock · Jest

jestjs.io/blog/2020/05/05/jest-26

JavaScript testing library ReleaseNote

Jest 26リリース。
@sinonjs/fake-timersベースの新しいFake Timerの追加、itやdescribeなどをexportする@jest/globalsの追加、Native ESMのサポートなど。
いくつかのコアモジュールでES5のビルドを提供しないように変更し、Node.js 8未満のサポートを終了。
今後の変更として、Jest 27でデフォルトのtestRunnerを"jest-circus"に変更しenvironmentを"node"に変更する。
また、Jest 28で"jest-jasmine2"と"jest-environment-jsdom"をコアから別のパッケージへと分離する予定。

Release v1.6.0 · mdx-js/mdx

github.com/mdx-js/mdx/releases/tag/v1.6.0

JavaScript Markdown ReleaseNote

MarkdownにJSXを拡張するMDX 1.6.0リリース。
Vueをベータサポート

アーティクル

What’s in that .wasm? Introducing: wasm-decompile · V8

v8.dev/blog/wasm-decompile

WebAssembly article

wasm-decompileでのWebAssemblyのデコンパイルについて

wabt/decompiler.md at master · WebAssembly/wabt

window.location Cheatsheet - DEV Community 👩‍💻👨‍💻

dev.to/samanthaming/window-location-cheatsheet-4edl

JavaScript チートシート article

window.locationオブジェクトのプロパティやメソッドの挙動を解説している記事

Improved Next.js and Gatsby page load performance with granular chunking

web.dev/granular-chunking-nextjs/

webpack article

webpackのSplitChunksPluginを行うことでNext.js 9.2やGatsbyのページ間でのCommon chunkを分けた話。
HTTP/2におけるmaxInitialRequestsの設定によるcリクエスト数の増加の影響調査、ルーティングとchunkの分離についてなど

feat(gatsby): enable granular chunks by wardpeet · Pull Request #22253 · gatsbyjs/gatsby

Web Vitals

web.dev/vitals/

Chrome performance article JavaScript

ウェブページのパフォーマンス計測の重なメトリクスをCore Web Vitalsとしてまとめたという話。
Core Web VitalsはLargest Contentful Paint(LCP)、First Input Delay(FID)、Cumulative Layout Shift(CLS)。
同時にweb-vitalsというそれぞれのメトリクスを計測できるライブラリも提供し、 PageSpeed InsightsやSearch Consoleなどもそれぞれ対応していく予定