Zenn
Open7

Reactのレンダラー探訪

ピン留めされたアイテム
NkznNkzn

Reactは（主にJSXによって）生成したVirtual DOMツリーの差分管理を行い、Virtual DOMと対応した実体のあるツリーに対して最小限の更新を行うためのライブラリです。
当初、ReactJSと名付けられていた時点では、ブラウザのDOMツリーのみを差分管理の対象としていましたが、React Nativeが登場した時点で役割が次のように整理されました。

ライブラリ 役割
React Virtual DOMツリーの定義と差分管理
React DOM Reactが計算した差分をDOMツリーに反映する（レンダリングする）、DOMツリーからのイベントを管理する
React Native Reactが計算した差分をネイティブビューツリーに反映する（レンダリングする）、ネイティブビューからのイベントを管理する、UIライブラリを提供する

React DOMとReact Nativeの役割に対称性がないのがちょっと気に食わないところですが、共通しているのは次の2点です。

  • Reactはプラットフォーム非依存な差分管理を行う
  • React DOM/Nativeはプラットフォーム依存な処理を行う

この責務の分割はFacebook側でも意図して行ったものだったようで、その後、React 360（旧称：React VR）という、3D空間のオブジェクトを表示・差分管理するためのプラットフォームに取り組んでいた時期もありました。

さて、FacebookではReactをGUIの差分管理のために利用していますが、インターネットコミュニティには様々な変態がおりまして、Reactを「XML状のデータ構造で表現可能なあらゆるデータを差分管理するライブラリ」として捉え、GUIではないものを差分管理する猛者が次々と現れています。

もちろんブラウザもDOM APIも利用しないので、React DOMではないライブラリにReact製のツリーを読み込ませることになり、自然とユニークなライブラリになっていきます。

いずれも面白いので、そういった独自レンダラーを見つけたら、このスクラップにざっくりまとめていこうかなと思います。
（これは新しいReactレンダラーかな？と思ったものも載せていきます）

NkznNkzn

Ink

https://github.com/vadimdemedes/ink

コマンドラインインターフェースをJSXで構築するためのライブラリです。
まあ近年のCLIは色も動きも大胆なので、こういうのもあってもいいのかもしれない……
ほんとか……？ほんとに必要かこれ……？

NkznNkzn

Adapt

https://adaptjs.org/

Adaptは筆者が知る限り、Reactの特性を最も悪用した（褒め言葉）ライブラリです。
なぜか、インフラ構成の差分管理を行います。どうしてそれをやろうと思った。

import Adapt from "@adpt/core";
import { NodeService, ReactApp } from "@adpt/cloud/nodejs";
import { Postgres } from "@adpt/cloud/postgres";

function MyApp() {
  const pg = Adapt.handle();

  return (
    <Adapt.Group>
      <ReactApp srcDir="../frontend" />
      <NodeService srcDir="../backend" connectTo={pg} />
      <Postgres handle={pg} />
    </Adapt.Group>
  );
}
NkznNkzn

React-pdf

https://react-pdf.org/

ReactでPDFデータを生成するためのライブラリです。
初めて見たときは「どうせReact DOMで描画したWebページをPDF出力するんでしょ」と思っていたのですが、どうやらNode.jsでのPDF生成にも対応しているようですし、Reactの差分管理エンジンそのものであるreact-reconcilerのPDF版実装もちゃんと作ってあるので、ちゃんと独自レンダラーを実装しているようでした。
PDFって難しいはずなんだけどなあ……自前でゼロから組み立ていい場合はなんとかなるのかなあ……いやあ難しい気がするんだけどなあ……

NkznNkzn

番外編：Remotion （独自レンダラーではない）

https://www.remotion.dev/

「Reactで動画が作れる！」ということで話題になりました。
いやーこれはまたイキのいい独自レンダラーが出てきたかー！？と思ってソースを読んでみたのですが、これは独自レンダラーではないように見えます。
斜め読みしかしてないので間違っていたら申し訳ないのですが、次のような処理をしていそうです。

  • React DOM環境でめちゃめちゃクールなアニメーションをCSSを駆使して作っておく
  • webpackを使ってブラウザ上で動くJavaScriptファイルに変換する
  • JavaScriptファイルをpuppeteerに読み込ませて実行したものをffmpegで録画して動画ファイルにする

ブラウザ向けに作ったものを手軽にmp4にするパイプライン処理ツールとしてはよさそうですが、筆者が関心のある独自レンダラーではなさそうです。RemotionのReactは、あくまでもReact DOMがレンダリングしています。