Fork me on GitHub

2018-06-05のJS: Safari 12の変更予定、Jest 23、sucrase

Edit on GitHub 編集履歴を見る

JSer.info #386 - iOS 12、macOS 10.14に搭載予定のSafari 12の変更予定のリリースノートが公開されています。

font-displayのサポート、Intelligent Tracking Prevention 2.0Cross-Origin Read Blocking (CORB)の一部をサポート、またPassword AutoFillに関する機能が追加されています。

少し前にリリースされたSafari Technology Preview 57でもCross-Origin-Options HTTP response headerというクロスオリジンに関するセキュリティヘッダが試験的に実装されています。


JavaScriptテストフレームワークのJest 23がリリースされました。

Interactive Snapshot Modeの追加、非同期なカスタムmatcherを作成できるように、jest-eachがコアに同梱、toStrictEqualなどのmatcherの追加が行われています。

また、テストがハングした際のデバッグを補助する--detectOpenHandlesオプションが追加されています。


sucraseというTypeScript、Flow、JSXと一部のES.nextの機能の変換に限定したTranspilerが公開されています。Babelとは異なりES2015+をES5へ変換するのではなく、ES2015+がそのまま実行できる環境向けにモジュールやTypeScript、Flow、JSXなどを高速にJavaScriptへ変換することが目的となっています。

Babelのパーサをforkしたものを利用していて、TypeScriptなども@babel/preset-typescriptのように型情報を外してJavaScriptに変換できます。
(型チェックはおこないません)

Motivationにも書かれているように、Babelとは異なりASTまでは生成せずtokenレベルでのコード変換を行います。
そのため、BabelのようなASTプラグインはサポートしていませんが、変換ステップが少なくなるため高速な変換を行えます。

  • Babel: Source -> Token -> AST -> Transform -> AST -> Source
  • sucrase: Source -> Token -> Transform -> Source

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

JSer.info Sponsors

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


ヘッドライン


New in Chrome 67  |  Web  |  Google Developers

developers.google.com/web/updates/2018/05/nic67

Chrome ReleaseNote

Chrome 67リリース。
Desktop PWA、Generic Sensor API、BigIntのサポート、開発者ツールの更新など


Announcing TypeScript 2.9 | TypeScript

blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/

TypeScript ReleaseNote

TypeScript 2.9リリース。
import() typeの追加、JSONファイルをimportしたときに型推論がされるように、Tagged Template Stringの型改善など


Release 1.0.0-beta.5 · avajs/ava

github.com/avajs/ava/releases/tag/v1.0.0-beta.5

JavaScript testing ReleaseNote

AVA 1.0.0-beta.5リリース。
ava.config.jsの設定ファイルのサポート、t.throwscodeプロパティをサポートなど


Release 8.6 “Follow Reason” · postcss/autoprefixer

github.com/postcss/autoprefixer/releases/tag/8.6.0

CSS Tools ReleaseNote

Autoprefixer 8.6リリース。
CSS Gridのgapをサポートなど


Release Notes for Safari Technology Preview 57 | WebKit

webkit.org/blog/8307/release-notes-for-safari-technology-preview-57/

webkit ReleaseNote

Safari Technology Preview Release 57リリース。
クロスオリジンWindow間でのアクセスを制限できるCross-Origin-Options HTTPヘッダの試験的サポート、modern EME APIをデフォルトで有効化など。


Jest 23: 🔥 Blazing Fast Delightful Testing · Jest

facebook.github.io/jest/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html

JavaScript testing library ReleaseNote

Jest 23リリース。
Interactive Snapshot Modeの追加、非同期なカスタムmatcherを作成できるように、jest-eachがコアに同梱、toStrictEqualなどのmatcherの追加


What’s New in Safari - Apple Developer

developer.apple.com/safari/whats-new/

safari ReleaseNote

Safari 12の変更予定。
watchOSで動作するように、font-displayのサポート、ITP 2.0、CORBの一部をサポート、.safariextzスタイルのSafari拡張を非推奨化など


アーティクル


davidea.st/articles/comlink-simple-web-worker

JavaScript webworker article

Web Workerの動作についての解説やComlinkを使ったWeb Workerの利用方法について


Beyond SPAs: alternative architectures for your PWA  |  Web  |  Google Developers

developers.google.com/web/updates/2018/05/beyond-spa

server ServiceWorker article JavaScript

Service WorkerとExpressを使ったページ単位の(SPAではない)ウェブアプリのためのアーキテクチャと実装サンプルについて。
ルーティングをクライアントとサーバで共有し、パーシャルなViewをStream APIで取得しレンダリングする。また動的なメタ情報の渡し方についてなど


Getting Started With CSS Layout — Smashing Magazine

www.smashingmagazine.com/2018/05/guide-css-layout/

CSS article

CSSのレイアウトについての記事。
Float、Flex、Gridなどのレイアウトの仕組み。
BoxとContents、Alignmentなどについて


スライド、動画関係


JavaScript engines: The Good Parts™ // slidr.io

slidr.io/mathiasbynens/javascript-engines-the-good-parts#1

JavaScript slide

JavaScriptエンジンの最適化パスについてのスライド。
V8、Spidermonkey、Chackra、JavaScriptCoreそれぞれの最適化パスの流れやShapeと最適化が崩れるパターンについて


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


GoogleChromeLabs/critters: 🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.

github.com/GoogleChromeLabs/critters

webpack plugin performance

クリティカルCSSのインライン化、外部ファイルのlazy loadとprefetchの対応を行うwebpack plugin。


Reach Router - Overview

reach.tech/router

JavaScript React library accessibility

React向けのルーターライブラリ。
React Routerの元々の作者が作成していて、Focus Mangementなどのアクセシビリティが考慮されている。


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


alangpierce/sucrase: Super-fast alternative to Babel for when you can target modern JS runtimes

github.com/alangpierce/sucrase

babel jsx flowtype TypeScript Tools

BabelのParserをforkして作られたJSX/Flow/TypeScriptなどをJSに変換するツール。
ES2015+が動く実行環境向けへコードを変換する際に、それ以外(JSX/Flow/TypeScript)の変換を高速に行うことが目的。
Babelとは異なりプラグインのステップを省くことで変換速度を向上させている。


hybridsjs/hybrids: UI library for creating Web Components with simple and functional API

github.com/hybridsjs/hybrids/

WebComponents library

lit-htmlのようにCustom Elementを作成できるhtmldefineなどを提供するライブラリ。


github.com/Alex1990/tiny-cookie

JavaScript library

小さなクッキー操作ライブラリ


github.com/GoogleChromeLabs/comlink

JavaScript library webworker

Proxyを使ったWeb Workerライブラリ。
Worker内での実装をProxyしてpostMessageなどのメッセージングを隠蔽してくれる


marblejs/marble: Marble.js - functional reactive HTTP middleware framework built on top of Node.js platform, TypeScript and RxJS library.

github.com/marblejs/marble

Rx JavaScript server HTTP

Rxjsを使ったHTTPミドルウェアフレームワーク。
Node.jsにおいてリクエスト、レスポンスに対する処理を書ける。


Keyframes.app

keyframes.app/

CSS Tools editor

CSS animationのGUIエディタ。 CSS animationのプロパティを設定して、実際にアニメーションとして再生しながら変化するプロパティを決めたCSSを出力できる


書籍関係


Testing Vue.js Applications: Edd Yerburgh: 9781617295249: Amazon.com: Books

www.amazon.com/dp/1617295248/

Vue testing book JavaScript

2018年8月31日発売。
Vue.jsのテスト本。


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