React公式ドキュメントを読む8 React要素とコンポーネント1

前回からの続きです。

コンポーネント単位で開発する

ウェブページの画面は、ヘッダ、メニュー、表、フォームなどの部品が集まって構成されています。Reactでは、これらの部品をコンポーネント化して、コンポーネントを組み合わせることでウェブページをつくっていきます。

Reactでは、コンポーネントが集まってウェブページの画面全体がつくられます。Reactのコンポーネントは、一度作ってしまえば再利用できます。また、複数の開発者が別々に作ったコンポーネントを組み合わせて、ウェブアプリを構築できます。コンポーネント単位で開発することで開発効率が高まります。

React要素とコンポーネント

Reactにおいて、要素とコンポーネントは別の概念です。React要素は「画面に表示したい内容を説明したもの」であり、乱暴に言ってしまえばHTMLソースのようなものです。

const element = <h1>Hello, world</h1>;

一方、コンポーネントは JavaScript関数のようなものです。引数にpropsという名称のオブジェクトを受け取って、画面に表示するReact要素を返します。

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

コンポーネントは、処理をした結果としてReact要素を返します。最終的にはReact要素を返すのですから、React要素もコンポーネントも同じように感じられるかもしれません。

しかし、コンポーネントでは開発者が独自に新しいHTMLタグを定義できます。コンポーネントを使うことで、より柔軟にReact要素を操作できるようになります。

コンポーネントを定義するには

Reactコンポーネントは、JavaScriptの関数やクラスで定義できます。以下は、ReactコンポーネントをJavaScriptの関数で書いたシンプルな例です。このなかのWelcom()関数は、propsという引数を受け取りReact要素を返します。

//JavaScriptの関数で書いたReactコンポーネントの例
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Reactコンポーネントは、ECMAScript 2015で導入されたJavaScriptクラスで書くこともできます。これらの２つのコンポーネントは、Reactでは等価です。

//JavaScriptのクラスで書いたReactコンポーネントの例
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

JavaScriptクラスで書くことで、いくつかの追加機能が利用できるようになるメリットを得られます。分かりやすいのは、JavaScript関数で書くコンポーネントのほうでしょう。

HTMLタグとコンポーネントによる独自タグ

以下のコードは、React要素を変数elementに代入しています。代入されているのは、「Hello, world」というテキスト内容のh1要素です。

const element = <h1>Hello, world</h1>;

Reactでは、上記のようなHTMLタグだけではなく、開発者が定義したコンポーネントで独自のタグを指定することもできます。例えば、HTMLの仕様に<Welcome>というタグはありませんが、以下の例ではWelcomeというコンポーネントがReact要素として定義されています。

const element = <Welcome name="Sara" />;

Reactでは、ユーザー定義のコンポーネント名は、大文字で始めるルールとなっています。上の２つのサンプルをよく見ると、HTMLのh1タグは小文字で始まっていますが、Welcomeコンポーネントは大文字で始まっています。

コンポーネントへの属性の受け渡し

Reactでは、JSXの属性を引数としてコンポーネントに渡すことができます。渡される引数はpropsという名前のオブジェクトです。

以下の例では、JSXの属性を props というオブジェクトとしてコンポーネントに渡し、コンポーネント側ではpropsオブジェクトを受け取って結果を返しています。

//propsオブジェクトを受け取り、name属性の値を利用して、戻り値を返す
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

//JSXの属性を props というオブジェクトとしてコンポーネントに渡す
const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

上記例が実行されると、画面には「Hello, Sara」と表示されます。上記のサンプルソースをHTMLファイルにしたものが以下です。

https://programming-world.net/sample/react_component.html

この例で起きたことを、実行される順序通りに確認してみましょう。

まず ReactDOM.render() を呼び出します。このメソッドの引数には変数elementがありますが、変数elementには <Welcome name="Sara" /> 要素が代入されています。
次にReact は、変数elementに代入されている Welcomeコンポーネントを呼び出します。呼び出す際には引数 props として {name: 'Sara'} を、 Welcomeコンポーネントに渡します。
引数 props として {name: 'Sara'} を受け取った Welcome コンポーネントは、戻り値として <h1>Hello, Sara</h1> 要素を返します。
React DOM は、<h1>Hello, Sara</h1> に一致するよう、DOM を効率的に更新します。

次回へ続きます。