Fork me on GitHub

2018-02-05のJS: AVA 1.0.0β、TypeScript 2.7、MDNのブラウザ互換性情報

Edit on GitHub 編集履歴を見る

JSer.info #369 - テストフレームワークのAVA 1.0.0βが公開されています。

Babel 7βを利用するようになり、その影響でpowerAssertなど既存の変換オプションなどが変更されています。
babelcompileEnhancementsオプションで統一的に管理されるようになっていて、どちらもfalseにすればBabelを使った変換を一切行わないようになりました。

{
  "ava": {
    "babel": false,
    "compileEnhancements": false
  }
}

また、test関数がテストタイトルとなるものが必須となり、次のように名前のない関数だけを渡したtestは利用できなくなりました。

// エラー
test(t => t.pass());

AVA 1.0.0βはava@nextで試すことができます。

npm install ava@next

TypeScript 2.7がリリースされました。

strictの挙動にクラスのフィールドの初期化チェックを厳密に行うstrictPropertyInitializationの追加やDefinite assignment assertions(!)の追加、--esModuleInteropを追加しdefault exportするcommonjsとのinteropの改善などが行われています。

詳しくは次の記事で解説されています。


MDN browser compatibility data: Taking the guesswork out of web compatibility – Mozilla Hacks – the Web developer blogという記事ではMDNが表示しているブラウザの互換性データについて書かれています。

MDNの機能のリファレンスページにはその機能をサポートしてるブラウザやバージョンの一覧が表示されています。
このデータはmdn-browser-compat-dataというnpmパッケージからも利用できるようになっています。

この記事ではこれらのデータを活用方法などについて紹介しています。


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

JSer.info Sponsors

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


ヘッドライン


Node v9.5.0 (Current) | Node.js

nodejs.org/en/blog/release/v9.5.0/

node.js ReleaseNote

Node v9.5.0リリース。
performance.clearEntries(name)のサポート、cluster.settingscwdオプションの追加など


Announcing TypeScript 2.7 | TypeScript

blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/

TypeScript ReleaseNote

TypeScript 2.7リリース。
クラスプロパティのStrictオプションの追加、Definite assignment assertions(!)の追加、--esModuleInteropを追加しdefault exportするcommonjsとのinteropの改善。
Tuple、ininstanceof、オブジェクトリテラルの型改善など


Release 1.0.0-beta.1 · avajs/ava

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

JavaScript testing library

AVA 1.0.0β1リリース。
Babel 7βを利用するように、testがテストタイトルを必須に、powerAssertの無効オプションは、babelcompileEnhancementsオプションで管理されるように変更など


V8 JavaScript Engine: V8 release v6.5

v8project.blogspot.com/2018/02/v8-release-65.html

V8 ReleaseNote

V8 6.5リリース。
Unstruted code modeがデフォルトで有効化、WebAssemblyのStreaming compilationのサポート、Arrayメソッドの改善、疎の配列の改善など


アーティクル


Bootstrap 4.0 Release: What’s New?

auth0.com/blog/whats-new-in-bootstrap4/

CSS library article

BootStrap 4.0の変更点についての解説。


Stimulus 1.0: A modest JavaScript framework for the HTML you already have

m.signalvnoise.com/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have-f04307009130

JavaScript ruby library article

Stimulus 1.0リリース。
RailsのTurbolinksと共存して動作できるJavaScriptフレームワーク。
HTMLなテンプレートとJavaScriptなコントローラーを組み合わせてアプリケーションを作る。


Automatic visual diffing with Puppeteer – Monica Dinculescu

meowni.ca/posts/2017-puppeteer-tests/

JavaScript testing browser article

Puppeteerを使ったVisual Diffテストについて。
スクリーンショットをPixelmatchで比較し、画像のDiffを元にテストする話


Introducing React Easy State | @RisingStack

blog.risingstack.com/introducing-react-easy-state/

JavaScript redux library

ES Proxyを使ったステート管理ライブラリについて


Debugging JavaScript With A Real Debugger You Did Not Know You Already Have — Smashing Magazine

www.smashingmagazine.com/2018/02/javascript-firefox-debugger/

firefox debug article

Firefoxの開発者ツールの紹介とdebugger.htmlについて。


Jestなどを使わずにスナップショットテストを書く | Web Scratch

efcl.info/2018/02/02/snapshot-test/

JavaScript testing article

特別なライブラリを使わずにスナップショットテストを実装する方法について。


Testing your npm package before releasing it using Verdaccio + ngrok

blog.strapi.io/testing-npm-package-before-releasing-it-using-verdaccio-and-ngrok/

npm article testing

npmパッケージをpublishする前にテスト方法について。
Private npm registryであるVerdaccioにpublishして、localhostトンネルであるngrokを使ってテストするという話


Debugging CSS Performance with Chrome’s Profiling Tools - Ada Developers Academy

adadevacademy.tumblr.com/post/170121818942/debugging-css-performance-with-chromes-profiling

CSS performance article

CSSのパフォーマンス問題について。
Reactの問題かと疑って色々試した結果、CSSのレンダリングの問題であったケースについて。
インラインCSS、gradientを直すことで改善されたが、開発者ツールではこの問題がどう見えていたかについて


Introducing Node Clinic - A performance toolkit for Node.js developers | nearForm

www.nearform.com/blog/introducing-node-clinic-a-performance-toolkit-for-node-js-developers/

node.js performance Tools article

Node.jsアプリのパフォーマンスモニタリングツールであるClinicについて。
ダッシュボードでCPU、メモリ、イベントループの遅延などを見ることができる


How JavaScript works: The building blocks of Web Workers + 5 cases when you should use them

blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a

webworker article

WebWorkerの使い方やユースケースについて


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


MDN browser compatibility data: Taking the guesswork out of web compatibility – Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2018/02/mdn-browser-compatibility-data/

mdn document npm JavaScript CSS HTTP

MDNが利用してるブラウザのサポート状況をまとめたデータがnpmパッケージとして利用できるようになった。
このデータの使い方やサイトのサポートブラウザの可視化する拡張などについて


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


thejameskyle/glow: Make your Flow errors GLOW

github.com/thejameskyle/glow

flowtype console Tools

FlowのエラーをCodeFrameにして表示、Watchモード、globで対象のフィルターを行えるツール


FullHuman/purgecss: Remove unused css

github.com/FullHuman/purgecss

CSS Tools console

使ってないCSSを削除するツール。
コンテンツ(HTML、JSなど)とCSSを渡し、不要となったCSSを削除できる。


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