この記事には useEffect や ref など、少し発展的な内容が含まれています。
まだ学んでいない場合は「こういうものがあるんだな」と軽く読み流しても問題ありません。
ルート要素とは
ルート要素とは、React アプリケーションがブラウザの DOM に描画される際の最上位の DOM ノードのこと。React だと、index.html の <div id="root"></div> がルート要素にあたる。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
なぜルート要素が必要なのか
React アプリは、HTML に静的に書かれるのではなく、JavaScript によって動的に描画される。そのため、React は「どの DOM 要素に描画すればいいか」を知らなければ動けない。つまり、描画先となる要素（＝ルート要素）を HTML 側に用意しておく必要がある。
エントリーポイントとは
エントリーポイントとは、アプリの実行が最初に始まるファイルや関数のこと。React だと index.js があたる。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
なぜエントリーポイントが必要なのか
エントリーポイントは、React アプリが実際に動き出す 「スタート地点」。ここでは以下のようなことを行う。
- React に「どこに描画するか（＝ルート要素）」を教える
- 最初に描画すべきコンポーネント（例：
<App />）を指定する - スタイルの読み込みや初期設定をまとめる
- ビルドツール（Vite や Webpack）にとっての読み込み起点になる
Strict モードとは
Strict モードとは、React アプリのコードを厳しくチェックする開発専用のモード。主にバグの原因になりやすいコードや、将来非対応になる書き方を検出するために使われる。<React.StrictMode> でアプリ全体を囲むだけで有効になる（本番環境には影響なし）。
具体的に何をしている？
レンダリングを追加で1回実行する
「同じ入力で結果が変わらないか？」を確認する。副作用があるとバグが表面化する。
function Hello({ name }) {
console.log("レンダーされました");
return <h1>Hello, {name}</h1>;
}
副作用（useEffect）を追加で1回実行する
「クリーンアップ処理がちゃんと書かれているか？」を確認する。クリーンアップを書き忘れていると、イベントが重複して登録されてしまうなどのバグが表面化する。
useEffect(() => {
const onClick = () => alert("clicked");
window.addEventListener("click", onClick);
return () => {
window.removeEventListener("click", onClick);
};
}, []);
ref の処理を追加で1回実行する
ref={(el) => ...} のようなコールバックも、null → DOM ノードと2回呼ばれ、正しく扱えているかを確認する。
<input ref={(el) => console.log("ref:", el)} />
非推奨APIの使用を警告する
古いライフサイクルメソッドのような非推奨APIを使用した場合に、コンソールに警告を表示する。
参考