Fork me on GitHub

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

Edit on GitHub 編集履歴を見る

JSer.info #447 - Chrome 76がリリースされました。

Stage 4となったPromise.allSettled()の実装、Blob#text()/Blob#arrayBuffer()/Blob#stream()のサポートが追加されています。
また、Async Clipboard APIで画像のサポートが追加されています。

Fetch Metadataリクエストヘッダ(Sec-Fetch-*)の実装、フラグ付きでCookieのデフォルトがSameSite=Laxとなる変更が入っています。
SameSite CookieがデフォルトとなるのはChrome 80の予定で、詳細は次の記事で解説されています。


React 16.9のRC版がリリースされています。

試験的に実装されていた<React.Profiler>がStableな機能としてサポートされました。
プロファイルについては次の記事もあわせて読むとよさそうです。

非推奨となっていたUNSAFE_componentWillMountなどのUNSAFE_*のライフサイクルメソッドに対して警告出すようになっています。

またXSSに使われる<a href="javascript:">などjavascript:スキームに対して警告を出すようになっています。
これに類似する仕組みはEmberやAngularにも実装されています。

その他としてDevToolsでuseStateの編集、Suspenseのトグル表示に対応などの開発者ツールの改善や、テスト用のact関数がAsync Functionに対応などが含まれています。


ヘッドライン


New in Chrome 76  |  Web  |  Google Developers

developers.google.com/web/updates/2019/07/nic76

Chrome ReleaseNote

Chrome 76リリース。
Stage 4となったPromise.allSettled()の実装、Blob#text()/Blob#arrayBuffer()/Blob#stream()の追加。
Fetch Metadataリクエストヘッダ(Sec-Fetch-*)の実装、フラグ付きでCookieのデフォルトがSameSite=Laxとなる変更が入るなど


Release Workbox v5.0.0-alpha.0 · GoogleChrome/workbox

github.com/GoogleChrome/workbox/releases/tag/v5.0.0-alpha.0

ServiceWorker ReleaseNote JavaScript

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

React JavaScript library ReleaseNote

Preact 10.0.0 RC1リリース。
Preact 8.xから10へのマイグレーションガイドが公開された。
またメンテナンスリリースとして8.5.0も公開された


Changelog for 16.9 (TODO: add date) by gaearon · Pull Request #16254 · facebook/react

github.com/facebook/react/pull/16254

React ReleaseNote issue

React 16.9 RC.0リリース。
<React.Profiler>の追加、非推奨となっていたUNSAFE_*のライフサイクルメソッドに対する警告の表示、<a href="javascript:">に対して警告を出すように。
また、DevToolsでuseStateの編集、Suspenseのトグル表示に対応、テスト用のactがAsync対応など


アーティクル


When a rewrite isn’t: rebuilding Slack on the desktop

slack.engineering/rebuilding-slack-on-the-desktop-308d6fe94ae4

slack JavaScript refacoring article

Slack Desktopのアーキテクチャをどのようにリファクタリングしたかについて。
jQuery+SignalからReact+Reduxへの移行。
既存のコードベースを維持しつつ、徐々にモダンへ移行していく戦略について。
名前空間オブジェクトとモジュールの混在時における相互運用性。古いコードは新しいコードを直接importできず、新しいコードは古いコードを直接importできないというlegacy-interopの概念の導入。
Multi workspaceを意識した書き換えによってメモリ使用量の削減の効果などがあったことについてなど


プロダクト間共通の React コンポーネントライブラリを運用する話 - SmartHR Tech Blog

tech.smarthr.jp/entry/2019/08/01/151100

React UI library TypeScript article

アプリケーション間の共通UIをライブラリ化することについて。
React + TypeScript + Styled Componentsでの実装、Storybookでのプレビューやreg-suitでの回帰テストについてなど


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


WebMemex/freeze-dry: Snapshots a web page to get it as a static, self-contained HTML document.

github.com/WebMemex/freeze-dry

JavaScript library DOM

ウェブサイトのDOMとリソースのスナップショットを取るライブラリ


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


harttle/liquidjs: A shopify compatible Liquid template engine in pure JavaScript.

github.com/harttle/liquidjs

JavaScript library template TypeScript

Liquid互換のテンプレートエンジンのJavaScript実装


unshiftio/url-parse: Small footprint URL parser that works seamlessly across Node.js and browser environments.

github.com/unshiftio/url-parse

JavaScript library browser node.js

Browser、Node.js、Workerで動くURLパースライブラリ


Arkweid/lefthook: Fast and powerful Git hooks manager for any type of projects.

github.com/Arkweid/lefthook

git node.js ruby Tools

Git Hooksをymlで管理できるツール。
Node.jsやRubyなどパッケージマネージャーでインストールできる


daybrush/moveable: ↔️ ↕️ 🔄 Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable!

github.com/daybrush/moveable

JavaScript library DOM

要素のドラッグ、リサイズなどのイベントハンドリングを扱うライブラリ


@Databases · Database libraries for Node.js that protect you from SQL Injection

www.atdatabases.org/

JavaScript TypeScript SQL library security

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

node.js library

.env.env.developmentファイルなどを環境によって読み分けるライブラリ。


書籍関係


JavaScript for impatient programmers

exploringjs.com/impatient-js/index.html

JavaScript book

Dr.AxelのJavaScript入門本


この記事へ修正リクエストをする
記事を紹介する