Fork me on GitHub

2020-08-31のJS: Firefox 80、D3.js 6.0.0、Chrome 85、Puppeteer & Playwright

Edit on GitHub 編集履歴を見る

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

ES2020のexport * as namespace構文のサポート、CSSのappearanceプロパティをprefixなしでサポートしています。
また、window.open()outerWidthouterHeightを無視するように、Cache-Controlが設定されている場合にPragmaヘッダは無視されるようになるといった変更も含まれています。


D3.js 6.0.0がリリースされました。

ES2015のIterable、Map、Setをネイティブで利用するようになっています。
d3.event経由でイベントを受け取るのではなくlistner関数の第一引数にeventを渡すようになるといったイベントの仕組みを変更が含まれています。

その他にも一部パッケージの非推奨化(削除)や変更が含まれています。

  • d3-collectionの削除 → MapやSetのビルトインメソッドやd3-array
  • d3-voronoiの削除 → d3-delaunay
  • d3.mouse, d3.touch, d3.touches, d3.clientPointの削除 → d3.pointer, d3.pointers

マイグレーションガイドも合わせて公開されています。


Chrome 85がリリースされています。

JavaScriptではES2021に入る予定Promise.anyAggregateErrorString.prototype.replaceAll、Logical assignment operatorsがサポートされています。JavaScriptについては、V8 8.5のブログにまとめられています。

CSS content-visibilityの実装、CSS PropertiesをCSSで定義する@propertyの実装、AVIF画像のサポートが含まれています。
Origin TrialとしてFetch APIのStreaming requests、WebHID、Declarative Shadow DOM、Portalのサポート。
また、Referrer Policyのデフォルト値をstrict-origin-when-cross-originに変更、Secure属性なしのSameSite=Noneのサポート終了といった変更も含まれています。


theheadless.dev - Learn Puppeteer & Playwrightというサイトでは、PuppeteerとPlaywrightの使い方やユースケースについてまとめられています。
このサイトでは、PuppeteerとPlaywrightの基本的な使い方からE2Eテストやスクレイピングなどのユースケースごとの使い方について紹介しています。

また、同時期にTestimからtestimio/root-causeというPuppeteerとPlaywrightでのE2Eテストを支援するフレームワークが公開されています。
testimio/root-causeでは、それぞれの実行ステップをスクリーンショットで保存、コンソールログやネットワーク(HAR)ファイルの保存してレポートからテストが失敗した原因を検証できるようになっています。
また、単独で動かす方法とJestやMochaなどのテストフレームワークに統合するライブラリを提供しているようです。


ヘッドライン


Firefox 80.0, See All New Features, Updates and Fixes

www.mozilla.org/en-US/firefox/80.0/releasenotes/

Firefox ReleaseNote

Firefox 80.0リリース。
ES2020のexport * as namespace構文のサポート。
window.open()outerWidthouterHeightを無視するように、Cache-Controlが設定されている場合にPragmaヘッダは無視されるようになるなど


Release v6.0.0 · d3/d3

github.com/d3/d3/releases/tag/v6.0.0

d3.js JavaScript library

D3.js 6.0.0リリース。
ES2015のIterable、Map、Setを利用するように、bowerの対応を削除。
d3-selectionなどのイベントの仕組みを変更、d3-collectionの非推奨化など


New in Chrome 85 | Web | Google Developers

developers.google.com/web/updates/2020/08/nic85

Chrome ReleaseNote

Chrome 85リリース。
CSS content-visibilityの実装、CSS PropertiesをCSSで定義する@propertyの実装、AVIF画像のサポート。
Origin TrialとしてFetch APIのStreaming requests、WebHID、Declarative Shadow DOM、Portalのサポート。
また、Referrer Policyのデフォルト値をstrict-origin-when-cross-originに変更など


V8 release v8.5 · V8

v8.dev/blog/v8-release-85

V8 ReleaseNote

V8 8.5リリース。
ES2021予定のPromise.anyAggregateErrorのサポート、String#replaceAllのサポート、Logical assignment operatorsのサポート。
WebAssemblyのbaseline compilerであるLiftoffが全てのプラットフォームで使われるようになるなど


