ReactにおけるHTMLタグのネスティングエラーへの対処方法

こんにちは！
今日は「ReactにおけるHTMLタグのネスティングエラー」について書いてみたいと思います。

実はこれ、ぼく自身がつい最近ハマった問題なんです。「ちゃんと書いてるはずなのに、なんかエラーが出る……」みたいなやつですね。React初心者の方なら、一度は見たことがあるかもしれません。
出てきたエラーメッセージはこんな感じ。

validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

え、どういうこと？って思いますよね。

よくあるネスティングエラーの正体

このエラー、ざっくり言えば「タグの入れ子（ネスティング）の仕方がHTMLのルールに反してるよ！」という警告です。

たとえば、以下のようなコードを書いたとしましょう：

<p>
  こんにちは！
  <div>これはダメなやつです。</div>
</p>

れ、React的にもHTML的にもNGなんです。

なぜダメなのか？

<p>タグの中に<div>を入れることは、HTMLの仕様上、許されていないんです。
<p>は「フローコンテンツ（主にインライン要素）」だけを子として持つことができます。<div>は「ブロック要素」なので、親が<p>だとダメ、というわけです。

「ちょっと難しいぞ……」と思った方、大丈夫です！簡単に言えばこうです：

段落タグ（<p>）の中にブロックを入れちゃダメ。

エラーの解決方法は？

ステップ①：エラーの箇所を特定しよう

Reactのコンソールに表示されるエラーには、だいたい「どの行にどんな問題があるのか」が書かれています。
まずは冷静に、どのコンポーネントでこのネスティングが行われているのかをチェックしましょう。

ステップ②：タグの構造を見直そう

たとえば、こんな風に修正できます。

NGパターン

<p>
  これは段落です。
  <div>これはネストNG</div>
</p>

OKパターン①：divを外に出す

<p>これは段落です。</p>
<div>これは別のブロックです。</div>

OKパターン②：pをdivに変える

<div>
  これは段落っぽいけど、divです。
  <div>これはOK</div>
</div>

ステップ③：再度アプリを動かして確認！

構造を修正したら、アプリケーションを再読み込みしてみてください。
エラーメッセージが消えていれば、バッチリです。

そもそもpタグってそんなに制限があるの？

実は、あります。
<p>タグって、実はちょっと“お堅い”タグなんです。勝手に閉じたり、他のブロック要素を受け入れなかったり、なかなか扱いが難しい。

そのため、最近のReact開発では<p>を使うよりも<div>や<span>でレイアウトを組むことが多いんです。特に初心者のうちは、意識的に<p>の使用を控えるのもひとつの方法かもしれません。

まとめ：Reactでのタグは「正しくネスト」が命

というわけで、今回のポイントを振り返ってみます。

  • <p>タグの中に<div>などのブロック要素を入れるとHTMLの仕様違反になり、Reactが警告を出します。
  • エラーの原因を特定して、構造を見直しましょう。
  • <div>に置き換える、もしくは分けて使うことで回避可能です。
  • HTMLタグにはそれぞれの「使い方のルール」があるので、ちょっとだけ意識して使うとトラブルが減ります！

とはいえ、最初は誰でも間違えます。
ぼくも最初は「え、pの中にdiv入れちゃいけないの？」と驚きました。

でも、こういうちょっとした仕様をひとつずつ理解していくことで、Reactでの開発がぐっと楽になりますよ！

Reactを始めたばかりの人にとって、「意味不明なエラー」が少しでも減ってくれたら嬉しいです。
それでは、また次回の記事でお会いしましょう〜！

タグ