Fork me on GitHub

2017-05-30のJS: npm 5.0.0プレリリースとNode.js 8.0.0、Chrome 60の開発者ツール

Edit on GitHub 編集履歴を見る

JSer.info #333 - npm v5.0.0がプレリリースされました

npm i -g npm@5

でnpmだけを更新することができます。
(Windowsの場合はfelixrieseberg/npm-windows-upgrade: Upgrade npm on Windowsを利用したほうが安全だとは思います。)

npm@5は2017-05-30リリース予定(日本時間だと明日)のNode.js 8.0.0同梱される予定となっています。

追記: Node v8.0.0 (Current) | Node.jsリリースされました。

npm@5の変更点としてはインストール速度の改善され、npm install--saveオプションがデフォルト化しています。
加えて従来のshrinkwrapとは別のロックシステムとしてpackage-lock.jsonの導入されています。
package-lock.jsonnpm installする際にデフォルトで作成/更新される点はYarnと同様です。
Gitで依存してるモジュールもprepareが呼ばれるように、--offline/--prefer-online/--prefer-offlinesha512のサポートなどが追加されています。

npm install ../のように相対パスでインストールした時の挙動が変更されています。
従来は相対パス先のディレクトリをまるごとコピーする挙動でしたが、npm@5からはsymlinkを貼るようになりました。

symlink

この相対パスのインストールは将来的にはlink:という識別子に変更される可能性がありそうです(今はfile:のまま)
Yarnも同様の仕組みをサポートする予定です。

sha512についてもnpm registryの都合でYarnもSHA1を使っていましたが、こちらも追従するようです。

Notes: Yarnは今1.0に向けてIssueのtriageyarn workspace(Lernaみたいなもの)のサポートを進めています。


What's New In DevTools (Chrome 60)  |  Web  |  Google Developersという記事ではChrome 60の開発者ツールの機能について紹介されています。

AuditパネルがLighthouseを使ったものに変更され
third party badgesの表示、ブレークポイントでContinue to hereの追加、コードカバレッジ表示の改善、Asyncスタックトレースがデフォルト化などデバッグ周りの改善が含まれています。

Google Chrome Canaryなどを使うと試すことができます。


ヘッドライン


[WIP] 8.0.0 Release Proposal by jasnell · Pull Request #12220 · nodejs/node

github.com/nodejs/node/pull/12220#issuecomment-303699926

node.js ReleaseNote

Node.js 8.0.0 RC1リリース


Release v5.0.0 · npm/npm

github.com/npm/npm/releases/tag/v5.0.0

ReleaseNote npm

npm v5.0.0プレリリース。 ローカルパスのnpm installはsymlinkとなるように、--saveがデフォルト化、Gitで依存してるモジュールもprepareが呼ばれるように、package-lock.jsonの導入、インストール速度の改善、--offlinesha512のサポートなど


アーティクル


All About Recursion, PTC, TCO and STC in JavaScript

lucasfcosta.com/2017/05/08/All-About-Recursion-PTC-TCO-and-STC-in-JavaScript.html

JavaScript ECMAScript article

JavaScriptの末尾呼び出し最適化についての解説記事。
Proper Tail Calls (PTC)、Syntactic Tail Calls (STC)について


Altering the DOM with JavaScript | Zell Liew

zellwk.com/blog/js-in-dom/

DOM JavaScript tutorial

DOM APIの基本的な使い方のついての記事。
querySelectorでの要素選択、addEventListenerでのイベント登録、classListでのクラス処理、要素の追加/更新などについて


TypeScriptのInterfaceとType aliasの比較 - Qiita

qiita.com/tkrkt/items/d01b96363e58a7df830e

TypeScript

TypeScriptのinterfacetype aliasについての比較まとめ


Node.js Streams: Everything you need to know – freeCodeCamp

medium.freecodecamp.com/node-js-streams-everything-you-need-to-know-c9141306be93

node.js stream article

Node.jsのStreamについての解説記事


What's New In DevTools (Chrome 60)  |  Web  |  Google Developers

developers.google.com/web/updates/2017/05/devtools-release-notes

Chrome debug article