Yarn 2.2 🚅🌟 Dedupe, Faster, Lighter, ... - DEV Community 👩‍💻👨‍💻

dev.to/arcanis/yarn-2-2-dedupe-faster-lighter-ha5

yarn ReleaseNote

Yarn 2.2リリース。
yarn dedupeの追加、パフォーマンス改善、オプトアウト方式でYarnの利用情報をDatadogに送るように


アーティクル


content-visibility: the new CSS property that boosts your rendering performance

web.dev/content-visibility/

CSS article Chrome performance

Chrome 85で実装されたCSS content-visibilityプロパティについて。
CSS Containmentに依存した仕様。
DOMのサブツリーに予測できる空間を定義することで、ブラウザがレンダリングを省略して最適化するための仕組み。
display: nonevisibility: hiddenとの違い、content-visibilityプロパティのユースケースとしての無限スクロールなどについて


Introducing Danfo.js, a Pandas-like Library in JavaScript — The TensorFlow Blog

blog.tensorflow.org/2020/08/introducing-danfo-js-pandas-like-library-in-javascript.html

MachineLearning JavaScript library article

PandasインスパイアなライブラリであるDanfo.jsについて。
TensorFlow.jsと組み合わせて利用できる


スライド、動画関係


Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11 - Speaker Deck

speakerdeck.com/potato4d/vue-dot-js-with-tsx-from-vue-2-dot-x-to-vue-3-number-v-tokyo11

Vue jsx TypeScript slide

VueでのTSX利用についてスライド。
Vue2/Vue3でのTSXの利用方法と制限、VueのSFCとTSXの比較など


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


gluesql/gluesql: GlueSQL is quite sticky, it attaches to anywhere.

github.com/gluesql/gluesql

Rust JavaScript DB

ライブラリとしてのSQLデータベース。
RustとWebAssembly(JavaScript)での実装が提供されている。
JavaScript版はInMemoery、LocalStorageなどで動作する


testimio/root-cause

github.com/testimio/root-cause

JavaScript browser library Tools testing

PuppeteerとPlaywrightを使ったE2Eテストの補助ツール。
それぞれの実行ステップをスクリーンショットで保存、コンソールログやネットワーク(HAR)ファイルの保存してレポートからテストが失敗した原因を検証できる。
単独で動かす方法とJestやMochaなどのテストフレームワークに統合するライブラリを提供している。


theheadless.dev - Learn Puppeteer & Playwright

theheadless.dev/

JavaScript browser document

PuppeteerとPlaywrightの使い方やユースケースについて紹介しているサイト。
基本的な使い方、E2Eテストやスクレイピングなどのユースケースごとの使い方について紹介している


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


dsherret/ts-morph: TypeScript Compiler API wrapper for static analysis and programmatic code changes.

github.com/dsherret/ts-morph

TypeScript AST library

TypeScript Compiler APIのラッパーライブラリ。
TypeScriptのAST操作やファイル操作などを扱えるAPIを提供する


davidkpiano/xactor: Actors for the modern web

github.com/davidkpiano/xactor

JavaScript TypeScript library

TypeScriptでのActorモデルの実装ライブラリ


ztext.js | 3D Typography for the Web

bennettfeely.com/ztext/

JavaScript library fonts

3Dタイポグラフィライブラリ。
文字列を3D表示するライブラリ


Bnaya/objectbuffer: JavaScript Object like api, backed by an arraybuffer

github.com/Bnaya/objectbuffer

JavaScript library webworker

ArrayBufferをバックエンドに使ったオブジェクトデータライブラリ。
通常のオブジェクトはWeb Workerなどに渡す際にコピーされるが、ArrayBufferなどのTransferableなオブジェクトならコピーせずに渡せるのを目的にしている。


edwinm/carbonium: Carbonium, for easy manipulation of the DOM

github.com/edwinm/carbonium

JavaScript DOM library

Proxyを使ったDOM操作ライブラリ。
セレクタで要素選択し、選択した複数の要素に対してまとめてstyleclassListなどのDOM APIでの操作を行えるライブラリ


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