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

開発者ツールではShape Path Editorの追加、CSS Grid InspectorやAccessibility inspectorの改善、CORSエラーのドキュメントへのリンクがコンソールへ表示されるようになっています。

また CSS Variable Fontsのサポート、Array#flatとArray#flatMapをデフォルト有効化、import.metaのサポート、WebDriver APIの更新などが行われています。

CSS周りの更新についてはMozillaのJen Simmonsが次のPodcastで話しているので、合わせて聞いてみるといいかもしれません。

328: Jen Simmons and Intrinsic Web Design - ShopTalk

Fetch APIのpolyfillライブラリであるwhatwg-fetch 3.0.0がリリースされました。

Release fetch 3.0.0 · github/fetch

今まではexportされていなかったHeaders、Request、Responseが参照できるように修正されています。

すでにメジャーブラウザのfetch実装ではcredentialsがomitからsame-originに変更されていますが、polyfillもこの変更の追従するように変更されました。

Make fetch() use "same-origin" credentials by default by annevk · Pull Request #585 · whatwg/fetch

また、Fetch APIをキャンセルするためのsignalオプションに対応しています。
signalに渡すAbortControllerに関してはFetchのpolyfillではなく、AbortControllerのabortcontroller-polyfillを使うことになっています。

Removing jQuery from GitHub.com frontend | GitHub Engineeringという記事ではGitHub.comでjQueryをウェブ標準のAPIをベースにどう置き換えていったかについて書かれています。

jQueryの機能はウェブ標準のAPIに置き換えることでMDNといったドキュメントをベースに開発できることやjQuery特有の動作を解消できることがあげられています。

どのようにjQueryを外していったかについては、コードで使われてるjQueryのメトリクスをとり可視化、ESLintを使ってjQueryの利用をCIでチェック、Polyfillを使うなど置き換えていった方針についてもかかれています。

お知らせ

今回で400回目のJSer.infoです。

400回記念イベントを2018年9月22日(土)に開催するので興味がある人は参照してみてください。
既に定員になっていますが、当日来れない人もいると思うので参加したい人はとりあえず申し込んでおくといいかもしれません。(入場に必要なIDを送る必要があるので直前より事前に登録しておくといいです)

どうしても参加したい人は@azu_reにご相談ください。

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

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

JSer.info Sponsors

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

ヘッドライン

New in Chrome 69 | Web | Google Developers

developers.google.com/web/updates/2018/09/nic69

Chrome ReleaseNote

Chrome 69リリース。
CSS Scroll Snap、CSS envとDisplay cutouts、Web Locks API、OffscreenCanvasのサポートなど

Node v10.10.0 (Current) | Node.js

nodejs.org/en/blog/release/v10.10.0/

node.js ReleaseNote

Node.js 10.10.0リリース
fsモジュールがTypedArrayとDataViewをサポート、http2モジュールがexperimentalではなくなった。
またvm.compileFunctionの追加など

Release fetch 3.0.0 · github/fetch

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

Fetch JavaScript library polyfill ReleaseNote

Fetch polyfill 3.0.0リリース。
credentialsのデフォルト値をsame-originに変更、Requestをキャンセルするためのsignalをサポート、仕様の追従など

Release v16.5.0 · facebook/react

github.com/facebook/react/releases/tag/v16.5.0

React ReleaseNote

React 16.5.0リリース。
React DevTools Profilerのサポート、onAuxClickのサポートなど

Firefox 62.0, See All New Features, Updates and Fixes

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

firefox ReleaseNote

Firefox 62.0リリース。
開発者ツールでShape Path Editorの追加、CORSエラー表示の改善。
Array#flatとArray#flatMapをデフォルト有効化、import.metaのサポート、WebDriver APIの更新など

Firefox 62 for developers - Mozilla | MDN

アーティクル

Web performance review: TradeMe | Wildly Inaccurate

wildlyinaccurate.com/web-performance-review-trademe/

browser performance article

SpeedCurveで計測しながら、ページの表示のパフォーマンスを改善する話。
何がボトルネックであるかを調べて、Hero Elementであるトップ画像の表示を早く表示するかについて。
また改善後もperformance budgetsをもとに修正し続けることについて

The Reporting API | Web | Google Developers

developers.google.com/web/updates/2018/09/reportingapi

browser WebPlatformAPI article

Reporting APIについて。
指定したURLに対してCSP違反、Feature Policy違反、deprecationｍネットワークエラーなどのレポートを送信できる。
またレポートが送信されたかをデバッグする方法について

Developer Tools support for Web Components in Firefox 63 – Firefox Nightly News

blog.nightly.mozilla.org/2018/09/06/developer-tools-support-for-web-components-in-firefox-63/

firefox debug WebComponents article

Firefox 63でWeb Componentsがデフォルトで有効化され開発者ツールも<template>要素やShadow DOMなどに対応する

Removing jQuery from GitHub.com frontend | GitHub Engineering

githubengineering.com/removing-jquery-from-github-frontend/

github jQuery JavaScript WebComponents article

GitHubがjQueryの依存を外すまでの話。
jQueryの機能はウェブ標準で代替できるものが増え、また一部のjQueryのメソッドチェーンには意図通りではない挙動があった。
コードで使われてるjQueryのメトリクスをとり可視化、ESLintを使ってjQueryの利用をCIでチェック、Polyfillを使うなどしてウェブ標準の実装に置き換えていった話。