Fork me on GitHub

2019-05-21のJS: TypeScript 3.5 RC、Firefox DevTools改善、Accessibility Insights(アクセシビリティテスト)

Edit on GitHub 編集履歴を見る

JSer.info #436 - TypeScript 3.5 RCがリリースされました。

型チェックと--incrementalオプションを使ったビルドのパフォーマンス改善がされています。
また、Omitヘルパー型がlib.d.tsに追加、Union型におけるプロパティチェックの改善なども行われています。

破壊的な変更としてGeneric type parameterのデフォルトが{}からunknownへと変更されています。

3.4までは次のようなコードにおけるTは何もextendsしていない場合は{}として解決されていました。
3.5からはTunknown型として解決されるようになります。

function foo<T>(x: T): [T, string] {
    return [x, x.toString()]
    //           ~~~~~~~~ error! Property 'toString' does not exist on type 'T'.
}

簡単なワークアラウンドとしては明示的にTのデフォルトを{}型にすることです。

function foo<T extends {}>(x: T): [T, string] {
    return [x, x.toString()]
}

また、tsconfig.jsontarget:es5の場合にObject.keysがプリミティブ型を受け入れないように修正されました。
これは、ES5まではObject.keys(10)のようなコードは例外が発生するのがECMAScriptの仕様だったため、それに合わせる修正です。
一方で、ES2015からはObject.keys(10)は例外が発生しないのがECMAScriptの仕様なので、TypeScriptもそれに合わせています。

それ以外にも細かい破壊的な変更があるので詳しくはBreaking Changesを参照してください。


Accessibility InsightsというウェブサイトやWindowsアプリケーションのアクセシビリティテストツールが公開されています。
ウェブ向けではChromeやmacOS版も公開されたMSEdgeのInside Preview向けのブラウザ拡張が公開されています。

FastPassとAssessmentの2つのシナリオでのアクセシビリティのテストをサポートしていて、自動チェックとシナリオ元にした手動チェックを行えます。
また、Tabキーのフォーカス移動の可視化、カラーテスト、WAI-ARIAのLandmarks表示などアクセシビリティテストの補助機能も用意されています。

次のページで使い方などが解説されているので、興味がある人は見てみるとよさそうです。


ヘッドライン


Release v3.14.0 · lerna/lerna

github.com/lerna/lerna/releases/tag/v3.14.0

monorepo Tools JavaScript ReleaseNote

monorepo管理ツールのlerna 3.14.0リリース。
npm publish時の2要素認証(OTP)のサポート、--conventional-prerelease--conventional-graduateのサポートなど


Release v2.7.0 · nuxt/nuxt.js

github.com/nuxt/nuxt.js/releases/tag/v2.7.0

Vue ReleaseNote

Nuxt.js 2.7.0リリース。
サーバサイドのログもブラウザコンソールに表示されるように、store/ディレクトリのファイル監視の改善など


Announcing TypeScript 3.5 RC | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-3-5-rc/

TypeScript ReleaseNote

TypeScript 3.5 RCリリース。
型チェックとビルドのパフォーマンス改善、Omitヘルパー型を追加、Union型の改善など。
破壊的な変更としてGeneric type parameterのデフォルトが{}からunknownへと変更、target:es5時にObject.keysがプリミティブ型を受け取らないように変更など


V8 release v7.5 · V8

v8.dev/blog/v8-release-75

V8 ReleaseNote

V8 v7.5リリース。
WebAssemblyのコンパイル結果を暗黙的にキャッシュする変更、ECMAScript ProposalのNumeric separatorsを実装。
ネットワークからスクリプトを読み込みながらパースする際に、メインスレッドによってブロックされる問題を解消など


Release Notes for Safari Technology Preview 82 | WebKit

webkit.org/blog/8921/release-notes-for-safari-technology-preview-82/

safari webkit ReleaseNote

Safari Technology Preview 82リリース。
Fetch APIのkeepAliveオプションのサポート、Web GPU APIをnavigator.gpuに移動など


