コンテンツへスキップ

2

ユーザーインターフェース（UI）のレンダリング

Reactがどのように動作するかを理解するために、まずブラウザがコードをどのように解釈してユーザーインターフェース（UI）を作成（またはレンダリング）するかの基本的な理解が必要です。

ユーザーがウェブページにアクセスすると、サーバーはブラウザに以下のようなHTMLファイルを返します

Two side-by-side diagrams, left showing the HTML code, and right showing the DOM tree.

ブラウザはHTMLを読み込み、Document Object Model (DOM) を構築します。

DOMとは？

DOMはHTML要素のオブジェクト表現です。コードとユーザーインターフェースの間の橋渡しとして機能し、親子の関係を持つツリーのような構造をしています。

Two side-by-side diagrams, left showing the DOM tree, and right showing the rendered UI.

DOMメソッドとJavaScriptを使用して、ユーザーイベントをリッスンし、DOMを操作することで、ユーザーインターフェースの特定の要素を選択、追加、更新、削除できます。DOM操作では、特定の要素を対象とするだけでなく、それらのスタイルやコンテンツを変更することも可能です。

次のセクションでは、JavaScriptとDOMメソッドの使用方法を学びます。

追加リソース

チャプターを完了しました2

これで、ブラウザでUIがどのようにレンダリングされるかの基本を理解できたはずです。

次へ

3: JavaScriptによるUIの更新

開発者がJavaScriptを使用してDOMを操作し、UIを更新する方法を学びましょう。

チャプター3を開始