2017-09-19のJS: Node.js 8.5.0、MSEdge 16の変更点、CoffeeScript 2

_i18n/ja/_posts/2017/2017-09-19-node.js-8.5.0-msedge-16-coffeescript-2.md

@@ -0,0 +1,312 @@
+---
+title: "2017-09-19のJS: Node.js 8.5.0、MSEdge 16の変更点、CoffeeScript 2"
+author: "azu"
+layout: post
+date : 2017-09-19T01:38:34.487Z
+category: JSer
+tags:
+- Node.js
+- MSEdge
+- CoffeeScript
+
+---
+
+JSer.info #349 - Node.js 8.5.0がリリースされました。
+
+- [Node v8.5.0 (Current) | Node.js](https://nodejs.org/en/blog/release/v8.5.0/ "Node v8.5.0 (Current) | Node.js")
+
+脆弱性があったため無効化されていたV8 Snapshotが有効化されました。
+現在のLTSである[v6.11.3](https://nodejs.org/en/blog/release/v6.11.3/ "v6.11.3")も同様の対応が行われています。
+
+- [Security updates for all active release lines, July 2017 | Node.js](https://nodejs.org/en/blog/vulnerability/july-2017-security-releases/)
+- [Node.js で発生した Hash flooding DoS とその内容について - from scratch](http://yosuke-furukawa.hatenablog.com/entry/2017/07/15/104616)
+- [V8 JavaScript Engine: About that hash flooding vulnerability in Node.js…](https://v8project.blogspot.jp/2017/08/about-that-hash-flooding-vulnerability.html)
+
+`console.group`の実装、`fs.copyFile`/`fs.copyFileSync`の追加、`--experimental-modules`フラグでES modules(`.mjs`)をサポート、Performance Timing APIのサポートなどが行われています。
+
+- [Performance Timing API | Node.js v8.5.0 Documentation](https://nodejs.org/api/perf_hooks.html "Performance Timing API | Node.js v8.5.0 Documentation")
+
+Node.js 8.5.0で追加された`fs.copyFile`/`fs.copyFileSync`はOSネイティブのコマンドを使い、ファイルシステムによってはcopy-on-writeとなるため大量のファイルをコピーに向いています。
+
+- [Add fs.copyFile for copying files, using uv_fs_copyfile · Issue #14906 · nodejs/node](https://github.com/nodejs/node/issues/14906 "Add fs.copyFile for copying files, using uv_fs_copyfile · Issue #14906 · nodejs/node")
+- [fs: add fs.copyFile{Sync} by cjihrig · Pull Request #15034 · nodejs/node](https://github.com/nodejs/node/pull/15034 "fs: add fs.copyFile{Sync} by cjihrig · Pull Request #15034 · nodejs/node")
+
+Yarnでは`fs.copyFile`を使うことでインストール速度改善されているようです。
+
+- [Update: use fs.copyFile when available by BYK · Pull Request #4486 · yarnpkg/yarn](https://github.com/yarnpkg/yarn/pull/4486 "Update: use fs.copyFile when available by BYK · Pull Request #4486 · yarnpkg/yarn")
+
+----
+
+10月のWindows 10 Fall Creators Updateとして提供される予定のMSEdge 16(EdgetHTML 16)の変更点が公開されています。
+
+- [What's Coming in EdgeHTML 16 - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/whats-new/edgehtml-16)
+
+CSS Gridのサポート、Payment Request APIのサポート、WebVRのサポート、Service Workerの対応など含まれています。
+詳しくはBuild 2017のレポートや発表動画でも確認することができます。
+
+- [Making the web smoother with independent rendering - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog](https://blogs.windows.com/msedgedev/2017/08/17/making-web-smoother-independent-rendering/)
+
+また、次の記事で詳しく書かれていますが、メインスレッドとは別のレンダリングスレッドを活用することでレンダリング性能を向上する改善も含まれています。
+`<canvas>`、`<select>`、`<svg>`の要素についてはレンダリングスレッドでのレンダリングを行うため、メインスレッドのブロッキングが減るようです。
+
+- [Making the web smoother with independent rendering - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog](https://blogs.windows.com/msedgedev/2017/08/17/making-web-smoother-independent-rendering/#g5dHXMDkQpXzkp6v.97 "Making the web smoother with independent rendering - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog")
+
+----
+
+CoffeeScript 2がリリースされました。
+
+- [Announcing CoffeeScript 2](http://coffeescript.org/announcing-coffeescript-2/ "Announcing CoffeeScript 2")
+
+ES2015+に準拠した破壊的変更が含まれます。
+CoffeeScript 2の`class`や`=>`は、ES2015の`class`や`=>`として出力されるようになっています。
+
+- [Breaking Changes From CoffeeScript 1.x to 2](http://coffeescript.org/#breaking-changes "Breaking Changes From CoffeeScript 1.x to 2")
+
+また、一行コメント(`# コメント`)がコメントとして出力されるようになり、Async function、JSX、ES module、for...ofの対応などが行われています。
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Node v8.5.0 (Current) | Node.js
+[nodejs.org/en/blog/release/v8.5.0/](https://nodejs.org/en/blog/release/v8.5.0/ "Node v8.5.0 (Current) | Node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v8.5.0リリース。
+V8 Snapshotを再有効化、`console.group`の実装、`fs.copyFile`の追加、`--experimental-modules`フラグでES modulesをサポート、Performance Timing APIのサポートなど
+
+
+----
+
+## V8 JavaScript Engine: V8 Release 6.2
+[v8project.blogspot.com/2017/09/v8-release-62.html](https://v8project.blogspot.com/2017/09/v8-release-62.html "V8 JavaScript Engine: V8 Release 6.2")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">V8</span> <span class="jser-tag">ReleaseNote</span></p>
+
+V8 v6.2リリース。
+`Object#toString()`、ES Proxyのパフォーマンス改善、RegExpの`dotAll`モードのサポート、FullCodeGen関連のコードを削除など
+
+
+----
+
+## What's Coming in EdgeHTML 16 - Microsoft Edge Development | Microsoft Docs
+[docs.microsoft.com/en-us/microsoft-edge/dev-guide/whats-new/edgehtml-16](https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/whats-new/edgehtml-16 "What's Coming in EdgeHTML 16 - Microsoft Edge Development | Microsoft Docs")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">MSEdge</span> <span class="jser-tag">ReleaseNote</span></p>
+
+MSEdge(EdgeHTML) 16の変更点について。
+CSS Gridのサポート、Payment Request APIのサポート、WebVRのサポート、Service Workerの対応など
+
+
+----
+
+## Release 1.7.0: JSX tweaks, Pragma, TypeScript and CSS fixes · prettier/prettier
+[github.com/prettier/prettier/releases/tag/1.7.0](https://github.com/prettier/prettier/releases/tag/1.7.0 "Release 1.7.0: JSX tweaks, Pragma, TypeScript and CSS fixes · prettier/prettier")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Prettier 1.7.0リリース。
+JSXのフォーマット変更、CSSの大文字小文字の統一、`@prettier`のpragmaをサポートなど
+
+
+----
+
+## Announcing CoffeeScript 2
+[coffeescript.org/announcing-coffeescript-2/](http://coffeescript.org/announcing-coffeescript-2/ "Announcing CoffeeScript 2")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CoffeeScript</span> <span class="jser-tag">ReleaseNote</span></p>
+
+CoffeeScript 2リリース。 
+ES2015+に準拠した変更が含まれる。`class`や`=>`がES2015と同等に、 一行コメントが出力されるようになり、Async function、JSX、ES module、for...ofの対応など
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Zero-config code transformation with babel-macros · Babel
+[babeljs.io/blog/2017/09/11/zero-config-with-babel-macros](https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros "Zero-config code transformation with babel-macros · Babel")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">babel</span> <span class="jser-tag">article</span> <span class="jser-tag">plugin</span></p>
+
+babel-macrosを使ったコンパイル時のマクロ処理について。
+コンパイル時にfsで取得したSVGをインライン化などに利用できる。
+
+
+----
+
+## Tumblr Engineering — Flow and TypeScript
+[javascript.tumblr.com/post/165082071937/flow-and-typescript](https://javascript.tumblr.com/post/165082071937/flow-and-typescript "Tumblr Engineering — Flow and TypeScript")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">flowtype</span></p>
+
+TypeScriptとFlowの型エラーメッセージにについての比較
+
+
+----
+
+## Deploying ES2015+ Code in Production Today — Philip Walton
+[philipwalton.com/articles/deploying-es2015-code-in-production-today/](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ "Deploying ES2015+ Code in Production Today — Philip Walton")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">browser</span> <span class="jser-tag">webpack</span></p>
+
+moduleをサポートしてるブラウザ向けとそれ以外でビルドしたファイルを分けて配信する方法について。
+webpack/babelの設定、ファイルサイズやパース時間の違いなど
+
+
+----
+
+## A React And Preact Progressive Web App Performance Case Study: Treebo
+[medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299](https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299 "A React And Preact Progressive Web App Performance Case Study: Treebo")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">article</span> <span class="jser-tag">performance</span></p>
+
+Reactなアプリの起動速度を改善したケーススタディ。
+サーバーサイドレンダリング、ルーティングとコード分割、HTMLのストリーミング配信、CSSのクリティカルパス、SWの利用、Preactへの移行、プレースホルダ表示などについて
+
+
+----
+
+## Planning for 7.0 · Babel
+[babeljs.io/blog/2017/09/12/planning-for-7.0](https://babeljs.io/blog/2017/09/12/planning-for-7.0 "Planning for 7.0 · Babel")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">babel</span> <span class="jser-tag">article</span> <span class="jser-tag">opinion</span></p>
+
+現在βがでているBabel 7.0の予定について。主な変更点やプロジェクトのゴールについて。
+
+- [Upgrade to Babel 7 (WIP) · Babel](https://babeljs.io/blog/2017/03/01/upgrade-to-babel-7 "Upgrade to Babel 7 (WIP) · Babel")
+- [Upgrade to Babel 7 for Tool Authors (WIP) · Babel](https://babeljs.io/blog/2017/03/01/upgrade-to-babel-7-for-tool-authors "Upgrade to Babel 7 for Tool Authors (WIP) · Babel")
+
+----
+
+## Autoplay Policy Changes  |  Web  |  Google Developers
+[developers.google.com/web/updates/2017/09/autoplay-policy-changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes "Autoplay Policy Changes  |  Web  |  Google Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">video</span> <span class="jser-tag">article</span></p>
+
+Chromeデスクトップの自動再生ポリシーの変更について。
+Safari 11と同様に音がある動画はユーザーインタラクションや幾つかの条件を満たした場合のみ自動再生が可能になる。
+Media Engagement Indexやiframeの」`gesture="media"`属性についてなど
+
+- [Auto-Play Policy Changes for macOS | WebKit](https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ "Auto-Play Policy Changes for macOS | WebKit")
+- [Chromium Blog: Unified autoplay](https://blog.chromium.org/2017/09/unified-autoplay.html "Chromium Blog: Unified autoplay")
+- [Autoplay - The Chromium Projects](https://sites.google.com/a/chromium.org/dev/audio-video/autoplay "Autoplay - The Chromium Projects")
+
+----
+
+## Building the DOM faster: speculative parsing, async, defer and preload ★ Mozilla Hacks – the Web developer blog
+[hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/](https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/ "Building the DOM faster: speculative parsing, async, defer and preload ★ Mozilla Hacks – the Web developer blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">DOM</span> <span class="jser-tag">browser</span> <span class="jser-tag">JavaScript</span></p>
+
+JavaScriptやCSSなどのリソースのロードについて。
+`async`属性、`defer`属性、`rel=preload`でのロードの違いについての解説。
+リソースのロードとレンダリングのブロッキングについてを図解している。
+
+
+----
+
+## Finally the Promise.prototype.finally() is available
+[hospodarets.com/promise.prototype.finally](https://hospodarets.com/promise.prototype.finally "Finally the Promise.prototype.finally() is available")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Promises</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">ECMAScript</span> <span class="jser-tag">proposal</span></p>
+
+現在Stage 3のPromise#finallyについての解説。
+Promise#finallyのユースケースについてデモを交えての解説している。またasync/awaitとtry/catch/finallyの組み合わせとの類似点について。
+
+- [tc39/proposal-promise-finally: ECMAScript Proposal, specs, and reference implementation for Promise.prototype.finally](https://github.com/tc39/proposal-promise-finally "tc39/proposal-promise-finally: ECMAScript Proposal, specs, and reference implementation for Promise.prototype.finally")
+
+----
+<h1 class="site-genre">スライド、動画関係</h1>
+
+----
+
+## Service Worker Lifecycle by Suguru Inatomi
+[slides.com/laco/2017-09-14\_sw-lifecycle#/](http://slides.com/laco/2017-09-14_sw-lifecycle#/ "Service Worker Lifecycle by Suguru Inatomi")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ServiceWorker</span> <span class="jser-tag">slide</span></p>
+
+Service Workerのライフサイクルについてのスライド。
+Service Workerの登録から削除までのライフサイクルやWorkerの状態について。
+デモアプリで実際に実行して確認することができる。
+
+- [Service Worker のライフサイクル  |  Web  |  Google Developers](https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle "Service Worker のライフサイクル  |  Web  |  Google Developers")
+- [SwLifecycleSandbox](https://sw-lifecycle-sandbox.firebaseapp.com/ "SwLifecycleSandbox")
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## Getting up and running with GraphQL - Pusher Blog
+[blog.pusher.com/getting-up-and-running-with-graphql/](https://blog.pusher.com/getting-up-and-running-with-graphql/ "Getting up and running with GraphQL - Pusher Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">GraphQL</span> <span class="jser-tag">tutorial</span></p>
+
+GraphQLのチュートリアル。
+GraphQLの基本的な機能について
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## ai/size-limit: Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error.
+[github.com/ai/size-limit](https://github.com/ai/size-limit "ai/size-limit: Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">npm</span></p>
+
+パッケージのサイズが一定以上になると例外を投げるCLIツール
+
+
+----
+
+## egoist/package-size: Get the bundle size of an npm package.
+[github.com/egoist/package-size](https://github.com/egoist/package-size "egoist/package-size: Get the bundle size of an npm package.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">library</span> <span class="jser-tag">Tools</span></p>
+
+npmパッケージのbundleサイズを取得できるツール。
+bundleしたファイルサイズ、minified(webpack)、gzipのサイズを一覧できる
+
+
+----
+
+## hiproxy/hiproxy: 🛠 hiproxy is a lightweight proxy tool for Front-End developers based on Node.js that supports an NGINX-like configuration. 🔥
+[github.com/hiproxy/hiproxy](https://github.com/hiproxy/hiproxy "hiproxy/hiproxy: 🛠 hiproxy is a lightweight proxy tool for Front-End developers based on Node.js that supports an NGINX-like configuration. 🔥")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">proxy</span> <span class="jser-tag">library</span> <span class="jser-tag">Tools</span></p>
+
+フロントエンドの開発向けProxyツール。
+Nginxライクな設定ファイル、HTTPSの対応など
+
+
+----
+
+## Quasar Framework
+[quasar-framework.org/](http://quasar-framework.org/ "Quasar Framework")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">UI</span> <span class="jser-tag">library</span></p>
+
+Vueを使ったUIフレームワーク
+
+
+----
+<h1 class="site-genre">書籍関係</h1>
+
+----
+
+## Learning React Native: Building Native Mobile Apps with JavaScript: Bonnie Eisenman: 9781491989142: Amazon.com: Books
+[www.amazon.com/Learning-React-Native-Building-JavaScript/dp/1491989149](https://www.amazon.com/Learning-React-Native-Building-JavaScript/dp/1491989149 "Learning React Native: Building Native Mobile Apps with JavaScript: Bonnie Eisenman: 9781491989142: Amazon.com: Books")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">book</span> <span class="jser-tag">ios</span> <span class="jser-tag">Android</span></p>
+
+2017年11月25日発売
+React Native本の第二版
+
+
+----
+
+## Pro TypeScript: Application-Scale JavaScript Development: Steve Fenton: 9781484232484: Amazon.com: Books
+[www.amazon.com/dp/1484232488](https://www.amazon.com/dp/1484232488 "Pro TypeScript: Application-Scale JavaScript Development: Steve Fenton: 9781484232484: Amazon.com: Books")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">book</span></p>
+
+2018年5月26日発売
+TypeScriptでの開発についての本
+
+
+----
+
+## 作りながら学ぶ React入門 | 吉田裕美 |本 | 通販 | Amazon
+[www.amazon.co.jp/%E4%BD%9C%E3%82%8A%E3%81%AA%E3%81%8C%E3%82%89%E5%AD%A6%E3%81%B6-React%E5%85%A5%E9%96%80-%E5%90%89%E7%94%B0%E8%A3%95%E7%BE%8E/dp/479805075X](https://www.amazon.co.jp/%E4%BD%9C%E3%82%8A%E3%81%AA%E3%81%8C%E3%82%89%E5%AD%A6%E3%81%B6-React%E5%85%A5%E9%96%80-%E5%90%89%E7%94%B0%E8%A3%95%E7%BE%8E/dp/479805075X "作りながら学ぶ React入門 | 吉田裕美 |本 | 通販 | Amazon")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">book</span></p>
+
+Reactについての書籍
+
+
+----