Introducing the first Microsoft Edge preview builds for macOS - Microsoft Edge Blog

blogs.windows.com/msedgedev/2019/05/20/microsoft-edge-macos-canary-preview/

MSEdge mac ReleaseNote

MSEdgeのmacOS対応版がInsider Previewでリリースされた


アーティクル


TypeScript 3.0: The unknown Type — Marius Schulz

mariusschulz.com/blog/typescript-3-0-the-unknown-type

TypeScript article

TypeScript 3.0で導入されたunknown typeについての解説。
any typeとの違い、unknown typeに対して任意の操作ができない点、unknown typeは型を絞り込んでから使う点について


Faster smarter JavaScript debugging in Firefox DevTools - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2019/05/faster-smarter-javascript-debugging-in-firefox/

firefox debug performance article

Firefox 67の開発者ツールの改善点について。
ロードパフォーマンスの改善、Break Pointの改善やLog Pointの対応、Web Workerスクリプトとの切り替えを改善、Source Mapを使った細かい表示の改善など


const assertions are the killer new TypeScript feature

blog.logrocket.com/const-assertions-are-the-killer-new-typescript-feature-b73451f35802

TypeScript article

TypeScript 3.4で導入されたconst assertionについて。
リテラルの型拡大を防いだり、オブジェクトのプロパティをreadonlyにできるなど


Google Fonts is Adding font-display 🎉—zachleat.com

www.zachleat.com/web/google-fonts-display/

google fonts article

Google Fontsがdisplayパラメータでfont-displayプロパティの指定をサポートしたことについて。


[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる | Kabuku Developers Blog

www.kabuku.co.jp/developers/framework-agnostic-state-modification

JavaScript article

immerを使ったステート更新ロジックに分け、Angular、Vue、Reactなどのフレームワーク内に組み込む方法について。


スライド、動画関係


JSでDoSる/ Shibuya.XSS techtalk #11 - Speaker Deck

speakerdeck.com/masatokinugawa/shibuya-dot-xss-techtalk-number-11

JavaScript node.js slide security

JavaScriptで例外が発生するパターンやNode.jsでクラッシュするケーススタディについてのスライド


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


DasSur.ma – Raw WebAssembly

dassur.ma/things/raw-wasm/

WebAssembly JavaScript browser

WebAssemblyがstack-based VMであるとはどういうことかを見ていく記事。
WebAssembly text形式であるwatを手書きして、WebAssemblyでのモジュールの定義、関数の定義と呼び出し、メモリの確保、wasmの読み込みについて。


Accessibility Insights

accessibilityinsights.io/

accessibility Chrome windows Extension

アクセシビリティのチェックを補助するブラウザ拡張。
アクセシビリティのチェック項目を可視化したり、FastPassとAssessmentの2つのシナリオでのテストをサポートしている。


Inside Microsoft’s surprise decision to work with Google on its Edge browser - The Verge

www.theverge.com/2019/5/6/18527550/microsoft-chromium-edge-google-history-collaboration

MSEdge Chrome インタビュー OSS google MS

MSEdgeがChromiumベースになった背景について。
最初はEdgeの利用率、最新の機能の実装遅れなどの問題を解決する選択肢の一つだったが、組織改編、Septagonというプロトタイプ、切り替えの公表から実際の作業に入った話など


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


Reakit

reakit.io/

React accessibility library

アクセシビリティを考慮したReactコンポーネントライブラリ。
React Hooksへの対応や基礎的なコンポーネントを提供し、コンポーネントを組み合わせ利用できるようにすることを目的にしている。


esxjs/esx: Like JSX, but native and fast

github.com/esxjs/esx

jsx React node.js library

JSXライクな構文をサポートしたTagged Templateライブラリ。
またReactをesxの構文に変換するBabelプラグインもあり、ReactのSSRテンプレートエンジンとしても利用できる


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