Chrome 60の開発者ツールについて。
AuditがLighthouseを使ったものに変更。
third party badgesの表示、ブレークポイントでContinue to hereの追加、コードカバレッジ表示の改善、Asyncスタックトレースがデフォルト化など


Using Fetch | CSS-Tricks

css-tricks.com/using-fetch/

JavaScript tutorial article

Fetch APIの使い方についての解説。
データの取得、エラーハンドリング、レスポンスの処理、FetchのラッパーであるzlFetchについて


Event Bubbling in JavaScript? Event Propagation Explained

www.sitepoint.com/event-bubbling-javascript/

DOM event article

DOMのイベントバブリングとキャプチャフェーズについての解説。
targetcurrentTargeteventPhaseeを使ってイベントの動きを可視化してる


スライド、動画関係


ReactEurope 2017 - Day 1 - YouTube

www.youtube.com/playlist?list=PLCC436JpVnK3ruJeDWd-xWIMb0l47VcxD

React イベント video

ReactEurope 2017の動画一覧


What I Learned Benchmarking React - Dominic Gannaway aka @trueadm at @ReactEurope 2017 - YouTube

www.youtube.com/watch?v=djOc1EK07Tk

JavaScript library performance video

JavaScriptライブラリのベンチマーク結果を改善する方法について。
Rollupを使ってflat bundleすることでサイズとロード時間の削減、使わないモジュールの削除、ベンチマークツールについて。
lighthouseを使ったモジュールのベンチマークについて


Keynote - Andrew Clark aka @acdlite at @ReactEurope 2017 - YouTube

www.youtube.com/watch?v=QW5TE4vrklU

React video

Reactの今後のロードマップについての発表。
React v16ではFragmentsサポート、Portal、Fiber(opt-in)、エラーハンドリングの強化が行われる。
それ以降は可視領域の優先度スケジューラ、Code Spilittingの改善など


How Streaming Can Supercharge React - Sasha Aickin aka @xander76 at ReactEurope 2017 - YouTube

www.youtube.com/watch?v=UhdGiVy3_Nk

React サーバー video performance

Reactとサーバサイドレンダリングについての発表動画。
SSRには表示を早くするメリットがあるがTTIは長くなる問題がある。
これを解決するために、一定のブロックでコンポーネントをプログレッシブにレンダリングすることでTTIを改善する案について。
また、ReactにReactDOMServerStreamが追加されたことについて。


ECMAScript 2017: what’s new for JavaScript? // Speaker Deck

speakerdeck.com/rauschma/ecmascript-2017-whats-new-for-javascript

ECMAScript slide

ECMAScriptのProposalのプロセスとES2017についてのスライド。
ES2017で追加されるAsync Function、Shared Array Buffer、Object/Stringの追加メソッド、関数の引数における末尾カンマの許容について。
また現在Proposal段階の仕様の紹介


CSS and the First Meaningful Paint - Sessions by Pusher

pusher.com/sessions/meetup/london-css/css-and-the-first-meaningful-paint

CSS performance video browser HTTP2

CSSとFirst meaningful paintについての発表動画。
Inline CSSのメリット/デメリット、RTTとレイテンシー、クリティカルパスなリソースについて。
リソースのpreload、Server Pushについて


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


ngryman/speedracer: Collect performance metrics for your library/application.

github.com/ngryman/speedracer

browser Chrome performance Tools

Chrome DevTools protocolを使いCLIでページの表示にかかる時間などのパフォーマンステストを行えるツール


What does my npm module cost?

cost-of-modules.herokuapp.com/

webservice npm Tools

npmパッケージのサイズ/gzip、ダウンロードにかかる時間や依存などを表示してくれるサービス


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


photopea/UPNG.js: Fast and advanced PNG encoder (lossy / lossless) and decoder

github.com/photopea/UPNG.js

JavaScript library

小さなPNGエンコード/デコードライブラリ


scssfmt - Standard SCSS code formatter

scssfmt.com/

Sass Tools CSS console

sass(SCSS)のコード整形ツール


developit/preact-cli: 😺 Your next Preact PWA starts in 30 seconds.

github.com/developit/preact-cli

JavaScript Tools library

preactのCLIツール。
preactを使ったScaffoldingツールで、create/build/watch/serveなどの開発用のサブコマンドを持っている


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