Fork me on GitHub

2017-12-05のJS: npm 5.6.0(beta)、React 16.2.0、New ECMAScript Proposals

Edit on GitHub 編集履歴を見る

JSer.info #360 - npm 5.6.0(beta)が公開されています。

Fully cross-platform package-lock.json
-- Stop dropping failed optional deps by iarna · Pull Request #19054 · npm/npm

上記のように、package-lock.jsonに関してクロスプラットフォーム間での互換性があり一意のロックファイルが生成されるようになりました。

この問題はshrinkwrapとoptionalDependenciesの頃からあるので、5年がかりの修正となりました。


React v16.2.0がリリースされています。

React v16.2.0ではFragment(<></>)がサポートされました。
<></> または<Fragment>要素を使うことでフラグメントを扱うことができるようになっています。

render() {
  return (
    <>
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

JSXの構文としての追加となるためFlow、TypeScriptやBabelなどパースするツール側の更新も必要です。
著名なツールはサポート済みであるためアップデートするだけで利用できそうです。


61st meeting of Ecma TC39が行われ、ECMAScript proposalsのステータスが更新されています。

String.prototype.replaceAllDecimalといった新しいProposalの追加がされています。

また既存のProposalの更新も行われ、JSON supersetがStage 2へ、Numeric separatorsArray.prototype.{flatMap,flatten}がStage 3へ、Class Field関係のProposalの分解などが行われています。

詳しくは次のページにまとめてあります。


ヘッドライン


React v16.2.0: Improved Support for Fragments - React Blog

reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

React ReleaseNote

React 16.2.0リリース。
Framentsのサポート。
<></> または<Fragment>要素を使うことでフラグメントを扱うことができる


Release v3.9.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v3.9.0

webpack ReleaseNote

webpack 3.9.0リリース。
スキーマによるバリデーションのエラーメッセージの改善など


Release v0.60.0 · facebook/flow

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

flowtype ReleaseNote

Flow 0.60.0リリース。
server monitorを追加して変更検知の改善、Flow linterにunclear-typeuntyped-importの追加、$Values$Keysの修正など


Video.js 6.5.0 Release | Video.js Blog

blog.videojs.com/video-js-6-5-0-release/

JavaScript video ReleaseNote

Video.js 6.5.0リリース。
プログレスバーのアニメーションを滑らかに、play()のハンドリングの改善など


The npm Blog — v5.6.0 (2017-11-27)

blog.npmjs.org/post/167963735925/v560-2017-11-27

ReleaseNote npm

npm 5.6.0(beta)の変更点について。 クロスプラットフォームでpackage-lock.jsonの互換性が保てるようになった。 pacakge-loc.jsonを生成するだけの--package-lock-onlyオプションの追加、--node-optionsの追加など


アーティクル


Debugging React performance with React 16 and Chrome Devtools.

building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad

React performance browser article

React 16でのパフォーマンスプロファイルの読み方について


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

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

Chrome debug article

Chrome 64の開発者ツールの変更点について。
パフォーマンスモニタ、Consoleサイドバー、コンソールログをグループ化など


shallow-equal for Object/React props | Web Scratch

efcl.info/2017/11/30/shallow-equal/

JavaScript React library article

Shallow Equalを扱うライブラリについて。
ReactのshouldComponentUpdateをDeep Equal(JSON.stringify)で実装した場合とShallow Equalの速度差について。
またShallowな比較で済むように必要な状態管理についてなど。


Chromium のソースコードの歩き方

nhiroki.jp/2017/12/01/chromium-sourcecode

Chrome blink article

Chrome/Blinkのプロジェクト構造について。
ディレクトリ構造やそれぞれのディレクトリの意味などについて。
browserとrendererでの大枠やBlink内の分け方、コードOwnerや依存の見かたについてなど


JavaScript Performance Optimization Tips: An Overview — SitePoint

www.sitepoint.com/javascript-performance-optimization-tips-an-overview/

JavaScript performance article

JavaScriptとパフォーマンスについての概要を紹介した記事
パフォーマンスがよいという定義としてのRAIL、JavaScript実行までのコスト、bundleサイズなどについて


Measuring the Performance of Firefox Quantum with RUM - Akamai Developer Blog

developer.akamai.com/blog/2017/11/29/measuring-performance-firefox-quantum-rum/

firefox performance article

Firefox 52(ESR)とFirefox 57(Quantum)のAkamaiによるロードパフォーマンス比較。
AkamaiのRUMによるとDOM Content Loadedの時間が24%改善されたとのこと


最近のselenium-webdriverの話 - Qiita

qiita.com/nazomikan/items/61143cbf01274c05b654

Selenium article

selenium-webdriverのPromiseManager廃止の経緯とネイティブのPromiseを使った書き方への変更について


Almin.js がやってくれること - Qiita

qiita.com/kmdsbng/items/dc03d89c0ca5acc30a44

almin DDD article JavaScript React

ビジネスロジックをViewなどとは分けた状態にして、DDDをやるための土台としてのAlminについて。
Alminで書いた場合のアプリケーションの処理の流れやドメインオブジェクトの独立性について。


Monitoring the performance of a Node.js web application - Sqreen Blog | Modern Application Security

blog.sqreen.io/diy-node-apm/

node.js JavaScript performance article

Node.jsのasync_hookモジュールを使ったUser Timing APIとAsync Hooks APIを使ったパフォーマンス計測について


ECMAScript proposal updates @ 2017-011 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2017/12/05/ecmascript-proposal-updates

ECMAScript proposal article

2017年10月のTC39ミーティングの結果を反映したECMAScript Proposalの変更点まとめ


eslint-plugin-vue を作っている話 - Qiita

qiita.com/mysticatea/items/860ce3bf0ff387f166ac

ESLint Vue article

Vue向けのESLintプラグインであるeslint-plugin-vueの紹介とオンラインデモについて


Vue.jsでD3.jsを使わずにグラフを実装する - Qiita

qiita.com/haribote/items/0bbf6cf5720b078039ff

Vue SVG グラフ article

Vueを使ってSVGでグラフを描画する話。
データドリブンで折れ線グラフ、棒グラフ、円グラフなどをSVGで描画する仕組みの作り方について


Performance Calendar » Evolution of : Gif without the GIF

calendar.perfplanet.com/2017/animated-gif-without-the-gif/

safari article browser video performance

GIFと<video>でのアニメーション画像について。
Safari Technology Previewが<img src=".mp4">をサポートした話。
<video>よりも<img>の方がパフォーマンスのよい理由。
GIF、WebP、mp4でのファイルサイズの違いなどについて


WebRTCで統計情報を収集する - Qiita

qiita.com/yusuke84/items/dc6e5a4ed109c4631b66

WebRTC article

WebRTCでの使用コーデック、送受信ストリーム情報などのメディアやネットワークに関する統計情報を取得する方法について


スライド、動画関係


New Web Platform APIs // Speaker Deck

speakerdeck.com/arnellebalane/new-web-platform-apis

JavaScript WebPlatformAPI Chrome slide

最近増えた色々なWebplatform APIについてのスライド。
Broadcast Chennel、Network Information、Web Share、Credential Management、Payment API、Resize Observerなど


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


reactjs/react-a11y: Identifies accessibility issues in your React.js elements

github.com/reactjs/react-a11y

React accessibility library

Reactコンポーネントのアクセシビリティに関する問題を見つけるライブラリ


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


ReactPrimer/ReactPrimer: React component prototyping tool that generates fully connected class component code.

github.com/ReactPrimer/ReactPrimer

React Tools software

Reactコンポーネントのプロトタイピングツール


WeiChiaChang/stacks-cli: 📊 Analyze website stack from the terminal 💻

github.com/WeiChiaChang/stacks-cli

Tools JavaScript library

指定したURLが使っているライブラリやCDN、アクセス解析ツール、サーバなどを解析してくれるツール


書籍関係


Web Development with Node and Express, 2nd Edition - O'Reilly Media

shop.oreilly.com/product/0636920084266.do

node.js book

Node.jsとExpressでのウェブアプリ開発についての書籍


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