Fork me on GitHub

JavaScriptの最新情報を紹介する週刊ブログ

2017-04-25のJS: Firefox 53、jsdom 10.0.0

2017年04月25日 Edit on GitHub 編集履歴を見る

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

CSS Masksやdisplay: flow-rootのサポート、<video>と<audio>のデフォルトUIの変更、URLSearchParamsの仕様追従、auxclickイベントの対応などが行われています。

また、ES2015のFunction.nameの仕様追従が行われました。
Firefox52までは次のように無名関数はfn.nameがundefinedとなっていました。

var foo = function() {};
console.log(foo.name); // undefined

Firefox53からは、無名関数やArrow Functionに対してもコンテキストに基づいた名前がつくようになりました。

var foo = function() {};
console.log(foo.name); // "foo"
const bar = () => {}
console.log(bar.name); // "bar"

Node.jsのHTML/DOM実装であるjsdom 10.0.0がリリースされました。

Node.js 5.x以下はサポートしないことや基本的な使い方が大きく変更されています。

今までは、jsdom.envというメソッドで初期化を行っていました。

var jsdom = require("jsdom");
jsdom.env(
  `<!DOCTYPE html><p>Hello world</p>`,
  function (err, window) {
    console.log(window.document.querySelector("p").textContent); // "Hello world"
  }
);

10.0.0からは、JSDOMコンストラクタをnewすることで、domオブジェクト経由でwindowを手に入れることができるようになりました。

const { JSDOM } = require("jsdom");
const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
console.log(dom.window.document.querySelector("p").textContent); // "Hello world"

その他にもScriptやCookieJarの追加、omitJsdomErrorsをomitJSDOMErrorsへリネーム、dirの対応改善、window.postMessage()のoriginチェックを修正などが含まれています。

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

JSer.info Sponsors

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

ヘッドライン

Release Notes for Safari Technology Preview 28 | WebKit

webkit.org/blog/7516/release-notes-for-safari-technology-preview-28/

safari ReleaseNote

Safari Technology Preview Release 28リリース。
バックグラウンドタブの処理を抑制、クロスオリジン iframeのrequestAnimationFrameを30fpsに制限するなど。
WebCryptoでAES-CTRをサポート

Firefox — Notes (53.0) — Mozilla

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

firefox ReleaseNote

Firefox 53.0リリース。
ES2015のFunction.nameの仕様追従
var f = function() {};f.name; // "f"、auxclickイベントの対応、display: flow-rootの対応など

New in Chrome 58  |  Web  |  Google Developers

developers.google.com/web/updates/2017/04/nic58

Chrome ReleaseNote

Chrome 58リリース。
IndexedDB 2.0、display: flow-rootのサポートなど

jsdom/Changelog.md at 10.0.0 · tmpvar/jsdom

github.com/tmpvar/jsdom/blob/10.0.0/Changelog.md

JavaScript node.js DOM library ReleaseNote

jsdom 10.0.0リリース。
Node.js <=5のサポートを終了、基本的な使い方を変更(new JSDOM(html)など)、Scriptの追加。
omitJsdomErrorsをomitJSDOMErrorsへリネーム、dirの対応改善、window.postMessage()のoriginチェックを修正など

アーティクル

Async iterators and generators - JakeArchibald.com

jakearchibald.com/2017/async-iterators-and-generators/

ECMAScript JavaScript

Async iteratorについての解説

A Vue.js introduction for people who know just enough jQuery to get by

medium.freecodecamp.com/vue-js-introduction-for-people-who-know-just-enough-jquery-to-get-by-eab5aa193d77

Vue tutorial

Vue.jsを使ってTwitterの投稿画面のようなダイアログ表示を作成するチュートリアル。
機能毎に実装を進めていて、データバインディングやメソッドの呼び出し、アニメーションなどについて解説してる。

FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ

developers.cyberagent.co.jp/blog/archives/6057/

browser performance

パフォーマンス改善についての解説記事。
Service Workerを使ったキャッシュ、Intersection Observerを使ったlazy load、SVGスプライトをやめて個別にSVGを読み込むなど。

