Reactの概要と基礎技術要素を理解する

基礎からはじめるReact入門 第1回

JSX Syntax

　前節において、Component宣言時には使われていたXML風な記述方法はJSXと呼ばれるものです。一度理解してしまえば難しいものではありませんが、初見だと戸惑う方もいるかと思います。コードを触りながら慣れていきましょう。index.jsに少し変更を加えます。

リスト1　src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

　上記の変更を加えて保存してからブラウザの画面を見ると、”Welcome to React”の画面からテキストで”Hello World”の画面に切り替わっているかと思います（nodeサーバーを停止していた場合は、再度npm startコマンドでサーバーを起動してください）。このようにJSXによりHTML要素を変数として保持し、ReactDOM.renderメソッドで画面に描画するスタイルはReactの基礎の
1つです。

図5　JSXを利用した描画

　JSXは基本的にはHTMLを変数化しているという理解で問題ないのですが、ビルド時にはJavaScriptに変換されてからコンパイルが実行されます。そのため、classやfor属性といったJavaScriptの予約語はJSXでは利用できません。代わりにclassNameやhtmlForといったプロパティ名を利用する必要があります。また、JSXは下記のように変数を利用することやタグに子要素を持たせることも可能です。

const element1 = <img src={user.profilePhoto}>    // {}演算子による変数表現

const element2 = (                                // 子要素のあるdivタグ
  <div>
    <h1>Good Evening</h1>
    <h2>It’s cold tonight! Take care of yourself</h2>
  </div>
);

　JSXはシンプルにさまざまなタグ要素を表現することができますが、内部ではReact.createElementというメソッドが実行されています。以下の二つのコードは同一です。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

　以下はReact.createElementメソッドの構文です。

［構文］createElementメソッド

React.createElement(
  type,
  [props],
  [...children]
)
type：タグ要素／Reactコンポーネント、porps：タグの属性、children：子要素

コンポーネントの概要

　冒頭で、コンポーネントベースであることがReactの特徴の一つであると述べました。コンポーネントとは、機能を兼ね備えたUIの部品です。Reactではコンポーネントを組み合わせてアプリを構築することで、コンポーネントごとに状態を管理すると同時に、複雑なUIを一つの部品としてまとめることができます。

　コンポーネントには関数型とクラス型という2種類の宣言方法があります。以下の2つは同一の
コンポーネントです。

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

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

　関数型は簡潔にコードを記述できるというメリットがあります。また、関数型は状態を管理できない（ステートレスである）という特徴があります。一方、クラス型は状態を管理できます（ステートフルです）。状態変化に応じてViewを更新したいようなコンポーネントを作成する場合に効果を発揮します。

　関数型とクラス型のどちらを利用するかは状況に応じて判断する必要があります。全てのコンポーネントをクラス型で作成してしまうと、アプリが大きくなって1つの親要素の下に大量の子要素がひも付いた場合に、全てのコンポーネントの状態を管理することが非常に難しくなります。とはいえ、全てのコンポーネントをステートレスにする必要はなく、場合によりコンポーネントをステートレスにするか、ステートフルにするか使い分けるべきです。

コンポーネントの利用

　次にコンポーネントを描画するコードを示します。index.jsを書き換えることで動作は確認できます。

リスト2　src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;    //（2）
}

const element = <Greeting name="Tom"/>;    //（1）

ReactDOM.render(
  element,
  document.getElementById('root')
);

図6　コンポーネントを利用した描画

　（1）でelementを生成する際に、注目すべき点が2つあります。まず1つ目はGreetingタグを宣言している点です。ユーザー定義の名称のコンポーネントとして要素を生成することができます。そしてもう1つ目はnameというタグ属性を設定している点です。Reactにおいて、コンポーネント宣言時に設定したタグ属性は、propsオブジェクトとしてコンポーネントに渡されます。propsを通してコンポーネントに渡された属性は、（2）のようにname変数として取り出されます。

あとがき

　本稿ではReactの概要と基礎となる技術要素についてできるだけ丁寧に解説することを心がけました。Reactはコンポーネントを組み合わせたアプリケーションの構築を強制させることで、コードの保守性や可読性を上げ、特に大規模アプリケーション開発における効率を上げてくれます。本稿がこれからReactを学ぶ方が最初の一歩を踏み出すための一助となれば幸甚です。

　次回はコンポーネントに関する続きの解説とさまざまなHTMLタグを描画する方法について紹介します。