React による HTML レンダリング

Volardev 編集部 April 28, 2026

React の主な目的は、Web ページ上に HTML をレンダリング（描画）することにあります。
React は「コンテナ」と createRoot() と呼ばれる関数を介して、Web ページに HTML を出力します。

1. HTML コンテナ

React は、Web ページ内に HTML をレンダリングするためにコンテナを使用します。
通常、このコンテナは index.html ファイル内にある <div id="root"></div> 要素です。

前の章の手順に従っていれば、プロジェクトのルートディレクトリに index.html ファイルがあるはずです。

1.1 `index.html` の初期状態

以下は、index.html ファイルのデフォルトの内容です。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

index.html の内容をより分かりやすくするために、不要なコードを取り除いてみましょう。

1.2 簡略化した `index.html`

index.html ファイルは以下のようになります。

<!doctype html>
<html lang="ja">
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

これで不要なコードが削ぎ落とされ、邪魔な要素なしで React の学習に集中できるようになりました。

2. createRoot 関数

createRoot 関数は src フォルダ内の main.jsx ファイルに記述されています。これは React アプリケーションの「ルートノード（Root Node）」を作成するために使用される組み込み関数です。

2.1 `src/main.jsx` のデフォルト内容

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
      <App />
    </StrictMode>
  )

createRoot() 関数は、引数として 1 つの HTML 要素を受け取ります。
この関数の目的は、React コンポーネントを表示すべき HTML 要素を定義することです。

createRoot 関数の動作を理解するために、不要なコードを削除して独自の「Hello React!」サンプルを書いてみましょう。

2.2 独自のレンダリング例

src/main.jsx を以下のように書き換えてみます。

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
  <h1>こんにちは React!</h1>
)

3. render メソッド

コードの中に render メソッドがあることに気づきましたか？
render メソッドは、HTML コンテナの中に何をレンダリングするかを定義します。
その結果が <div id="root"> 要素内に表示されます。

3.1 「root」要素内に段落を表示する

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
  <p>ようこそ！</p>
)

注意： 要素の ID は必ずしも "root" である必要はありませんが、これが標準的な慣習（コンベンション）となっています。

4. Show React ツール

W3Schools には独自の「Show React」ツールがあり、チュートリアルで説明するコードの結果を確認できます。
「Run Example」ボタンをクリックして結果を見てみましょう。

4.1 ツールでの実行例

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
  <p>ようこそ！</p>
)

5. HTML コード（JSX）

このチュートリアルの HTML コードでは JSX を使用しています。JSX を使うと、JavaScript コードの中に HTML タグを直接記述することができます。

構文に馴染みがなくても心配しないでください。JSX については後ほど詳しく学習します。

5.1 変数に HTML を格納して表示する

HTML コードを含む変数を作成し、それを「root」ノードに表示する例です。

import { createRoot } from 'react-dom/client'

const myelement = (
  <table>
    <tr>
      <th>名前</th>
    </tr>
    <tr>
      <td>ジョン</td>
    </tr>
    <tr>
      <td>エルザ</td>
    </tr>
  </table>
);

createRoot(document.getElementById('root')).render(
  myelement
)

6. ルートノードのカスタマイズ

ルートノードとは、結果を表示したい場所となる HTML 要素のことです。
これは React によって管理される、コンテンツのための「コンテナ」のようなものです。

必ずしも <div> 要素である必要はなく、id='root' である必要もありません。

6.1 任意の ID を持つルートノード

ルートノードの名前は自由に決めることができます。
例えば、結果を <header id="sandy"> 要素に表示させる場合は以下のようになります。

index.html

<!doctype html>
<html lang="ja">
  <body>
    <header id="sandy"></header>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

main.jsx

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('sandy')).render(
  <p>ヘッダーにレンダリングされました！</p>
)