脱jQueryのためにしたこと - Qiita

qiita.com/clockmaker/items/50c3a9772e36a95ae500

jQuery Vue リファクタリング opinion

jQueryで書かれたサイトを標準のAPIやVue.jsを使って書き換えていく話

Visual Testing — the pragmatic way to test UIs – Chroma

blog.hichroma.com/visual-testing-the-pragmatic-way-to-test-uis-18c8da617ecf

UI testing React

コンポーネントのビジュアルテストについて。
スナップショットテスト、ReactStoryBookなどを使ったUI component explorersのアプローチなどについて

How to build a math expression tokenizer using JavaScript (or any other language)

medium.freecodecamp.com/how-to-build-a-math-expression-tokenizer-using-javascript-3638d4e5fbe9

JavaScript tutorial

JavaScriptでトークナイザーを書いていくチュートリアル

JavaScript Testing Tool Showdown: Sinon.js vs testdouble.js — SitePoint

www.sitepoint.com/javascript-testing-tool-showdown-sinon-js-vs-testdouble-js/

JavaScript testing

Sinon.jsとtestdouble.jsの比較記事

React Fiber現状確認 - blog.koba04.com

blog.koba04.com/post/2017/04/25/a-state-of-react-fiber/

React article

React v16から入る予定のFiberアーキテクチャについて。
ReactコアのReconciliationを置き換えるもので、今までは作業単位が1つのツリーだったものを、Filberという作業単位で行うようにする仕組みの解説。
また、v16以降に入るError Boundaryなどの変更について。

スライド、動画関係

Browser animation in 2017 by birtles

slides.com/birtles/browser-animation-2017

JavaScript CSS animation slide

CSS Animations/Web Animationsについてのスライド。
Web Animations APIやフレームアニメーションについて、またその実装状況にについて

abouthiroppy/node8

abouthiroppy.github.io/slides/node8/

node.js V8 slide

5月30日にリリース予定のNode.js 8.0.0についてのスライド。
Node.js 8.0.0ではV8の新しいコンパイラパイプラインが入る予定。
またNode.js 7.x ~ 8.0.0で入る予定の変更点について。

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

ericvicenti/intro-to-react: A Hands-On Walkthrough of your first React Web App

github.com/ericvicenti/intro-to-react

React tutorial

Reactについて学ぶワークショップの資料と動画

Get Started With Analyzing Runtime Performance  |  Web  |  Google Developers

developers.google.com/web/tools/chrome-devtools/evaluate-performance/

performance tutorial Chrome

Chromeの開発者ツールを使ったパフォーマンス解析のチュートリアル

WCAG 2.0 達成方法集

waic.jp/docs/WCAG-TECHS/Overview.html

accessibility W3C 翻訳

Techniques for WCAG 2.0の翻訳

State Architecture Patterns in React: A Review – Skyler Nelson – Medium

medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6

React 設計 opinion

Reactでよく見るステート管理パターンについて。
ナイーブな階層構造、上から下へStateを渡すTop-Heavy Architecture(Central State)、Pub/Subなどについて

Introducing a faster BBC News front page | Wildly Inaccurate

wildlyinaccurate.com/introducing-a-faster-bbc-news-front-page

browser performance React opinion

BBC Newsのパフォーマンス改善について。
SpeedCurveを使って計測を行い、画像遅延ロード、Reactをサーバサイドレンダリングのみに利用してる。
まだ改善の1段階で、Reactをブラウザ側で動かしたときにモバイルだと重たい問題などが課題となってる(そのためサーバサイドレンダリングのみになっている)

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

chadhietala/babel-plugin-debug-macros

github.com/chadhietala/babel-plugin-debug-macros/

JavaScript babel plugin

Babelを使ったHygenic Macroのプラグイン。
assertやdeprecate、warning、feature flagなどのマクロ化したもの

aweary/tinytime: A straightforward time and time formatter in <1kb

github.com/aweary/tinytime

JavaScript library

小さなstrtime的なライブラリ。 時間フォーマット

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