Fork me on GitHub

2020-05-07のJS: Firefox 76、Jest 26、Web Vitals

Edit on GitHub 編集履歴を見る

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

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

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


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

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

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


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

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

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

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


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

JSer.info Sponsors

JSer.info SponsorsGitHub 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の追加、itdescribeなどを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のデコンパイルについて


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の分離についてなど


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などもそれぞれ対応していく予定


スライド、動画関係


rinsuki/play-flv-in-browser: Play FLV in Browser!

github.com/rinsuki/play-flv-in-browser

flash video WebAssembly JavaScript browser

ffmepgをWebAssemblyにコンパイルしたものを使ってflv/mp4をブラウザで再生するデモ


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


antfu/i18n-ally: 🌍 All in one i18n extension for VS Code

github.com/antfu/i18n-ally

VSCode i18n Extension EmEditor

VSCode上に作られたi18n編集システム。
エディタ上で翻訳キーの代わりに翻訳結果の表示などローカライズの支援をする拡張機能。
さまざまなフレームワークに対応している


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


addaleax/gen-esm-wrapper: Generate ESM wrapper files for CommonJS modules

github.com/addaleax/gen-esm-wrapper

node.js CommonJS ECMAScript module

CommonJSからESM Wrapperを生成するツール


jesseduffield/lazynpm: terminal UI for npm

github.com/jesseduffield/lazynpm

npm console UI

lazygit, lazydockerライクなnpmのターミナルUIツール。
パッケージの情報表示、パッケージの管理、スクリプトの実行など


Quantum JavaScript (Q.js)

quantumjavascript.app/

JavaScript library

量子回路シミュレーターライブラリ


書籍関係


Tackling TypeScript: Upgrading from JavaScript

exploringjs.com/tackling-ts/

TypeScript book

Dr. AxelによるTypeScriptの入門書


この記事へ修正リクエストをする
JSer.info Slackに参加する