React入門 練習問題 13：Reactの基本概念：Virtual DOM
Reactにおける「Virtual DOM」の説明として正しいものはどれか。
- 実際のDOMを直接操作せず、メモリ上にUIの状態を表すオブジェクトを保持し、変更差分を計算して実DOMに反映する仕組み
- ブラウザが標準で提供するDOM操作専用APIを、Reactが独自に拡張したHTML要素の集合体を指す仕組み
- サーバー側で事前にHTMLを生成し、クライアントへ送信するための仮想的なファイルシステムを指す仕組み
- CSSのスタイル定義をJavaScriptオブジェクトとして管理し、画面の再描画を完全に省略する技術を指す仕組み
- コンポーネントの状態情報をブラウザのローカルストレージへ仮想的に保存しておくための仕組み
正解と解説を見る
正解：実際のDOMを直接操作せず、メモリ上にUIの状態を表すオブジェクトを保持し、変更差分を計算して実DOMに反映する仕組み
Virtual DOMとは、実際のブラウザのDOMを直接操作する代わりに、UIの状態をメモリ上の軽量なオブジェクトとして保持し、変更があった際に前後の差分を計算して必要な部分だけ実DOMに反映する仕組みです。
【正解の理由】
この仕組みにより、DOM操作のコストを抑えつつ効率的に画面を更新できます。
【不正解の理由】
• 「ブラウザが標準で提供するDOM操作専用APIを、Reactが独自に拡張したHTML要素の集合体」という説明は誤り。Virtual DOMはブラウザの標準APIではなくReact内部の概念である
• 「サーバー側で事前にHTMLを生成し、クライアントへ送信するための仮想的なファイルシステム」という説明は誤り。これはサーバーサイドレンダリングの話であり、Virtual DOMとは無関係
• 「CSSのスタイル定義をJavaScriptオブジェクトとして管理し、画面の再描画を完全に省略する技術」という説明は誤り。Virtual DOMは再描画を省略するものではなく、効率的に行うための仕組みである
• 「コンポーネントの状態情報をブラウザのローカルストレージへ仮想的に保存しておくための仕組み」という説明は誤り。ローカルストレージとは無関係の概念である