Frontend Weekly 2024-04-26
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
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 が公開された