Fork me on GitHub

2019-01-22のJS: Node.js 11.7.0、Lighthouse 4.0.0、Flow to TypeScript

Edit on GitHub 編集履歴を見る

JSer.info #419 - Nodeの開発版であるv11.7.0がリリースされました。

zlibモジュールがbrotliでの圧縮、展開をサポートしています。

また同梱されるnpmが6.5.0へアップデートされ、今まで--experimental-workerのフラグ付きだったWorker Threadがデフォルトで有効になるといった変更が含まれています。


LightHouse 4.0.0がリリースされました。

PWAカテゴリを更新し、スコア表示ではなくOptimizedされているかをBadgeで表示するように変更。
speed-indexがthrottlingに対応した倍率となるように変更、スコアで満点を取ったときの表示を追加などが行われています。


Porting 30K lines of code from Flow to TypeScriptという記事では、Flowで型付けされたJavaScriptをTypeScriptでの型付けへ移行した経緯と方法について書かれています。

元々tcombでランタイムチェックしていたコードをFlowへ移行し、今回そのコードをTypeScriptでの型付けに移行した話が書かれています。

Babel 7でサポートされた@babel/preset-typescriptを利用し、TypeScriptのtscを型チェッカーとして使うようにして移行するアプローチについて書かれています。

FlowからTypeScriptへの移行方法、Flowの方がスムーズだった部分、サードパーティの型定義ファイルのカバレッジの違い、Lintやテストなどについても書かれています。

類似する趣旨の記事もいくつか書かれているので合わせてみるといいかもしれません。


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

JSer.info Sponsors

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


ヘッドライン


Release Workbox v4.0.0-beta.1 · GoogleChrome/workbox

github.com/GoogleChrome/workbox/releases/tag/v4.0.0-beta.1

ServiceWorker library ReleaseNote

Workbox 4.0.0β1リリース。
ウェブページで動作するworkbox-windowパッケージの追加、workbox-cli--watchの追加など。
破壊的な変更としてworkbox-precachingが書き直し、skipWaitingclientsClaimworkbox.core.*へ移動するなど


The future of TypeScript on ESLint - ESLint - Pluggable JavaScript linter

eslint.org/blog/2019/01/future-typescript-eslint

TypeScript ESLint news

ESLintのTypeScript対応の今後について。
typescript-eslintという統合されたプロジェクトで、TypeScriptのパーサやルールの開発を行っていく予定。


Node v11.7.0 (Current) | Node.js

nodejs.org/en/blog/release/v11.7.0/

node.js ReleaseNote

Node.js 11.7.0リリース。
zlibモジュールがbrotliサポート、npm 6.5.0へアップデート、Workerがデフォルトで有効になるなど


Prettier 1.16: HTML improvements and better CRLF handling · Prettier

prettier.io/blog/2019/01/20/1.16.0.html

JavaScript Tools ReleaseNote

Prettier 1.16リリース。
CRLFの対応改善、babel(js)のパーサをアップデート、テストに利用できる--checkフラグの追加など


Release 4.0.0 (2019-01-16) · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v4.0.0

Tools ReleaseNote browser performance

LightHouse 4.0.0リリース。
PWAカテゴリを更新しスコア表示ではなくなった。speed-indexがthrottlingに対応した倍率となるように変更、スコアで満点を取ったときの表示を追加など


7.3.0 Released: Named capturing groups, private instance accessors and smart pipelines · Babel

babeljs.io/blog/2019/01/21/7.3.0

babel ReleaseNote

Babel 7.3.0リリース。
proposal-private-methodsがgetterをサポート、proposal-pipeline-operatorで変換に対応、Named capturing groupsの対応など。
TypeScript Parserがimport typeとbigintのサポートなど


アーティクル


一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog

user-first.ikyu.co.jp/entry/goodbye-jquery

jQuery JavaScript refacoring

jQuery依存を外すためのリファクタリング方法について。
jQueryと同等の機能の実装方法や外すことでのパフォーマンスの差異などについて。


Web Page Usability Matters - DEV Community 👩‍💻👨‍💻

dev.to/addyosmani/web-page-usability-matters-3aok

browser performance article

ウェブページのパフォーマンスを計測することにおける指標についての記事。
多く4つのステップにわけ、その中で利用するメトリクスについて紹介している


Porting 30K lines of code from Flow to TypeScript

davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/

flowtype TypeScript article

3万行のFlowのコードをTypeScriptへ移行した話。
元々tcombによるRuntime CheckからFlowへ移行し、Babel 7 + TypeScript presetへ移行した話。
tscを型チェッカーとして利用し、どのようにFlowからTypeScriptへ移行していったかについて。
また移行した結果サードパーティの型定義の改善などから、型のカバレッジが向上した話など


Callback を撲滅せよ - Yahoo! JAPAN Tech Blog

techblog.yahoo.co.jp/javascript/nodejs/callback-to-promise/

node.js JavaScript Promises article

コールバックスタイルの非同期コードをPromiseのインターフェースに変更する際のスタイルについて。


How to start a Node.js project | Phil Nash

philna.sh/blog/2019/01/10/how-to-start-a-node-js-project/

node.js npm article

npmで公開されているコマンドラインツールを使って、Node.jsプロジェクトのセットアップを簡単に行う話。 ライセンス、gitinore、CoCファイルの作成、pacakge.jsonの作成を行うコマンドの紹介


スライド、動画関係


雰囲気でやってる人向けの Redux 再入門 - Speaker Deck

speakerdeck.com/jmblog/fen-wei-qi-deyatuteruren-xiang-kefalse-redux-zai-ru-men

JavaScript redux slide

Reduxでのステート管理についてのスライド。
Store/State、Actionとdispatch、Reducer、Middlewareのそれぞれの役割や動作の流れについて解説している。


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


CSS Feature Toggles - Chrome ウェブストア

chrome.google.com/webstore/detail/css-feature-toggles/aeinmfddnniiloadoappmdnffcbffnjg

CSS Chrome Extension

CSSの特定の機能を無効化するブラウザ拡張機能。
Grid、Flexbox、Sticky、Transform、Shapes、@supportsなどを無効化できる


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


npm/libnpm: programmatic npm API

github.com/npm/libnpm

npm library

npm APIを操作できるライブラリ。
パッケージやRegistry周りのAPI操作などが行える


wpk-cli/wpk: a friendly, intuitive, intelligent, and unofficial CLI for webpack

github.com/wpk-cli/wpk

webpack console Tools

webpackをラップしたCLI。
webpackの設定ファイルの作成や変更、ビルド、開発サーバの立ち上げ、webpack-bundle-analyzerを使ったbundleの解析などのコマンドを提供する


lukeed/sockette: The cutest little WebSocket wrapper! 🧦

github.com/lukeed/sockette

WebSocket library JavaScript

WebSocketを扱う小さなライブラリ。
自動再接続やイベントハンドリングのAPIを提供しているライブラリ


crubier/code-to-graph: Transforms JS code 🙈into mermaid flowchart 🐵

github.com/crubier/code-to-graph

JavaScript library Tools graphic

JavaScriptのコードから制御フローをgraphviz, mermaid flowchartなどの作図へ変換するツール


書籍関係


JavaScript コードレシピ集 | 池田 泰延, 鹿野 壮 |本 | 通販 | Amazon

www.amazon.co.jp/dp/4297103680/

JavaScript book

2019年1月25日発売
JavaScriptを使ったコード例を扱うレシピ本


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