Skip to content

Commit 198964a

Browse files
azuazu
authored
2019-08-06のJS: Chrome 76、React 16.9、Slack Desktopのリファクタリング (#643)
* Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 447 draft * Update 2019-08-06-447draft.md * Move _i18n/ja/_posts/2019/2019-08-06-447draft.md to _i18n/ja/_posts/2019/2019-08-06-chrome-76react-16.9slack-desktop.md * Remove _i18n/ja/_posts/2019/2019-08-06-447draft.md
1 parent 2b9223b commit 198964a

File tree

1 file changed

+217
-0
lines changed

1 file changed

+217
-0
lines changed

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

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
---
2+
title: "2019-08-06のJS: Chrome 76、React 16.9、Slack Desktopのリファクタリング"
3+
author: "azu"
4+
layout: post
5+
date : 2019-08-06T01:52:28.429Z
6+
category: JSer
7+
tags:
8+
- Chrome
9+
- React
10+
- Slack
11+
12+
---
13+
14+
JSer.info #447 - Chrome 76がリリースされました。
15+
16+
- [New in Chrome 76  |  Web  |  Google Developers](https://developers.google.com/web/updates/2019/07/nic76)
17+
- [Deprecations and removals in Chrome 76  |  Web  |  Google Developers](https://developers.google.com/web/updates/2019/06/chrome-76-deps-rems)
18+
- [Chrome Platform Status](https://www.chromestatus.com/features#milestone%3D76)
19+
20+
Stage 4となった[`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled)の実装、`Blob#text()`/`Blob#arrayBuffer()`/`Blob#stream()`のサポートが追加されています。
21+
また、Async Clipboard APIで画像のサポートが追加されています。
22+
23+
- [Image Support for the Async Clipboard API  |  Web  |  Google Developers](https://developers.google.com/web/updates/2019/07/image-support-for-async-clipboard)
24+
25+
Fetch Metadataリクエストヘッダ(`Sec-Fetch-*`)の実装、フラグ付きでCookieのデフォルトが`SameSite=Lax`となる変更が入っています。
26+
SameSite CookieがデフォルトとなるのはChrome 80の予定で、詳細は次の記事で解説されています。
27+
28+
- [SameSite cookies explained  |  web.dev](https://web.dev/samesite-cookies-explained)
29+
30+
----
31+
32+
React 16.9のRC版がリリースされています。
33+
34+
- [Changelog for 16.9 (TODO: add date) by gaearon · Pull Request #16254 · facebook/react](https://github.com/facebook/react/pull/16254)
35+
36+
試験的に実装されていた`<React.Profiler>`がStableな機能としてサポートされました。
37+
プロファイルについては次の記事もあわせて読むとよさそうです。
38+
39+
- [Introducing the React Profiler – React Blog](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)
40+
41+
非推奨となっていた`UNSAFE_componentWillMount`などの`UNSAFE_*`のライフサイクルメソッドに対して警告出すようになっています。
42+
43+
- [Update on Async Rendering – React Blog](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
44+
45+
またXSSの攻撃に使われる`<a href="javascript:">`など`javascript:`スキームに対して警告を出すようになっています。
46+
これに類似する仕組みやEmberやAngularにも実装されています。
47+
48+
- [Warn for javascript: URLs in DOM sinks by sebmarkbage · Pull Request #15047 · facebook/react](https://github.com/facebook/react/pull/15047)
49+
- [Ember.js - Ember.js 1.9.1 Released](https://blog.emberjs.com/2014/12/23/ember-1-9-1-released.html)
50+
- [Angular - Security](https://angular.io/guide/security)
51+
- [DOMのXSSを防ぐTrusted TypesとAngularのセキュリティ機構](https://www.notion.so/DOM-XSS-Trusted-Types-Angular-8e9535e4effb445c96a54eb68c56dc47)
52+
53+
その他としてDevToolsで`useState`の編集、Suspenseのトグル表示に対応などの開発者ツールの改善や、テスト用の`act`関数がAsync Functionに対応などが含まれています。
54+
55+
56+
----
57+
58+
<h1 class="site-genre">ヘッドライン</h1>
59+
60+
----
61+
62+
## New in Chrome 76  |  Web  |  Google Developers
63+
[developers.google.com/web/updates/2019/07/nic76](https://developers.google.com/web/updates/2019/07/nic76 "New in Chrome 76  |  Web  |  Google Developers")
64+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p>
65+
66+
Chrome 76リリース。
67+
Stage 4となった`Promise.allSettled()`の実装、`Blob#text()`/`Blob#arrayBuffer()`/`Blob#stream()`の追加。
68+
Fetch Metadataリクエストヘッダ(`Sec-Fetch-*`)の実装、フラグ付きでCookieのデフォルトが`SameSite=Lax`となる変更が入るなど
69+
70+
- [Chrome Platform Status](https://www.chromestatus.com/features#milestone%3D76 "Chrome Platform Status")
71+
- [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")
72+
- [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")
73+
74+
----
75+
76+
## Release Workbox v5.0.0-alpha.0 · GoogleChrome/workbox
77+
[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")
78+
<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>
79+
80+
Service WorkerフレームワークのWorkbox 5αリリース。
81+
Service WorkerのRuntimeをCDNからではなく、ローカルを生成したものを使うように。
82+
`injectManifest`で置換されるプレースホルダが`[]`から`self.__WB_MANIFEST`に変更など
83+
84+
85+
----
86+
87+
## Release 10.0.0-rc.1 Biggus Fixus · preactjs/preact
88+
[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")
89+
<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>
90+
91+
Preact 10.0.0 RC1リリース。
92+
Preact 8.xから10へのマイグレーションガイドが公開された。
93+
またメンテナンスリリースとして8.5.0も公開された
94+
95+
- [Release v8.5.0 · preactjs/preact](https://github.com/preactjs/preact/releases/tag/v8.5.0 "Release v8.5.0 · preactjs/preact")
96+
97+
----
98+
99+
## Changelog for 16.9 (TODO: add date) by gaearon · Pull Request #16254 · facebook/react
100+
[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")
101+
<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>
102+
103+
React 16.9 RC.0リリース。
104+
`<React.Profiler>`の追加、非推奨となっていた`UNSAFE_*`のライフサイクルメソッドに対する警告の表示、`<a href="javascript:">`に対して警告を出すように。
105+
また、DevToolsで`useState`の編集、Suspenseのトグル表示に対応、テスト用の`act`がAsync対応など
106+
107+
- [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")
108+
109+
----
110+
<h1 class="site-genre">アーティクル</h1>
111+
112+
----
113+
114+
## When a rewrite isn’t: rebuilding Slack on the desktop
115+
[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")
116+
<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>
117+
118+
Slack Desktopのアーキテクチャをどのようにリファクタリングしたかについて。
119+
jQuery+SignalからReact+Reduxへの移行。
120+
既存のコードベースを維持しつつ、徐々にモダンへ移行していく戦略について。
121+
名前空間オブジェクトとモジュールの混在時における相互運用性。古いコードは新しいコードを直接importできず、新しいコードは古いコードを直接importできないという`legacy-interop`の概念の導入。
122+
Multi workspaceを意識した書き換えによってメモリ使用量の削減の効果などがあったことについてなど
123+
124+
125+
----
126+
127+
## プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog
128+
[tech.smarthr.jp/entry/2019/08/01/151100](https://tech.smarthr.jp/entry/2019/08/01/151100 "プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog")
129+
<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>
130+
131+
アプリケーション間の共通UIをライブラリ化することについて。
132+
React + TypeScript + Styled Componentsでの実装、Storybookでのプレビューやreg-suitでの回帰テストについてなど
133+
134+
135+
----
136+
<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
137+
138+
----
139+
140+
## WebMemex/freeze-dry: Snapshots a web page to get it as a static, self-contained HTML document.
141+
[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.")
142+
<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>
143+
144+
ウェブサイトのDOMとリソースのスナップショットを取るライブラリ
145+
146+
147+
----
148+
<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
149+
150+
----
151+
152+
## harttle/liquidjs: A shopify compatible Liquid template engine in pure JavaScript.
153+
[github.com/harttle/liquidjs](https://github.com/harttle/liquidjs "harttle/liquidjs: A shopify compatible Liquid template engine in pure JavaScript.")
154+
<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>
155+
156+
Liquid互換のテンプレートエンジンのJavaScript実装
157+
158+
159+
----
160+
161+
## unshiftio/url-parse: Small footprint URL parser that works seamlessly across Node.js and browser environments.
162+
[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.")
163+
<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>
164+
165+
Browser、Node.js、Workerで動くURLパースライブラリ
166+
167+
168+
----
169+
170+
## Arkweid/lefthook: Fast and powerful Git hooks manager for any type of projects.
171+
[github.com/Arkweid/lefthook](https://github.com/Arkweid/lefthook "Arkweid/lefthook: Fast and powerful Git hooks manager for any type of projects.")
172+
<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>
173+
174+
Git Hooksをymlで管理できるツール。
175+
Node.jsやRubyなどパッケージマネージャーでインストールできる
176+
177+
178+
----
179+
180+
## daybrush/moveable: ↔️ ↕️ 🔄 Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable!
181+
[github.com/daybrush/moveable](https://github.com/daybrush/moveable "daybrush/moveable: ↔️ ↕️ 🔄 Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable!")
182+
<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>
183+
184+
要素のドラッグ、リサイズなどのイベントハンドリングを扱うライブラリ
185+
186+
187+
----
188+
189+
## @Databases · Database libraries for Node.js that protect you from SQL Injection
190+
[www.atdatabases.org/](https://www.atdatabases.org/ "@Databases · Database libraries for Node.js that protect you from SQL Injection")
191+
<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>
192+
193+
Tagged Template LiteralベースのSQLクエリエスケープライブラリ。
194+
Tagged Template Literalで書いたSQL文からクエリとパラメータを分解して取り出し、その結果をデータベースエンジンにわたすことで安全なSQLエスケープを行う目的。
195+
Postgres、MySQL、SQLiteなどに対応してる
196+
197+
198+
----
199+
200+
## kerimdzhanov/dotenv-flow: Loads environment variables from .env.\[development|test|production\]\[.local\] files for Node.js® projects.
201+
[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.")
202+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">library</span></p>
203+
204+
`.env`や`.env.development`ファイルなどを環境によって読み分けるライブラリ。
205+
206+
----
207+
<h1 class="site-genre">書籍関係</h1>
208+
209+
----
210+
211+
## JavaScript for impatient programmers
212+
[exploringjs.com/impatient-js/index.html](https://exploringjs.com/impatient-js/index.html "JavaScript for impatient programmers")
213+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">book</span></p>
214+
215+
Dr.AxelのJavaScript入門本
216+
217+
----

0 commit comments

Comments
 (0)