Fork me on GitHub

2018-09-11のJS: Firefox 62.0、whatwg-fetch 3.0.0、Removing jQuery from GitHub.com

Edit on GitHub 編集履歴を見る

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

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

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

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


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

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

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

また、Fetch APIをキャンセルするためのsignalオプションに対応しています。
signalに渡すAbortControllerに関してはFetchのpolyfillではなく、AbortControllerabortcontroller-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にご相談ください。


ヘッドライン


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モジュールがTypedArrayDataViewをサポート、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#flatArray#flatMapをデフォルト有効化、import.metaのサポート、WebDriver APIの更新など


アーティクル


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違反、deprecationmネットワークエラーなどのレポートを送信できる。
またレポートが送信されたかをデバッグする方法について


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を使うなどしてウェブ標準の実装に置き換えていった話。


Asynchronous Access to HTTP Cookies  |  Web  |  Google Developers

developers.google.com/web/updates/2018/09/asynchronous-access-to-http-cookies

Chrome JavaScript article

Chrome 69でOrigin Trialを開始した Cookie Store APIについて。
document.cookie APIとは異なり非同期処理として扱え、値の変更も監視できる。
またServie Workerからも利用できるようになっている


Inside look at modern web browser (part 1)  |  Web  |  Google Developers

developers.google.com/web/updates/2018/09/inside-browser-part1

Chrome browser article

Chromeのプロセスについての連載。
どのようにプロセス分離されているか、ページナビゲーションからの各処理の流れなどについて


A tour of JavaScript timers on the web | Read the Tea Leaves

nolanlawson.com/2018/09/01/a-tour-of-javascript-timers-on-the-web/

JavaScript article

JavaScriptのタイマー処理についての解説。
microtask、setTimeout/setInterval
setImmediate
requestAnimationFramerequestIdleCallbackについて


TypeScript with Babel: A Beautiful Marriage – DailyJS – Medium

medium.com/dailyjs/typescript-babel-ce24f724398

TypeScript babel article

Babel 7の@babel/preset-typescriptでサポートされたTypeScriptのコードコンパイルについて。
ユースケースや.tsをBabelでコンパイルしてtscで型チェックをする例などについて。


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


lusakasa/sqorn: A Javascript library for building SQL queries

github.com/lusakasa/sqorn

JavaScript SQL library

Tagged Template Literalを使ったSQLクエリビルダー


書籍関係


Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発 | 花谷 拓磨 |本 | 通販 | Amazon

www.amazon.co.jp/dp/4863542569/

Vue book

2018年10月19日発売
Nuxt.jsについての書籍


Practical React Native: Build Two Full Projects and One Full Game using React Native: Frank Zammetti: 9781484239384: Amazon.com: Books

www.amazon.com/dp/1484239385/

JavaScript React book

2019年3月10日発売
React Nativeについての書籍


Browsers, Devices, and Fonts: A Designer's Guide to Fonts and How They Function on the Web: Gary Rozanc: 9781138612310: Amazon.com: Books

www.amazon.com/dp/1138612316/

web desin fonts book

2018年12月8日発売
ウェブタイポグラフィについての書籍。
Web Fontsとデザインについて


Jump Start Vue.js: Nilson Jacques: 9781925836097: Amazon.com: Books

www.amazon.com/dp/1925836096/

Vue JavaScript book

2019年2月25日発売
Vue、Vuex、Nuxt.jsについて簡潔に紹介する書籍


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