「仮想DOM」という用語を使わない
#React などのライブラリを総称するのに「仮想DOM」というのは古いので、できる限り使わない 2022年時点で正式な代替があるわけではないが、日本語圏では「宣言的 UI」が通りがよい
初心者への説明の際に嘘も方便として使われることはあるだろうが、ほぼ嘘であるという認識は持ったほうが良い
少なくとも React を作っている人々は「virtual dom」という用語を避けるようになった
2018 年ぐらいから dan 先生がこういうツイートをするようになった
We tend to not say “virtual DOM” anymore because it’s not really related to DOM. Usually “a tree of React elements” is sufficient to explain.
古い公式ドキュメントにもこういうページは残っていた
新しいドキュメントサイトの説明には出てきてなさそう
古い記事しか引っかかってないように見える
他のライブラリが自身を「仮想 DOM」を名乗っているのかはよく知らない
差分検知処理の実装を「virtual dom」と呼んでいるケースもあるが、これもおかしい
「差分検知処理」を行う「reconciler(リコンサイラ)」がいるというのが良い
昔は diff/patch アルゴリズムという言い方がされていたが、この言い方ももうしない
Q. じゃあ React が作っている木構造のオブジェクトはなんて呼べばいいの?
だいたい場合 React Element か React Node と呼べば通じる( @types/react ではこの呼び方がされる )
React Element の方が狭義
React Node は JSX の中に書ける型全般を指すので null とか string も含まれる
「コンポーネントツリー」という言い方も時々するが、React に限られない感じになる
なぜ「仮想 DOM」と言わなくなったのか?(以下私見)
以前 React の要素と DOM 要素は1対1対応に近かったが、今は全くそうではない
昔「仮想 DOM」という用語は、React が DOM と1対1対応するオブジェクトを作っていると説明するために使われることがあった
JSX の <div> は1つの HTMLDivElement に対応すると言った具合
これはまぁ現代でもそう
文字列は DOM の TextNode に対応するんか?など若干怪しい部分はあるが、だいたいこれで説明ができていた
しかし現代には <Suspense> や <Fragment> や <Context.Provider> といった DOM を出力しない React のプリミティブが存在する
なのでこの辺が使われている場合は1対1対応してない
UI を JavaScript の object で表現するという点は変わってないが、別に DOM に対応する object ではない
dan 先生は「Value UI(値としての UI)」みたいな言い方をしている
React が扱うものが DOM とは限らなくなった
ふつうに React Native とかある
React Element は DOM 以外のものに render されうる
宣言的 UI と関係ない文脈で DOM をエミュレーションするツールがある
JSDOM とか( Node.js 環境でブラウザ API をモックするときなどに使う )
React を知らない人に「仮想的な DOM」って言い方をするとそっちの意味に誤解されうる
もちろんそんな誤解は稀かもしれないが、そもそも「仮想 DOM」が良い命名ではないという面がある