Fork me on GitHub

2018-05-15のJS: フロントエンドツールアンケート結果、Firefox 60、Lighthouse 3.0β

Edit on GitHub 編集履歴を見る

JSer.info #383 - フロントエンドツールアンケート2018の結果が公開されています。

JavaScriptやCSSに関するツールやライブラリなどについてのアンケート結果をまとめたもので、前回の結果からの変化などについても掲載されています。

利用言語、ライブラリ、Lint、テスト、bundlerなどについて項目ごとのアンケート結果が公開されているので見てみると良さそうです。


Firefox 60.0がリリースされました。

ES Modulesの有効化、Same-Site Cookiesのサポート、Array#valuesの有効化、Web Authentication APIのサポート、WebVR APIがmacOSで有効化などが行われています。

ES ModulesはこれでIEを除くメジャーブラウザでサポートされたことになりました。

また、Firefox Quantum for Enterpriseと名がついたエンタープライズ向けのESR(Extended Support Release)版もFirefox 60がベースとなっています。


Lighthouse 3.0がプレリリースされ新しい機能について解説されています。

レポートUIの変更、First Contentful Paintの追加、RTTのコスト表示の追加など。
その他の変更点として、スコアのWeightの変更、First InteractiveをFirst CPU Idleに名前の変更など指標が変更されています。

また、LightHouseの記録下内容をPerformanceタブで見るView Traceなどといった機能も追加されています。
この機能については次の発表動画でデモがおこなわれています。

Google I/Oの発表でもLighthouseを扱った内容は多いのであわせて見るとよさそうです。


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

JSer.info Sponsors

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


ヘッドライン


Node v10.1.0 (Current) | Node.js

nodejs.org/en/blog/release/v10.1.0/

node.js ReleaseNote

Node v10.1.0リリース。
require("fs/promises")require("fs").promisesに変更、request.abortedプロパティの追加など


Firefox — Notes (60.0) — Mozilla

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

firefox ReleaseNote

Firefox 60.0リリース。
ES Modulesの有効化、Array#valuesの有効化、Web Authentication APIのサポート、WebVR APIがmacOSで有効化。
またESRのバージョンが60へ更新など。


Video.js 7 is here! 🎉 | Video.js Blog

blog.videojs.com/video-js-7-is-here/

JavaScript video library ReleaseNote

Video.js 7リリース。
Video.js HTTP Streaming (VHS)プラグインでHLSとDASHを試験的にサポート。
古いブラウザサポートのコードを削除、オプトアウトだったGoogle Analyticsの収集を終了など


Release v1.0.0 · webpack-contrib/webpack-serve

github.com/webpack-contrib/webpack-serve/releases/tag/v1.0.0

webpack debug library ReleaseNote

webpack-serve 1.0.0リリース。
webpack-dev-serverの後継となるwebpack向けの開発サーバ


Release v0.72.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.72.0

flowtype ReleaseNote

flow 0.72.0リリース。
$Either<T>, $All<T>, $Type<T>の廃止。
Language Server Protocolの改善、Stage 1のnullish coalescingをサポートなど


The Front-End Tooling Survey 2018 - Results - AshleyNolan.co.uk - Blog and Portfolio for Ashley Nolan

ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results

CSS JavaScript Tools アンケート news

JavaScript、CSS、ツールなどについての開発者アンケート。 利用言語、ライブラリ、Lint、テスト、bundlerなどについて項目ごとのアンケート結果が公開されている


アーティクル


Using Lighthouse To Improve Page Load Performance  |  Web  |  Google Developers

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

JavaScript Tools performance article

Lighthouseによって検出できるページロードパフォーマンスの問題について。
preloadした方がいいリソースの表示、JavaScriptのパースと実装の時間表示、リダイレクト検出、利用してないコード量の表示、preconnectによるRTTのコストの削減予測など


The npm Blog — `npm audit`: identify and fix insecure...

blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure

npm article

npm 6で入ったセキュリティチェックをするnpm auditコマンドについての解説


Introducing the Microsoft Edge DevTools Protocol - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

blogs.windows.com/msedgedev/2018/05/11/introducing-edge-devtools-protocol/#0b7zCRAl1ApIqZ6D.97

MSEdge article debug

リモートデバッグができるMicrosoft Edge DevTools Protocolの解説。


実践PWA:光る電卓「Llumino PWA」の開発と技術解説 - ここぽんのーと

cocopon.me/blog/2018/05/pwa-llumino-dev/

PWA JavaScript article

ネイティブアプリだったものをPWAで再現する話。
CSSアニメーション、Service Worker、Web App Manifest、インタラクションについて


Announcing Lighthouse 3.0  |  Web  |  Google Developers

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

JavaScript ReleaseNote Tools performance

Lighthouse 3.0プレリリース。 レポートUIの変更、それぞれのスコアのWeightの変更、First Contentful Paintの追加、RTTのコスト表示の追加など。 その他の変更点としてFirst InteractiveをFirst CPU Idleに名前の変更など


スライド、動画関係


Google I/O 2018 - All Sessions - YouTube - YouTube

www.youtube.com/playlist?list=PLOU2XLYxmsIInFRc3M44HUTQc3b_YJ4-Y

google video

Google I/O 2018の動画まとめ


TSConf 2018 - YouTube - YouTube

www.youtube.com/playlist?list=PL2z7rCjEG2ksF0rJ8Qwp1y5eTjqiPIRfT

TypeScript イベント video

TSConf 2018の動画まとめ


What's new in Chrome DevTools (Google I/O '18) - YouTube

www.youtube.com/watch?v=mfuE53x4b3k&feature=youtu.be

Chrome debug video

Chromeの開発者ツールの新しい機能について。
非同期処理やWorkerでのブレークポイントの改善、検索機能の改善、LightHouseのアップデートとView Traceのデモ、コンソールのEaget Evaluationのデモなど


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


jspm.io - Native ES Modules CDN

jspm.io/

JavaScript library webservice

npmモジュールをES moduleとしてロードできるようにしてくれるCDNサービス。
CommonJSなモジュールはES moduleとして読み込めるように変換される。


isomorphic-git/isomorphic-git: A pure JavaScript implementation of git for node and browsers!

github.com/isomorphic-git/isomorphic-git

JavaScript git library

Pure JavaScriptなGitの実装ライブラリ。
Node.jsとブラウザで動作する


Nest - A progressive Node.js web framework

nestjs.com/

node.js library TypeScript

Node.jsのウェブフレームワーク。
TypeScriptで書かれていて、AngularのようにDecoratorを使った宣言的な記述を行う。


jorgebucaran/classcat: JavaScript function for conditionally concatenating CSS classes.

github.com/jorgebucaran/classcat

JavaScript library

CSSのクラス名文字列を結合したり、条件付きで消したりするライブラリ。


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