Reactでテーブル（表）を実装している際に、ブラウザのコンソールに以下の警告（Warning）が表示されて困っていませんか？
Plaintext
Warning: validateDOMNesting(...): <th> cannot appear as a child of <thead>.
一見、問題なく画面にテーブルが表示されているように見えても、このエラーを放置するとレイアウト崩れやSEO上のデメリットに繋がることがあります。
本記事では、このエラーが発生する理由と具体的な修正コード、さらにReactでテーブルを作る際にSEOやアクセシビリティを意識した正しい実装方法まで分かりやすく解説します。
1. エラーが発生する原因
結論から言うと、<thead> の直下に <th> タグを直接配置していることが原因です。
ReactはHTMLの仕様（W3CのDOMネスト規則）を厳格にチェックしています。HTMLの構造上、<thead> の下には必ず「行」を表す <tr> タグを配置しなければならないルールになっています。
- NGなネスト構造:
<thead>＞<th> - 正しいネスト構造:
<thead>＞<tr>＞<th>
2. 修正コードの比較（Before / After）
エラーを解消するためのコード修正例です。
❌ 修正前（エラーが発生するコード）
<thead> の直下に <th> を配置してしまっています。
JavaScript
export const UserTable = () => {
return (
<table>
<thead>
{/* ❌ <tr> が抜けているため警告が発生する */}
<th>名前</th>
<th>メールアドレス</th>
<th>役割</th>
</thead>
<tbody>
<tr>
<td>山田 太郎</td>
<td>yamada@example.com</td>
<td>管理者</td>
</tr>
</tbody>
</table>
);
};
⭕️ 修正後（正しいコード）
<thead> の中に <tr> タグ を追加し、その中に <th> を配置します。
JavaScript
export const UserTable = () => {
return (
<table>
<thead>
{/* ⭕️ <tr> で囲むことで正しくネストされる */}
<tr>
<th>名前</th>
<th>メールアドレス</th>
<th>役割</th>
</tr>
</thead>
<tbody>
<tr>
<td>山田 太郎</td>
<td>yamada@example.com</td>
<td>管理者</td>
</tr>
</tbody>
</table>
);
};
3. なぜ正しいDOM構造がSEOやUXに重要なの？
単に「コンソールの警告を消す」だけでなく、正しいHTML構造（セマンティックHTML）を維持することには重要な意味があります。
- 検索エンジン（SEO）の理解を助けるクローラーはWebページを解析する際、HTMLの構造を正しく読み取ります。不正なDOM構造はページのインデックス精度を下げ、検索順位に悪影響を与える可能性があります。
- スクリーンリーダー（アクセシビリティ）の対応視覚障害者が利用する音声読み上げソフトは、
<thead>＞<tr>＞<th>の構造を基に「どの列のデータか」を読み上げます。構造が崩れていると、正確な情報が伝わりません。 - スタイル（CSS）崩れの防止ブラウザによっては、不正なタグ配置を自動補正（修復）しようとします。その結果、意図しないCSSの適用やレイアウト不具合が発生する原因となります。
4. Reactでテーブルを作る際に気をつけたい関連エラー
validateDOMNesting は、<th> 以外でも頻繁に発生します。よくある間違った配置例をチェックしておきましょう。
| 発生しやすいエラー構造 | 正しい構造 |
<table> の直下に <td> や <th> | <table> ＞ <tbody> ＞ <tr> ＞ <td> |
<p> タグの中に <div> タグ | <p> の中にはインライン要素（<span>など）のみ |
<a> タグの中に <a> タグ | リンクの二重ネストは不可 |
<ul> の直下に <div> タグ | <ul> ＞ <li> ＞ <div> |
まとめ
Warning: validateDOMNesting(...): <th> cannot appear as a child of <thead> が出たら、<thead> の中に <tr> を入れ忘れていないか を真っ先に確認しましょう。
正しいマークアップを行うことは、エラーを解消するだけでなく、SEO評価の向上やアクセシビリティの改善にも繋がります。コンソールの警告は放置せず、見つけたら早めに修正しておきましょう！
コメント