Fork me on GitHub

2020-10-27のJS: React 17、Node v15.0.0、LibSass is Deprecated

Edit on GitHub 編集履歴を見る

JSer.info #511 - React 17が正式にリリースされました。

React 17では新しい機能はありませんが、今後のアップデートを段階的に行いやすくするための仕組みが追加されています。
今後React 18がリリースされた際に、React 17とReact 18が一つのアプリ内で同時に実行できるようにするための仕組みを追加しています。
これは、アプリ内で段階的にReactをアップデートできるようにするのが主な目的です。

この変更に関連して、React内でのEvent Delegationの仕組みが変更されています。
今まではDocument nodeに対してイベントを移譲していましたが、React 17からはrenderしたRoot nodeに対してイベントを移譲します。

その他の破壊的な変更としては、event poolingの仕組みの削除とevent.persist()の無効化、onScrollがバブリングしなくなることやuseEffectのcleanup処理が必ず非同期となるなどの変更も含まれています。
詳しくは17 RCの記事で書かれています。

また、関連してCreate React App 4.0もリリースされています。

React 17/新しいJSXの変換の対応、TypeScript 4、ESLint 7、Jest 26へアップデートされています。
また、Fast Refresh、workboxの対応改善、Web Vitalsレポート対応の追加など含まれています。


Node.js 15.0.0がリリースされました。

Note: 奇数バージョンであるためLTSにはなりません。

破壊的な変更としてN-API 7へアップデート、npm 7へアップデート、V8 8.6へアップデート、
unhandledRejection=throwをデフォルトに変更、URLオブジェクトの仕様追従などが行われています。

また、ウェブ標準APIとの互換性向上のためAbortControllerとEventTargetのサポート、cryptoモジュールがWeb Crypto APIをサポートしています。
その他には、timers/promisestream/promisesの追加、実験的な機能としてQUICのサポートされています。


Sass: LibSass is Deprecatedという記事では、C++で書かれたLibSass(node-sass)が非推奨となったことについて書かれています。

現在はDartで書かれたDartSass(sass)がメインで開発されており、LibSassは機能追加や新しい構文のサポートはしないメンテナンスモードとなっています。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


React v17.0 – React Blog

reactjs.org/blog/2020/10/20/react-v17.html

React JavaScript ReleaseNote library

React 17.0リリース。
複数のバージョンを同時に動かして段階的なアップグレードを目的としたリリース。
関連してイベントのdelegateの仕組みの変更、新しいJSXの変換に対応している。
新しいJSXの変換については0.14.x, 15.x, 16.xへバックポートされている


Firefox 82.0, See All New Features, Updates and Fixes

www.mozilla.org/en-US/firefox/82.0/releasenotes/

Firefox ReleaseNote

Firefox 82リリース。
server-sent eventsのinspectのサポート、Media Session APIのデフォルト有効化、起動時のパフォーマンスの改善など。
また、クロスオリジンでのwindow.nameは常に空文字列を返すように変更された


Introducing Microsoft Edge preview builds for Linux - Microsoft Edge Blog

blogs.windows.com/msedgedev/2020/10/20/microsoft-edge-dev-linux/

MSEdge linux news

MSEdge Dev ChannelのLinuxビルドが公開された


Release v4.0.0 · facebook/create-react-app

github.com/facebook/create-react-app/releases/tag/v4.0.0

React Tools ReleaseNote

create-react-app 4.0.0リリース。
React 17/新しいJSXの変換の対応、TypeScript 4、ESLint 6、Jest 26へアップデート。
Fast Refresh、workboxの対応改善、Web Vitalsレポート対応の追加など


Release Notes for Safari Technology Preview 115 | WebKit

webkit.org/blog/11333/release-notes-for-safari-technology-preview-115/

safari ReleaseNote

Safari Technology Preview 115リリース。
Web Audio APIをprefixなしに変更、HTMLMediaElement.setSinkIdのサポート、CSS math-styleのサポートなど


Node v15.0.0 (Current) | Node.js

nodejs.org/en/blog/release/v15.0.0/

node.js ReleaseNote

