Merge #587

587: 2019-02-19のJS: Mocha 6.0.0、Fly(Edge Applications)、サードパーティJavaScriptの実行コスト r=azu a=azu

* [Release v6.0.0 · mochajs/mocha](https://github.com/mochajs/mocha/releases/tag/v6.0.0 "Release v6.0.0 · mochajs/mocha")
* [Fly · Edge Applications](https://fly.io/ "Fly · Edge Applications")
* [cerebral/overmind: Overmind - Frictionless state management](https://github.com/cerebral/overmind "cerebral/overmind: Overmind - Frictionless state management")


Co-authored-by: azu <[email protected]>
Co-authored-by: azu <[email protected]>
Co-authored-by: probot-for-jser-info[bot] <probot-for-jser-info[bot]@users.noreply.github.com>

Author: 3 people

_i18n/ja/_posts/2019/2019-02-19-mocha-6.0.0flyedge-applicationsjavascript.md

@@ -0,0 +1,207 @@
+---
+title: "2019-02-19のJS: Mocha 6.0.0、Fly(Edge Applications)、サードパーティJavaScriptの実行コスト"
+author: "azu"
+layout: post
+date : 2019-02-19T00:34:08.205Z
+category: JSer
+tags:
+- mocha
+- cdn
+- JavaScript
+
+---
+
+JSer.info #423 - Mocha 6.0.0がリリースされました。
+
+- [Release v6.0.0 · mochajs/mocha](https://github.com/mochajs/mocha/releases/tag/v6.0.0)
+
+Node.js 4のサポート終了、`--compiler`などの非推奨となっていたコマンドラインオプションを削除が行われています。
+また、`require`のキャッシュを削除する`Mocha.unloadFile`の追加、`.mocharc.js`や`package.json`に設定を書けるRCファイルをサポートしています。
+
+----
+
+[Fly · Edge Applications](https://fly.io/)というサービスでは、CDNのEdge LocationでJavaScript Applicationを動かせます。
+FlyではV8をベースにした実行環境で、[Fly runtime](https://github.com/superfly/fly)を使いLB、Cache、TLS、Networkに関する処理をEdgeで行えます。
+[Cloudflare Workers](https://www.cloudflare.com/ja-jp/products/cloudflare-workers/)のようにService Worker互換のAPIをサポートしていたり、ローカルでのテスト実行などもサポートしているようです。
+
+----
+
+[patrickhulce/third-party-web](https://github.com/patrickhulce/third-party-web)というリポジトリでは[HTTP Archive](https://httparchive.org/)のクロール結果から調査したサードパーティスクリプトの実行コストがまとめられています。
+広告、アクセス解析、SNS、動画などのカテゴリ別に、利用数や実行にかかった平均の時間などがまとめられています。
+
+サードパーティスクリプトがウェブページを占める割合については、次の記事も合わせてみると面白いかもしれません。
+
+- [SpeedCurve | JavaScript growth and third parties](https://speedcurve.com/blog/javascript-growth/)
+
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Bootstrap 4.3.0 | Bootstrap Blog
+[blog.getbootstrap.com/2019/02/11/bootstrap-4-3-0/](https://blog.getbootstrap.com/2019/02/11/bootstrap-4-3-0/ "Bootstrap 4.3.0 | Bootstrap Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Bootstrap 4.3.0リリース。
+`.stretched-link`、`.text-break`、`.rounded-sm`、`.modal-dialog-scrollable`、`.list-group-horizontal`のクラスの追加など
+
+
+----
+
+## Release: [email protected] - 📣 announcements - npm forum
+[npm.community/t/release-npm-6-8-0/5352](https://npm.community/t/release-npm-6-8-0/5352 "Release: [email protected] - 📣 announcements - npm forum")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+npm 6.8.0リリース。
+monorepo対応として`repository`フィールドの`directory`プロパティでのパッケージディレクトリの指定についてのドキュメントを追加など
+
+
+----
+
+## Node v11.10.0 (Current) | Node.js
+[nodejs.org/en/blog/release/v11.10.0/](https://nodejs.org/en/blog/release/v11.10.0/ "Node v11.10.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 v11.10.0リリース。
+npm 6.7.0を同梱するように、`perf_hooks`にhistogramベースのAPIを追加、`tls`モジュールのクライアントに`session`イベントを追加など
+
+
+----
+
+## Release v1.2.0 · rollup/rollup
+[github.com/rollup/rollup/releases/tag/v1.2.0](https://github.com/rollup/rollup/releases/tag/v1.2.0 "Release v1.2.0 · rollup/rollup")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">bundler</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Rollup 1.2.0リリース。
+Hoisting時に変数名を衝突しないようにするためのリネームロジックを再実装、configファイルをCJSとしてexportしてもエラーとならないように修正など
+
+
+----
+
+## Release v6.0.0 · mochajs/mocha
+[github.com/mochajs/mocha/releases/tag/v6.0.0](https://github.com/mochajs/mocha/releases/tag/v6.0.0 "Release v6.0.0 · mochajs/mocha")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">testing</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Mocha 6.0.0リリース。
+Node.js 4のサポート終了、非推奨のコマンドラインオプションを削除、`Mocha.unloadFile`の追加、RCファイルでの設定をサポートなど
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Replacing a hot path in your app's JavaScript with WebAssembly  |  Web  |  Google Developers
+[developers.google.com/web/updates/2019/02/hotpath-with-wasm](https://developers.google.com/web/updates/2019/02/hotpath-with-wasm "Replacing a hot path in your app's JavaScript with WebAssembly  |  Web  |  Google Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebAssembly</span> <span class="jser-tag">article</span> <span class="jser-tag">JavaScript</span></p>
+
+処理速度が重要な部分だけをwasmで書くという話。
+JavaScript、C、AssemblyScript、Rustの比較
+
+
+----
+
+## Trusted Types help prevent Cross-Site Scripting  |  Web  |  Google Developers
+[developers.google.com/web/updates/2019/02/trusted-types](https://developers.google.com/web/updates/2019/02/trusted-types "Trusted Types help prevent Cross-Site Scripting  |  Web  |  Google Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">XSS</span> <span class="jser-tag">HTML</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p>
+
+Chrome 73でTrusted Typesがフラグ付きで実装され、76までOrigin Trialとして試せる。
+TrustTypesはXSSのsinkとなる部分をポリシーでチェックする。
+ポリシーに一致しない場合はエラーに落とすことで回避するAPIと仕組み
+
+
+----
+
+## Constructable Stylesheets: seamless reusable styles  |  Web  |  Google Developers
+[developers.google.com/web/updates/2019/02/constructable-stylesheets](https://developers.google.com/web/updates/2019/02/constructable-stylesheets "Constructable Stylesheets: seamless reusable styles  |  Web  |  Google Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p>
+
+Chrome 73で実装されたConstructable Stylesheetsについて。
+共有できるCSSオブジェクトを作成して複数のShadow RootsやDocumentに対して当てられるAPI。
+
+
+----
+
+## Rendering on the Web  |  Web  |  Google Developers
+[developers.google.com/web/updates/2019/02/rendering-on-the-web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web "Rendering on the Web  |  Web  |  Google Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">browser</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span> <span class="jser-tag">ServiceWorker</span></p>
+
+CSR(クライアントサイドレンダリング)からSSR(サーバサイドレンダリング)などのウェブサイトのレンダリング手法やそれぞれの利点や欠点などをまとめた記事。
+またService Workerを前提としたTrisomorphic Renderingについてなど
+
+
+----
+<h1 class="site-genre">スライド、動画関係</h1>
+
+----
+
+## cerebral/overmind: Overmind - Frictionless state management
+[github.com/cerebral/overmind](https://github.com/cerebral/overmind "cerebral/overmind: Overmind - Frictionless state management")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">React</span> <span class="jser-tag">Vue</span> <span class="jser-tag">Angular</span> <span class="jser-tag">TypeScript</span></p>
+
+ステート管理ライブラリ。
+副作用をeffectsとして実装し、actionを発行して、Proxyを使ったStateの変更検知してViewの更新を行う。
+React、Vue、Angularに対応したバインディングと開発者ツールが用意されている。
+
+- [Overmind - Frictionless state management](https://overmindjs.org "Overmind - Frictionless state management")
+- [Overmind introduction - YouTube](https://www.youtube.com/watch?v=82Aq_ujnBQw "Overmind introduction - YouTube")
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## patrickhulce/third-party-web: Summary of which third party scripts are most responsible for excessive JavaScript execution on the web.
+[github.com/patrickhulce/third-party-web](https://github.com/patrickhulce/third-party-web "patrickhulce/third-party-web: Summary of which third party scripts are most responsible for excessive JavaScript execution on the web.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">performance</span> <span class="jser-tag">browser</span> <span class="jser-tag">JavaScript</span></p>
+
+HTTP Archiveのデータを元にしたウェブサイトにおけるサードパーティスクリプトの実行コストについての調査結果。
+広告、アクセス解析、SNS、動画などの項目別に利用数や実行にかかった平均の時間などのまとめ。
+
+
+----
+
+## Fly · Edge Applications
+[fly.io/](https://fly.io/ "Fly · Edge Applications")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">cdn</span> <span class="jser-tag">webservice</span> <span class="jser-tag">V8</span></p>
+
+Edge ApplicationをJavaScriptで書けるCDNサービス。
+OSSで公開されているfly runtimeを使いLB、Cache、TLS、Networkに関する処理をEdgeで行える。
+Service Worker互換のAPIも用意されていて、ローカルでもserverを立ててテストできるようになっている。
+
+- [superfly/fly: Fly is an edge application runtime that makes it easy to build CDNs](https://github.com/superfly/fly "superfly/fly: Fly is an edge application runtime that makes it easy to build CDNs")
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## postlight/mercury-parser: 📜 Extracting content from the chaos of the web.
+[github.com/postlight/mercury-parser](https://github.com/postlight/mercury-parser "postlight/mercury-parser: 📜 Extracting content from the chaos of the web.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>
+
+ウェブサイトからメタデータやメインコンテンツを抽出するライブラリ
+
+
+----
+
+## transloadit/uppy: The next open source file uploader for web browsers
+[github.com/transloadit/uppy](https://github.com/transloadit/uppy "transloadit/uppy: The next open source file uploader for web browsers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p>
+
+プラグインで拡張できるファイルアップロードライブラリ。
+UI、ローカルやリモートからのリソースの取得やアップロード先などをプラグインで指定できる。
+
+
+----
+
+## modernserf/zebu: A compiler for little languages in tagged template strings
+[github.com/modernserf/zebu](https://github.com/modernserf/zebu "modernserf/zebu: A compiler for little languages in tagged template strings")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">document</span></p>
+
+tagged template literalを使いミニ言語を作成するライブラリ。 構文を定義して、それを扱うtagged funcitonを作成する。
+
+
+----