JSer.info #507 - 次の記事ではReact 17 RCからサポートされている新しいJSXの変換について紹介されています。
新しいJSXの変換では、JSXを変換するツール(BabelやTypeScript)、JSXを扱うライブラリ(ReactやPreact)のアップデートが必要です。
一方で、JSXの構文は何も変わらないため、あくまで関係するのは変換ツールとライブラリ側の実装です。
React 0.12の際に導入されたJSXの変換仕様の中には、ライブラリ側の実装を複雑化させる仕様や現在では不要な仕組みも含まれています。
新しいJSXの変換の仕様では、その仕様の単純化やそれにともなうパフォーマンスの改善が主な目的です。
新しいJSXの変換の仕様については次のRFCにまとめられています。
また新しい変換方式では、JSX(React Component)を書く際に import React from 'react'; のような Reactのimportが不要となります。
そのため、既に書かれた import React from 'react'; を削除するマイグレーションツールも公開されています。
この新しいJSXの変換方式は、それぞれ次のライブラリとツールで対応しています。
ライブラリ
ツール
Content delivery networks (CDNs)という記事では、CDNの概要について書かれています。
CDNの仕組み、キャッシュのEvictionとPurging、Private/PublicなリソースでのCache-Control設定、動的/静的なコンテンツにおける設定の考え方。
また、キャッシュヒット率(CHR)の計測と改善方法、CDNのパフォーマンス機能としての圧縮/TLS 1.3/minificationについてなどについて書かれています。
Atomic CSS-in-JSという記事では、Atomic CSSとCSS-in-JSの組み合わせについて書かれています。
Atomic CSSはutility-firstなCSSを示す言葉です。
/* Atomic CSS */
.bw-2x {
border-width: 2px;
}
.bss {
border-style: solid;
}
.sans {
font-style: sans-serif;
}
.p-1x {
padding: 10px;
}
/* Not atomic, because the class contains 2 rules */
.p-1x-sans {
padding: 10px;
font-style: sans-serif;
}
このUtility/atomic CSSはgzip効率が良いコードとなりファイルサイズ的なメリットなどがあります。
一方でUtility/atomic CSSを手書きする場合には命名が難しい問題、utility-firstなライブラリであるTailwindのようなCSSライブラリを使うと未使用のクラスが残る問題などもあります。
この記事では、Atomic CSSの問題を解決するためにCSS-in-JSと組み合わせるAtomic CSS-in-JSについて書かれています。
Atomic CSS-in-JSの例としてFacebookのStylexを紹介しています。
- Tech stack rebuild for a new Facebook.com - Facebook Engineering
- Building the New Facebook with React and Relay | Frank Yan - YouTube
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
V8 release v8.6 · V8
V8 8.6リリース。
JavaScriptエンジンのFuzzingツールであるJS-Fuzzerの公開、Number.prototype.toStringのパフォーマンス改善。
Atomics.notifyにリネームされたためAtomics.wakeの削除、Wasmのパフォーマンス改善など
Release 10.5.0 - JSX Reloaded · preactjs/preact
github.com/preactjs/preact/releases/tag/10.5.0
Preact 10.5.0リリース。
新しいJSXの変換に対応したRuntimeの追加、 hydrationにおけるSuspend & Resumeの改善など
Release DOMPurify 2.1.0 · cure53/DOMPurify
github.com/cure53/DOMPurify/releases/tag/2.1.0
DOMpurify 2.1.0リリース。
jQueryのメソッドはデフォルトで対応したためSAFE_FOR_JQUERYフラグを削除、mXSSの修正とコード整理など
Firefox 81.0, See All New Features, Updates and Fixes
www.mozilla.org/en-US/firefox/81.0/releasenotes/
Firefox 81リリース。
iframe要素のsandbox属性がallow-downloadsをサポート、Content-Disposition HTTPヘッダにおいてクオートで囲まれていないファイル名に対応。
JavaScriptのMIMEタイプではないWorkerスクリプトはnew Worker()で読み込めないように変更など
- Firefox 81 for developers - Mozilla | MDN
- Worker scripts with wrong MIME type will be blocked from loading with Worker() or SharedWorker() (Breaking) | Firefox Site Compatibility
ESLint v7.10.0 released - ESLint - Pluggable JavaScript linter
eslint.org/blog/2020/09/eslint-v7.10.0-released
ESLint 7.10.0リリース。
no-inline-commentsにignorePatternオプションの追加など
アーティクル
Introducing the New JSX Transform – React Blog
reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
新しいJSXの変換の仕組みについて。
React 17、Babel 7.9.0から対応している。
コンポーネント内でimport React from "react"が不要となり、パフォーマンスの改善や仕様のシンプル化が目的
Content delivery networks (CDNs)
web.dev/content-delivery-networks/
CDNについての記事。
CDNの仕組み、キャッシュのEvictionとPurging、Private/PublicなリソースでのCache-Control設定、動的/静的なコンテンツにおける設定の考え方。
キャッシュヒット率(CHR)の計測と改善方法、CDNのパフォーマンス機能としての圧縮/TLS 1.3/minificationについてなど
Feature watch: ECMAScript 2021
2ality.com/2020/09/ecmascript-2021.html
ECMAScript 2021に入る予定のProposalまとめ
Detached window memory leaks
web.dev/detached-window-memory-leaks/
window.openで開いたウィンドウにおけるメモリリークについて。
切り離したwindowでメモリリークが起きる原理、heap snapshotやperformance.memory APIでのメモリの増減の見方。
またメモリリークを避ける方法としてリファレンスを消す方法、WeakRefを使う方法、直接のリファレンスを持たない方法についてなど
ECMAScript proposal updates @ 2020-09 | ECMAScript Daily
ecmascript-daily.github.io/ecmascript/2020/09/26/ecmascript-proposal-updat
2020年9月のTC39ミーティングで更新されたECMAScript Proposalのまとめ。
Publishing Node modules with TypeScript and ES modules - LogRocket Blog
blog.logrocket.com/publishing-node-modules-typescript-es-modules/
TypeScriptで書いたライブラリをTree Shakingできるような設定で配布できるようにするチュートリアル。
Atomic CSS-in-JS
sebastienlorber.com/atomic-css-in-js
Atomic CSSについての記事。
utility-firstなCSSを示す言葉だが、命名が難しい問題やutility-firstなライブラリであるTailwindのようなライブラリを使うと未使用のクラスが残る問題などの問題がある。
CSS-in-JSと組み合わせることでこの問題を解決するatomic CSS-in-JSについて。
例としてFacebookのStylexについてを紹介している。
- Tech stack rebuild for a new Facebook.com - Facebook Engineering
- Building the New Facebook with React and Relay | Frank Yan - YouTube
ソフトウェア、ツール、ライブラリ関係
balazsbotond/urlcat: A URL builder library for JavaScript.
github.com/balazsbotond/urlcat
URLの結合(join)、パラメータクエリの生成(query)、置換(subst)するライブラリ。
codemix/ts-sql: A SQL database implemented purely in TypeScript type annotations.
TypeScript 4.1のTemplate Literal Typeを使ってSQL構文からクエリ結果の型を返す型ライブラリ
sumup-oss/performance-observer: Generic interface for PerformanceObserver API.
github.com/sumup-oss/performance-observer
Performance Observerのラッパーライブラリ。
指定したメトリクスを取得するAPIを提供する
jtbennett/create-ts-project: Create Typescript monorepo projects with project references, jest, eslint and prettier configured and ready for development.
github.com/jtbennett/create-ts-project
TypeScript monorepo向けの管理ツール。
TypeScript Project References、Yarn、Jest、ESLint、Pretitterなどが入ったCreact React Appのようなツールを目指している
