React公式ドキュメントを読む10 React要素のルートはひとつにする

前回からの続きですが、このページだけ読んでも分かる内容になっています。

<div>タグなどでまとめる

以下のサンプルでは、AppコンポーネントからWelcomeコンポーネントを3回呼び出しています。このサンプルソースのAppコンポーネントの部分に注目してみましょう。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

この部分では、Welcomeコンポーネントが3回呼び出されていて、その外側を<div>～</div>で囲んでいます。

試しに、この <div>タグを外してみたらどうなるでしょうか。以下のサンプルソースは、上記サンプルから<div>と</div>を削除したものです。それ以外の部分は上記サンプルと同じです。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

上記のサンプルソースをHTMLファイルにしたものが以下です。

https://programming-world.net/sample/react_component2-2.html

このサンプルを実行しても、今度は画面に何も表示されません。

これは、Reactには「表示する要素のルートノードはひとつだけにする」というルールがあるためです。h1要素を3つ表示する上記サンプルのように、複数のReact要素を表示したい場合には、その全体を<div>～</div>のようなコンテナ要素で囲んでやる必要があります。

表示する要素がひとつなら問題ない

一方、表示する要素がひとつなら、全体を<div>～</div> で囲んでやる必要はありません。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
      <Welcome name="Sara" />
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

https://programming-world.net/sample/react_component2-3.html

上記のサンプルが実行されると、画面には以下のように表示されます。

Hello, Sara

全体を<div>～</div>で囲んでいませんが、ルートノードがひとつだけなので、問題なく表示されます。

複雑さを排除してシンプルさを保つ

React要素のルートノードはひとつだけです。もし、タグが複数になるなら <div>～</div> などのコンテナ要素で囲んで、ひとつにまとめてやる必要があります。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

この「React要素のルートノードはひとつだけ」というルールも、Reactアプリから複雑さを排除してシンプルさを保つのに貢献します。

Reactは簡単に理解できるとは言いませんが、シンプルで扱いやすいとは言えるかもしれません。混乱のもとになる複雑さを排除する思想が貫かれており、一度 Reactの流儀を理解すれば、シンプルにアプリ開発できるようになります。

次回へ続きます。