2019-08-06のJS: Chrome 76、React 16.9、Slack Desktopのリファクタリング

_i18n/ja/_posts/2019/2019-08-06-chrome-76react-16.9slack-desktop.md

@@ -0,0 +1,217 @@
+---
+title: "2019-08-06のJS: Chrome 76、React 16.9、Slack Desktopのリファクタリング"
+author: "azu"
+layout: post
+date : 2019-08-06T01:52:28.429Z
+category: JSer
+tags:
+- Chrome
+- React
+- Slack
+
+---
+
+JSer.info #447 - Chrome 76がリリースされました。
+
+- [New in Chrome 76  |  Web  |  Google Developers](https://developers.google.com/web/updates/2019/07/nic76)
+- [Deprecations and removals in Chrome 76  |  Web  |  Google Developers](https://developers.google.com/web/updates/2019/06/chrome-76-deps-rems)
+- [Chrome Platform Status](https://www.chromestatus.com/features#milestone%3D76)
+
+Stage 4となった[`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled)の実装、`Blob#text()`/`Blob#arrayBuffer()`/`Blob#stream()`のサポートが追加されています。
+また、Async Clipboard APIで画像のサポートが追加されています。
+
+- [Image Support for the Async Clipboard API  |  Web  |  Google Developers](https://developers.google.com/web/updates/2019/07/image-support-for-async-clipboard)
+
+Fetch Metadataリクエストヘッダ(`Sec-Fetch-*`)の実装、フラグ付きでCookieのデフォルトが`SameSite=Lax`となる変更が入っています。
+SameSite CookieがデフォルトとなるのはChrome 80の予定で、詳細は次の記事で解説されています。
+
+- [SameSite cookies explained  |  web.dev](https://web.dev/samesite-cookies-explained)
+
+----
+
+React 16.9のRC版がリリースされています。
+
+- [Changelog for 16.9 (TODO: add date) by gaearon · Pull Request #16254 · facebook/react](https://github.com/facebook/react/pull/16254)
+
+試験的に実装されていた`<React.Profiler>`がStableな機能としてサポートされました。
+プロファイルについては次の記事もあわせて読むとよさそうです。
+
+- [Introducing the React Profiler – React Blog](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)
+
+非推奨となっていた`UNSAFE_componentWillMount`などの`UNSAFE_*`のライフサイクルメソッドに対して警告出すようになっています。
+
+- [Update on Async Rendering – React Blog](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
+
+またXSSの攻撃に使われる`<a href="javascript:">`など`javascript:`スキームに対して警告を出すようになっています。
+これに類似する仕組みやEmberやAngularにも実装されています。
+
+- [Warn for javascript: URLs in DOM sinks by sebmarkbage · Pull Request #15047 · facebook/react](https://github.com/facebook/react/pull/15047)
+- [Ember.js - Ember.js 1.9.1 Released](https://blog.emberjs.com/2014/12/23/ember-1-9-1-released.html)
+- [Angular - Security](https://angular.io/guide/security)
+    - [DOMのXSSを防ぐTrusted TypesとAngularのセキュリティ機構](https://www.notion.so/DOM-XSS-Trusted-Types-Angular-8e9535e4effb445c96a54eb68c56dc47)
+
+その他としてDevToolsで`useState`の編集、Suspenseのトグル表示に対応などの開発者ツールの改善や、テスト用の`act`関数がAsync Functionに対応などが含まれています。
+
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## New in Chrome 76  |  Web  |  Google Developers
+[developers.google.com/web/updates/2019/07/nic76](https://developers.google.com/web/updates/2019/07/nic76 "New in Chrome 76  |  Web  |  Google Developers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Chrome 76リリース。
+Stage 4となった`Promise.allSettled()`の実装、`Blob#text()`/`Blob#arrayBuffer()`/`Blob#stream()`の追加。
+Fetch Metadataリクエストヘッダ(`Sec-Fetch-*`)の実装、フラグ付きでCookieのデフォルトが`SameSite=Lax`となる変更が入るなど
+
+- [Chrome Platform Status](https://www.chromestatus.com/features#milestone%3D76 "Chrome Platform Status")
+- [Deprecations and removals in Chrome 76  |  Web  |  Google Developers](https://developers.google.com/web/updates/2019/06/chrome-76-deps-rems "Deprecations and removals in Chrome 76  |  Web  |  Google Developers")
+- [w3c/webappsec-fetch-metadata: WebAppSec has adopted sec-metadata as fetch-metadata](https://github.com/w3c/webappsec-fetch-metadata "w3c/webappsec-fetch-metadata: WebAppSec has adopted sec-metadata as fetch-metadata")
+
+----
+
+## Release Workbox v5.0.0-alpha.0 · GoogleChrome/workbox
+[github.com/GoogleChrome/workbox/releases/tag/v5.0.0-alpha.0](https://github.com/GoogleChrome/workbox/releases/tag/v5.0.0-alpha.0 "Release Workbox v5.0.0-alpha.0 · GoogleChrome/workbox")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ServiceWorker</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">JavaScript</span></p>
+
+Service WorkerフレームワークのWorkbox 5αリリース。
+Service WorkerのRuntimeをCDNからではなく、ローカルを生成したものを使うように。
+`injectManifest`で置換されるプレースホルダが`[]`から`self.__WB_MANIFEST`に変更など
+
+
+----
+
+## Release 10.0.0-rc.1 Biggus Fixus · preactjs/preact
+[github.com/preactjs/preact/releases/tag/10.0.0-rc.1](https://github.com/preactjs/preact/releases/tag/10.0.0-rc.1 "Release 10.0.0-rc.1 Biggus Fixus · preactjs/preact")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Preact 10.0.0 RC1リリース。
+Preact 8.xから10へのマイグレーションガイドが公開された。
+またメンテナンスリリースとして8.5.0も公開された
+
+- [Release v8.5.0 · preactjs/preact](https://github.com/preactjs/preact/releases/tag/v8.5.0 "Release v8.5.0 · preactjs/preact")
+
+----
+
+## Changelog for 16.9 (TODO: add date) by gaearon · Pull Request #16254 · facebook/react
+[github.com/facebook/react/pull/16254](https://github.com/facebook/react/pull/16254 "Changelog for 16.9 (TODO: add date) by gaearon · Pull Request #16254 · facebook/react")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">issue</span></p>
+
+React 16.9 RC.0リリース。
+`<React.Profiler>`の追加、非推奨となっていた`UNSAFE_*`のライフサイクルメソッドに対する警告の表示、`<a href="javascript:">`に対して警告を出すように。
+また、DevToolsで`useState`の編集、Suspenseのトグル表示に対応、テスト用の`act`がAsync対応など
+
+- [Warn for javascript: URLs in DOM sinks by sebmarkbage · Pull Request #15047 · facebook/react](http://example.com/ "Warn for javascript: URLs in DOM sinks by sebmarkbage · Pull Request #15047 · facebook/react")
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## When a rewrite isn’t: rebuilding Slack on the desktop
+[slack.engineering/rebuilding-slack-on-the-desktop-308d6fe94ae4](https://slack.engineering/rebuilding-slack-on-the-desktop-308d6fe94ae4 "When a rewrite isn’t: rebuilding Slack on the desktop")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">slack</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">refacoring</span> <span class="jser-tag">article</span></p>
+
+Slack Desktopのアーキテクチャをどのようにリファクタリングしたかについて。
+jQuery+SignalからReact+Reduxへの移行。
+既存のコードベースを維持しつつ、徐々にモダンへ移行していく戦略について。
+名前空間オブジェクトとモジュールの混在時における相互運用性。古いコードは新しいコードを直接importできず、新しいコードは古いコードを直接importできないという`legacy-interop`の概念の導入。
+Multi workspaceを意識した書き換えによってメモリ使用量の削減の効果などがあったことについてなど
+
+
+----
+
+## プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog
+[tech.smarthr.jp/entry/2019/08/01/151100](https://tech.smarthr.jp/entry/2019/08/01/151100 "プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">UI</span> <span class="jser-tag">library</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p>
+
+アプリケーション間の共通UIをライブラリ化することについて。
+React + TypeScript + Styled Componentsでの実装、Storybookでのプレビューやreg-suitでの回帰テストについてなど
+
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## WebMemex/freeze-dry: Snapshots a web page to get it as a static, self-contained HTML document.
+[github.com/WebMemex/freeze-dry](https://github.com/WebMemex/freeze-dry "WebMemex/freeze-dry: Snapshots a web page to get it as a static, self-contained HTML document.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">DOM</span></p>
+
+ウェブサイトのDOMとリソースのスナップショットを取るライブラリ
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## harttle/liquidjs: A shopify compatible Liquid template engine in pure JavaScript.
+[github.com/harttle/liquidjs](https://github.com/harttle/liquidjs "harttle/liquidjs: A shopify compatible Liquid template engine in pure JavaScript.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">template</span> <span class="jser-tag">TypeScript</span></p>
+
+Liquid互換のテンプレートエンジンのJavaScript実装
+
+
+----
+
+## unshiftio/url-parse: Small footprint URL parser that works seamlessly across Node.js and browser environments.
+[github.com/unshiftio/url-parse](https://github.com/unshiftio/url-parse "unshiftio/url-parse: Small footprint URL parser that works seamlessly across Node.js and browser environments.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">browser</span> <span class="jser-tag">node.js</span></p>
+
+Browser、Node.js、Workerで動くURLパースライブラリ
+
+
+----
+
+## Arkweid/lefthook: Fast and powerful Git hooks manager for any type of projects.
+[github.com/Arkweid/lefthook](https://github.com/Arkweid/lefthook "Arkweid/lefthook: Fast and powerful Git hooks manager for any type of projects.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">git</span> <span class="jser-tag">node.js</span> <span class="jser-tag">ruby</span> <span class="jser-tag">Tools</span></p>
+
+Git Hooksをymlで管理できるツール。
+Node.jsやRubyなどパッケージマネージャーでインストールできる
+
+
+----
+
+## daybrush/moveable: ↔️ ↕️ 🔄 Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable!
+[github.com/daybrush/moveable](https://github.com/daybrush/moveable "daybrush/moveable: ↔️ ↕️ 🔄 Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable!")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">DOM</span></p>
+
+要素のドラッグ、リサイズなどのイベントハンドリングを扱うライブラリ
+
+
+----
+
+## @Databases · Database libraries for Node.js that protect you from SQL Injection
+[www.atdatabases.org/](https://www.atdatabases.org/ "@Databases · Database libraries for Node.js that protect you from SQL Injection")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">SQL</span> <span class="jser-tag">library</span> <span class="jser-tag">security</span></p>
+
+Tagged Template LiteralベースのSQLクエリエスケープライブラリ。
+Tagged Template Literalで書いたSQL文からクエリとパラメータを分解して取り出し、その結果をデータベースエンジンにわたすことで安全なSQLエスケープを行う目的。
+Postgres、MySQL、SQLiteなどに対応してる
+
+
+----
+
+## kerimdzhanov/dotenv-flow: Loads environment variables from .env.\[development|test|production\]\[.local\] files for Node.js® projects.
+[github.com/kerimdzhanov/dotenv-flow](https://github.com/kerimdzhanov/dotenv-flow "kerimdzhanov/dotenv-flow: Loads environment variables from .env.\[development|test|production\]\[.local\] files for Node.js® projects.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">library</span></p>
+
+`.env`や`.env.development`ファイルなどを環境によって読み分けるライブラリ。
+
+----
+<h1 class="site-genre">書籍関係</h1>
+
+----
+
+## JavaScript for impatient programmers
+[exploringjs.com/impatient-js/index.html](https://exploringjs.com/impatient-js/index.html "JavaScript for impatient programmers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">book</span></p>
+
+Dr.AxelのJavaScript入門本
+
+----