Fork me on GitHub

2020-04-20のJS: puppeteer 3.0.0、Chrome 83 Beta、Vue.js 3.0 Beta

Edit on GitHub 編集履歴を見る

JSer.info #484 - Headless Chromeを扱うライブラリであるpuppeteer 3.0.0がリリースされました。

Chromium 81.0.4044.0へアップデートされています。
また、v2.1.0でFirefoxをサポートしていますが、インストール時にPUPPETEER_PRODUCT=firefox npm installとすることでFirefox Nightlyのバイナリをダウンロードできるようになっています。

その他にはNode.js 8のサポート終了やコードベースをTypeScriptへマイグレーションしていくなどの変更が含まれています。


Chrome 83 Betaがリリースされました。

前回お伝えしていたようにChrom 82はスキップされ、Chrome 83は本来より3週間早くリリースされます。

CSPとしてTrusted Typeを指定できるように、Form UI/Accessibilityの改善、Cross-Origin-Embedder-Policy(COEP)とCross-Origin-Opener-Policy(COOP)の実装などが行われています。詳細は次の記事で解説されています。

Origin Trialとして新しいNative File SystemPerformance.measureMemory()Scheduler.postTask()が追加されています。
その他には、ARIA Annotations 1.3 draftの対応、Barcode Detection API、CSSの@supports selector()のサポートなども行われています。


State of Vue Apr 16 2020というスライドでは現在開発中のVue 3のBeta版が公開されたことについて発表されています。

このスライドでは、Vue 3の主な変更について書かれています。
Composition API、Fragment、Teleport、Suspense、Custom Renderer APIについて紹介されています。
また、Tree-shakingの対応によるファイルサイズの削減やTypeScriptのサポートについても書かれています。

Vue 3のロードマップについては次のProject Boardを参照してください。


ヘッドライン


Node v13.13.0 (Current) | Node.js

nodejs.org/en/blog/release/v13.13.0/

node.js ReleaseNote

Node.js 13.13.0リリース。
fs.readvの追加、fs.readSyncoffsetlengthオプションの追加、dns.ALLフラグの追加。
HTTPヘッダサイズのデフォルト値を8KBから16KBに変更など


Release v3.0.0 · puppeteer/puppeteer

github.com/puppeteer/puppeteer/releases/tag/v3.0.0

Chrome Firefox library ReleaseNote

Puppeteer 3.0.0リリース。
Chromium 81にアップデート、Firefox Nightlyのバイナリをインストールできるように、Node.js 8のサポート終了など。


Chromium Blog: Chrome 83 Beta: Cross-site Scripting Protection, Improved Form Controls, and Safe Cross-origin Resource Sharing

blog.chromium.org/2020/04/chrome-83-beta-cross-site-scripting.html

Chrome ReleaseNote

Chrome 83 Betaリリース。
CSPとしてTrusted Typeを指定できるように、Form UI/Accessibilityの改善、COOPとCOEPの実装。
Origin Trialとして新しいNative File System、Performance.measureMemory()Scheduler.postTask()の追加。
その他には、ARIA Annotations 1.3 draftの対応、Barcode Detection API、CSSの@supports selector()のサポートなど


Release v1.7.0 · pikapkg/snowpack

github.com/pikapkg/snowpack/releases/tag/v1.7.0

npm browser Tools ReleaseNote bundler

Snowpack 1.7.0リリース。
--envのサポート、Babelプラグインの更新、JSXとTypeScriptのサポート。
また Snowpack 2.0に向けて変更予定について書かれている


アーティクル


AddyOsmani.com - Profiling React.js Performance

addyosmani.com/blog/profiling-react-js/

React performance article

Reactアプリのレンダリングパフォーマンスの計測方法について。
ExperimentalなReact Profiler API、Interaction tracingを使った方法。
PuppeteerやUser Timing API、Lighthouseを使ったReactに依存しない計測についてなど


A Tour of Inline Caching with Delete | WebKit

webkit.org/blog/10298/inline-caching-delete/

webkit performance article JavaScript

delete演算子でプロパティを削除するオブジェクトの構造が変わって構造IDが変わることで、構造IDをkeyにしてキャッシュするInline Cachingが無効化されて遅くなる問題について。
JSCではこのdeleteによる削除遷移に対する最適化を行うことで、Emberのデバッグビルドのようなdeleteを多用するアプリでのパフォーマンスを改善したという話


Making your website "cross-origin isolated" using COOP and COEP

web.dev/coop-coep/

Chrome security article

SharedArrayBufferなど高度な機能はself.crossOriginIsolatedtrueの場合に利用できる。
crossOriginIsolatedを有効にするには、Cross-Origin-Embedder-PolicyCross-Origin-Opener-Policyの対応が必要という話。
Cross-Origin-* HTTPヘッダーの動きについての解説


Speed Up Your Angular App - 14 Angular Optimization Tips | GrapeCity

www.grapecity.com/blogs/14-ways-to-speed-up-your-angular-app

Angular article performance

Angular 9を使ったアプリの最適化Tips。


What's new in ECMAScript 2020 | Strict Mode

www.strictmode.io/articles/whats-new-es2020/

ECMAScript JavaScript article

ES2020で追加される構文やメソッドについての紹介記事


スライド、動画関係


vime-js/vime: All your media player needs in one place - a modern alternative to Videojs and Plyr. Supports Html5, Hls, Dash, YouTube, Vimeo, Dailymotion and more to come.

github.com/vime-js/vime

JavaScript plugin video library

プラグインで拡張できるVideoプレイヤーライブラリ。
機能ごとにモジュール化されているため、必要なモジュールだけを利用できる。


State of Vue Apr 16 2020 - Google スライド

docs.google.com/presentation/d/1LHp-8hEtXEMSE1fd6YLAhYmtndQelQKbWlGggZKe4y8/edit#slide=id.p

Vue slide

Vue.js 3βリリースについてのスライド。
Vue 3の主な変更について。
Composition API、Fragment、Teleport、Suspense、Custom Renderer APIの対応など。
また、Tree-shakingの対応によるファイルサイズの削減やTypeScriptのサポートについて


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


Vuln Cost - security scanner for VS Code | Snyk

snyk.io/security-scanner-vuln-cost/

VSCode security Tools

VSCodeでrequireimportしているモジュールの脆弱性の数を表示する拡張機能


CSS via inline variables

codepen.io/WebReflection/pen/gOawwew

CSS HTML example

style属性にCSS Custom Propertiesを定義して、CSS側でCSS Custom Propertiesの変数の読み取りと初期値を指定するパターン。
利用側でCSS値をinjectできる仕組み


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


aeroheim/midori: library for animated image backgrounds

github.com/aeroheim/midori

JavaScript WebGL library

Canvas/WebGLを使った背景画像のアニメーションを描画するライブラリ。
読み込んだ背景画像に対してtransitionsやeffectsを設定できる。


yusufnb/verify-json: verify-json

github.com/yusufnb/verify-json

JSON library

JSONバリデーションライブラリ。
スキーマを定義してJSONオブジェクトをバリデーションできる


書籍関係


JavaScript Primer 迷わないための入門書 | azu, Suguru Inatomi |本 | 通販 | Amazon

www.amazon.co.jp/dp/4048930737/

JavaScript book

2020年4月27日発売
JavaScriptの入門書。
https://jsprimer.net/ の書籍版。


速習 TypeScript 第2版 速習シリーズ | 山田祥寛 | 工学 | Kindleストア | Amazon

www.amazon.co.jp/dp/B086JKVGPB/

TypeScript book

TypeScriptについての電子書籍


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