【ITニュース解説】Components in React

ReactというJavaScriptライブラリは、WebサイトやWebアプリケーションのユーザーインターフェース（UI）を構築するために広く利用されている。システムエンジニアを目指す上で、このReactのコンポーネントという概念は、学習の第一歩として非常に重要になる。

コンポーネントとは、ウェブページの画面を構成する要素を、再利用可能で独立した部品として定義したものだ。たとえば、ウェブサイトでよく見かけるボタン、ナビゲーションメニュー、ユーザーのプロフィール表示部分などは、それぞれが独立した一つのコンポーネントとして考えられる。これらの部品は、一度作成すればアプリケーション内のどんな場所でも使い回すことができるため、同じような見た目や機能を持つ部分を何度もコードに記述する必要がなくなり、開発の効率が大幅に向上する。さらに、各コンポーネントは独立しているため、あるコンポーネントに変更を加えても、他のコンポーネントに予期せぬ影響を与えにくいという利点もある。Reactアプリケーションは、これら小さく独立したコンポーネントが組み合わさって、一つの大きなUIを形成する仕組みとなっている。コンポーネントは、Reactアプリケーションを構築するための「ビルディングブロック（構成要素）」そのものである。

Reactには主に二種類のコンポーネントが存在し、それぞれ記述方法や扱える機能に違いがある。それが「関数コンポーネント」と「クラスコンポーネント」だ。

まず、関数コンポーネントについて説明する。関数コンポーネントは、その名の通りJavaScriptの関数として記述される。この関数は、外部からデータを受け取るための引数（propsと呼ばれる）を取り、最終的に画面に表示される内容、すなわちJSX（JavaScript XML）を戻り値として返す。propsは「プロパティ」の略であり、親コンポーネントから子コンポーネントへデータを渡すための仕組みだ。例えば、ユーザーの名前を表示するコンポーネントがあった場合、そのユーザーの名前をpropsとして受け取ることで、表示する内容を動的に変えられる。

具体例を見てみよう。次のコードは、Greetingという名前の関数コンポーネントの例だ。

Copy
1 function Greeting(props) {
2  return(
3  <h1>Hello, {props.name}!</h1>
4  );
5}

このGreeting関数は、propsという引数を受け取る。関数本体の中では、return文でJSXが返されている。これはHTMLのような記述形式だが、JavaScriptの機能も利用できる。<H1>タグの中にHello, {props.name}!という記述があるが、これはpropsの中からnameというプロパティの値を取り出して表示することを意味する。もしこのGreetingコンポーネントが、アプリケーション内で<Greeting name="Vidhya" />のように使われた場合、props.nameの値は"Vidhya"となり、結果として画面には「Hello, Vidhya!」と表示されることになる。関数コンポーネントは、シンプルで記述量が少なく、主にUIの表示に特化したコンポーネントとして利用されることが多い。

次に、クラスコンポーネントについて解説する。クラスコンポーネントは、JavaScriptのES6（ECMAScript 2015）で導入されたクラス構文を用いて記述される。関数コンポーネントと異なり、クラスコンポーネントを作成する際には、必ずReact.ComponentというReactが提供する基底クラスを継承する必要がある。これにより、作成するクラスがReactのコンポーネントとしての基本的な機能や振る舞いを利用できるようになる。

クラスコンポーネントの大きな特徴は、自身の内部で「状態（state）」を管理できること、そして「ライフサイクルメソッド」という特定のタイミングで実行される処理を定義できることにある。状態管理とは、コンポーネントが持つデータが時間と共に変化する際に、その変化を内部で保持し、UIに反映させる機能だ。例えば、画面上のボタンを押すたびに数値が増減するカウンターのようなコンポーネントであれば、現在のカウント数をthis.stateとして管理し、ボタンが押されるたびにその値を更新することで、画面の表示をリアルタイムで変更できる。componentDidMountのようなライフサイクルメソッドは、コンポーネントが初めて画面に表示された直後や、更新された後など、特定のイベント発生時に何らかの処理を実行したい場合に利用される。

クラスコンポーネントの例を見てみよう。次のコードは、Greetingという名前のクラスコンポーネントの例だ。

Copy
1class Greeting extends Component {
2  render() {
3    return <h1>Hello, {this.props.name}!</h1>;
4  }
5}

このGreetingクラスはComponent（React.Componentのこと）を継承している。クラスコンポーネントでは、画面に表示するJSXを返すために、必ずrender()というメソッドを定義する必要がある。このrenderメソッドの中で、関数コンポーネントと同様にJSXが返されている。ここでは<h1>Hello, {this.props.name}!</h1>という記述があり、this.props.nameとすることで、外部から渡されたnameプロパティの値にアクセスしている。関数コンポーネントではprops.nameと直接記述していたが、クラスコンポーネントではクラスのプロパティとしてthisキーワードを使ってアクセスする点が異なる。

これらのコンポーネントは、以下のようにHTMLタグのような形式でアプリケーション内で利用される。

Copy
1<Greeting name="Vidhya" />

この記述は、Greetingコンポーネントを呼び出し、nameというプロパティに"Vidhya"という値を渡していることを意味する。Reactは、この記述を受け取ると、対応するコンポーネントのコードを実行し、その結果生成されたUIを画面に表示する。

まとめると、Reactにおけるコンポーネントは、WebアプリケーションのUIを構築するための、再利用可能で独立した部品であり、開発効率を高め、保守性を向上させる基盤となる。関数コンポーネントとクラスコンポーネントの二種類があり、それぞれ記述方法や得意な機能が異なる。関数コンポーネントはシンプルにUIを表示する際に用いられ、propsを受け取りJSXを返す。一方、クラスコンポーネントはより多くの機能、特に内部の状態管理やコンポーネントのライフサイクルに応じた処理が必要な場合に利用され、React.Componentを継承しrenderメソッドでUIを定義する。これらのコンポーネントの概念を深く理解することは、Reactを用いた現代的なWeb開発を進める上で不可欠な知識である。システムエンジニアを目指すのであれば、まずはこれらの基礎をしっかりと押さえることが成功への近道となるだろう。