Node.js 15.0リリース。
破壊的な変更としてN-API 7へアップデート、npm 7へアップデート、V8 8.6へアップデート、
unhandledRejection=throwをデフォルトに変更、URLの仕様追従。
AbortControllerとEventTargetのサポート、cryptoモジュールがWeb Crypto APIをサポート。
また、timers/promisestream/promisesの追加、実験的な機能としてQUICのサポート。


Sass: LibSass is Deprecated

sass-lang.com/blog/libsass-is-deprecated

Sass news

C++で書かれたLibSass(node-sass)が非推奨となった。
Dartで書かれたDartSass(sass)がメインで開発され、LibSassは機能追加や新しい構文のサポートはしないメンテナンスモードとなっている。


アーティクル


ブラウザとNode.jsで動く1kBのキーバリューストレージライブラリを書いた | Web Scratch

efcl.info/2020/10/23/kvs/

JavaScript TypeScript library article

ファイルサイズが小さなKey-Valueストレージライブラリ。
ブラウザ(IndexedDB、LocalStorage)、Node.js(ファイル)で動作し、マイグレーションAPI、TypeScriptでのスキーマをサポートしている


Cumulative Layout Shift in Practice | NicJ.net

nicj.net/cumulative-layout-shift-in-practice/

browser performance article

Cumulative Layout Shift (CLS)について。
CLSとはどのようなメトリクスなのか、適正なスコアとその計算式、CLSが悪いとどのような問題が起きやすいのかについて。
RUMとSyntheticでの計測ツールやライブラリ、Chrome Dev Toolsでのデバッグ方法について


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


npm public roadmap

github.com/npm/roadmap/projects/1

npm Github document

npmのロードマップ


Redirection from Internet Explorer to Microsoft Edge for compatibility with modern web sites | Microsoft Docs

docs.microsoft.com/en-us/deployedge/edge-learnmore-neededge

IE MSEdge browser document

IEと非互換のサイトをIEで閲覧したときに、MSEdgeへ自動的にリダイレクトされる仕組みがMSEdge 87に入った。
非互換かどうかはMicrosoftのリスト管理で判定される。また自動的にリダイレクトするかどうかはグループポリシーで設定できる


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


bytedance/bytemd: A hackable Markdown editor component built with Svelte

github.com/bytedance/bytemd

JavaScript Markdown editor library

Svelteで書かれたmarkdownエディタライブラリ。UIフレームワークなしで動かすことができ、React、Vue向けのバインディングが用意されている


sinclairzx81/typebox: JSON Schema Type Builder with Static Type Resolution for TypeScript

github.com/sinclairzx81/typebox

TypeScript JSON library

JSON SchemaをTypeScriptで定義するbuilder関数を提供するライブラリ


sysgears/webpack-virtual-modules: Webpack Virtual Modules is a webpack plugin that lets you create, modify, and delete in-memory files in a way that webpack treats them as if they were physically presented in the file system.

github.com/sysgears/webpack-virtual-modules

webpack plugin

webpackでビルド時に特定のパスに特定のコードがあるように見せるwebpack plugin。
webpackのビルド中に仮想的なモジュールを追加できる


developit/snarkdown: A snarky 1kb Markdown parser written in JavaScript

github.com/developit/snarkdown

Markdown JavaScript library HTML

ファイルサイズが小さなMarkdown to HTMLライブラリ


piscinajs/piscina: A fast, efficient Node.js Worker Thread Pool implementation

github.com/piscinajs/piscina

node.js JavaScript library

Node.js向けのworker poolライブラリ。
mjsのサポート、AbortControllerを使ったキャンセルのサポート、バックプレッシャーなどをサポートしている


openplayerjs/openplayerjs: Lightweight HTML5 video/audio player with smooth controls and ability to play VAST/VPAID/VMAP ads

github.com/openplayerjs/openplayerjs

JavaScript video audio library

動画/音楽プレイヤーライブラリ。
IE11+のサポート、キャプション、VAST/VPAIDの動画広告のサポート、カスタマイズができるようになっている。
HLSはhls.js、MPEG-DASHはdash.jsを使いサポートしている

この記事へ修正リクエストをする
JSer.info Slackに参加する