Frontend Weekly 2024-04-26
Node.js v22、Rspack v1.0 Release Plan、Electron 30.0.0、ja.react.devの更新などについて紹介する。
Node.js v22
Node.js v22が2024年4月25日にリリースされました。
Node.js 22 Available Now | OpenJS Foundation
Rocket Turtleで追加
https://x.com/nodejs/status/1759953849849167878
require(ESM)
まだ実験的な機能だが、条件付きでESMをCJSで利用できるようになりました。
V8 Maglev
V8エンジンのJust In Time CompilerにあるMaglev階層を利用するように。より細かな最適化が出来るようになり、パフォーマンスが改善した。
node --run
package.jsonのscriptsをnodeが実行できるようになりました。
npmやyarnを介さないので、はやい。
fs.glob、fs.globSync
import { glob } from "node:fs";
glob("**/*.js", (err, matches) => {
if (err) throw err;
console.log(matches);
});node --watch
が安定化。ノード サーバーを実行できるモードで、指定されたファイルまたはパスに変更が発生したときに再ロードされる。
Rspack v1.0 Release Plan
2024年7月にv1リリース予定。 RspackのWebAssembly化や、RSCのネイティブサポートを検討しているとのこと。
Rspack v1.0 Release Plan · web-infra-dev rspack · Discussion #6315
Electron 30.0.0
2024年4月16日にElectron v30が公開された
File System APIがサポートされた
BrowserView（Electron固有の実装）がWebContentsView（ChromoiumのWebContentsViewを公開したもの）に置き換えられた。基本的には同様に扱えるとのこと。内部的な複雑さを軽減するのが主な目的だと思われる。
ja.react.devの更新
色々なページが翻訳されている。
日本語版のドキュメントにフックやコンポーネントの使い方についてのページが追加
CanaryのAPIもいくつか翻訳されています。
リソース・メタデータ関連コンポーネント
https://ja.react.dev/reference/react-dom/components#resource-and-metadata-components
ブラウザ組み込みコンポーネント<link>、<meta>、<script>、<style>、<title>を用いて、外部リソースを読み込んだり、ドキュメントにメタデータを付与したりすることができるAPI。簡単に言えばReact Helmetのようなこと+αが出来る。<script>や<style> は、リソースの重複解消処理やサスペンスに対応したロードが可能。
リソースプリロード関連の API
https://ja.react.dev/reference/react-dom#resource-preloading-apis
スタイルやスクリプトなどのリソースを事前にフェッチしておくためのAPI。preconnect、preload、preloadModule、preinitなど。多くのユーザーはライブラリ経由で間接的に利用することになると思われる。
Others
EditContext API
contenteditableからDom Viewの機能を落としたようなもの。
テキスト入力の多様化により、contenteditableのText bufferとDom Viewの結合がネックになっていた。
ChromeとEdgeぐらいでしか使えない。今後、リッチテキストエディタ系のライブラリで使われていくかも。
EditContext API - Web APIs | MDN
React WASM Series’ Articles
Rust + WasmでReactをスクラッチから実装する
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする3検証
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする3 検証 | フロントエンドBlog | ミツエーリンクス
CSS Containment・CSS封じ込めとは、content-visivilityやcontainプロパティを指定することで、ページの任意のサブツリーをページのそれ以外の部分から独立させることです。例えば、各セクションが独立していれば、後からjsなどによってセクションが追加されても、既にあるセクションで再計算が行われなくなります。無限ローディングでは、content-visibility:autoを指定しておくことで、ユーザーに関係ないと判断されるコンテンツをブラウザに無視させることが出来ます。
CSS 封じ込め - CSS: カスケーディングスタイルシート | MDN
ポータビリティの高いランタイム環境としてのDenoの薦め
codemod共有サービス
Codemod: Automated Code Migrations & Dependency Upgrades
LLMを使ったcodemodの生成を行うcodemod studio
React19からJSXの変換処理が高速に
React19からJSXの変換処理が高速に | yossy.dev
このPRがマージされた。propsをfor文で回してcloneせずに、代入するようになった。refがReact 19から予約されたprops名ではなくなり、React 17でトランスパイルにcreateElementではなくjsxが用いられるようになったため、これが出来るようになったという話。refが露出したり、createElementが改変されないようにクローン・加工されていた。
https://github.com/facebook/react/pull/28768
コンテナ要素に基づく相対的なCSSの単位（cqw, cqh, cqi, cqb, cqmin, cqmax）
コンテナ要素に基づく相対的な CSS の単位（cqw, cqh, cqi, cqb, cqmin, cqmax）
Viewportに基づく相対的なCSS単位と同じ命名規則に従ってるので、覚える必要はあまりない気がする。
vw: ビューポートの幅の1% → cqw: コンテナ要素の幅の1%
w: 幅、h: 高さ、i: インライン軸の大きさ、b: ブロック軸の大きさ、min: min(i, b)、max: max(i, b)
Reactのコードリーディング
良いこと言ってる。
伊藤直也「学ばないための言い訳探しは辞めた」無知を認めて挑んだ一休の開発組織改革 - エンジニアtype | 転職type
3度目のサードパーティcookie廃止の延期。上手くいけば2025年初頭から廃止を進めるとのこと。
Google、サードパーティcookie廃止を3度目の延期 年内には実施せず
https://github.com/SAWARATSUKI/ServiceLogos
React v19 betaが公開された