Fork me on GitHub

2020-09-29のJS: 新しいJSXの変換、Content delivery networks (CDNs)、 Atomic CSS-in-JS

Edit on GitHub 編集履歴を見る

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を紹介しています。


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

JSer.info Sponsors

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


ヘッドライン


V8 release v8.6 · V8

v8.dev/blog/v8-release-86

V8 ReleaseNote

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

React library ReleaseNote

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

DOM XSS library JavaScript ReleaseNote

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 ReleaseNote

Firefox 81リリース。
iframe要素のsandbox属性がallow-downloadsをサポート、Content-Disposition HTTPヘッダにおいてクオートで囲まれていないファイル名に対応。
JavaScriptのMIMEタイプではないWorkerスクリプトはnew Worker()で読み込めないように変更など


ESLint v7.10.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2020/09/eslint-v7.10.0-released

ESLint ReleaseNote

ESLint 7.10.0リリース。
no-inline-commentsignorePatternオプションの追加など


アーティクル


Introducing the New JSX Transform – React Blog

reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

React jsx article

新しいJSXの変換の仕組みについて。
React 17、Babel 7.9.0から対応している。
コンポーネント内でimport React from "react"が不要となり、パフォーマンスの改善や仕様のシンプル化が目的


Content delivery networks (CDNs)

web.dev/content-delivery-networks/

network cdn performance article

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 article

ECMAScript 2021に入る予定のProposalまとめ


Detached window memory leaks

web.dev/detached-window-memory-leaks/

JavaScript DOM article

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

ECMAScript proposal

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 node.js library article

TypeScriptで書いたライブラリをTree Shakingできるような設定で配布できるようにするチュートリアル。


Atomic CSS-in-JS

sebastienlorber.com/atomic-css-in-js

CSS JavaScript article

Atomic CSSについての記事。
utility-firstなCSSを示す言葉だが、命名が難しい問題やutility-firstなライブラリであるTailwindのようなライブラリを使うと未使用のクラスが残る問題などの問題がある。
CSS-in-JSと組み合わせることでこの問題を解決するatomic CSS-in-JSについて。
例としてFacebookのStylexについてを紹介している。


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


balazsbotond/urlcat: A URL builder library for JavaScript.

github.com/balazsbotond/urlcat

JavaScript URL library

URLの結合(join)、パラメータクエリの生成(query)、置換(subst)するライブラリ。


codemix/ts-sql: A SQL database implemented purely in TypeScript type annotations.

github.com/codemix/ts-sql

TypeScript SQL library

TypeScript 4.1のTemplate Literal Typeを使ってSQL構文からクエリ結果の型を返す型ライブラリ


sumup-oss/performance-observer: Generic interface for PerformanceObserver API.

github.com/sumup-oss/performance-observer

JavaScript performance library

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 Tools

TypeScript monorepo向けの管理ツール。
TypeScript Project References、Yarn、Jest、ESLint、Pretitterなどが入ったCreact React Appのようなツールを目指している


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