Reactの基本コンポーネント指向とコンポーネントの定義をわかりやすく解説

Reactとは、Meta（旧Facebook）が開発したユーザーインターフェース構築のためのJavaScriptライブラリで、非常に開発効率が高いという特徴があります。

High Career Blogでも「Reactとは？注目のJavaScriptフレームワークのメリットとデメリット」という記事で、今がトレンドのReactについて初学者向けに紹介しています。

本記事では、これから実際にReactを学習していこうというReactビギナー向けに、React開発において大切な考え方である「コンポーネント指向」とコンポーネントの定義について紹介していきます。

【React入門】関数コンポーネントとクラスコンポーネントについて解説

コンポーネント指向とは

Reactは「コンポーネント指向のJavaScriptにおけるUIライブラリ」です。では、コンポーネント指向とはどういう考え方なのでしょうか。

React公式サイト（https://ja.reactjs.org/）では、Reactの特長の１つとして「コンポーネントベース（指向）」を挙げており、以下のような解説が記載されています。

「自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。」

IT用語辞典（https://e-words.jp/）によると、カプセル化とは「互いに関連するデータの集合とそれらに対する操作をオブジェクトとして一つの単位にまとめ、外部に対して必要な情報や手続きのみを提供すること。外から直に参照や操作をする必要のない内部の状態や構造は秘匿される。」とされています。

つまり、「コンポーネント指向」とは、さまざなま機能ごとに部品として分割しておき、必要に応じて組み合わせて使うという考え方であり、呼び出されることを前提に機能に応じたインターフェースが定められたパーツを使うことで複雑なUIを効率的に開発することを目指しています。

Reactにおけるコンポーネント

Reactのコンポーネントには「HTML」「CSS」「JavaScript」が内包されており、生成するだけで専用のユーザーインターフェースを構築できます。

これはReactのコンポーネントが「ユーザーインターフェースを再利用可能な部品」であり、ある引数を与えられると、それに対応したユーザーインターフェースを返すという関数のような特徴を持っているからなのです。

Reactで開発する場合、さまざまなコンポーネントを作ることになります。コンポーネントを作成する際の明確な規則はありませんが、以下のような３点から開発に必要な一番小さな部品から考えると良いでしょう。

HTML、CSS、JavaScriptがそれぞれある程度機能を持っているか
全体共通のものではないか
レイアウト情報などはふくまれていないか

全体に影響を及ぼさない個別の機能をパーツ化したものがコンポーネント作成の出発地点になります。

コンポーネント指向のメリット・デメリット

コンポーネント指向は部品化されたコンポーネントを組み合わせることで、ユーザーインターフェースを構成するという考え方ですが、すべての開発現場に恩恵をもたらすわけではありません。

React開発する前に、コンポーネント指向のメリット、デメリットをしっかりと把握して導入するかどうかを検討することが大切です。

コンポーネント指向のメリット１：拡張性の高さ

メリット１つ目は、パーツの再利用による拡張性の高さです。

例えば、Reactでボタン機能をコンポーネント化したとしましょう。ボタンというパーツは同じでも、JavaScriptでクリック時に発火するイベントを変えて使用したり、HTMLやCSSで文字や色を変えて使用したりできるのです。

Reactにはコンポーネントライブラリが充実しています。これらを活用することでさらに効率的に開発を進めることが可能です。

コンポーネント指向のメリット２：保守運用にしやすさ

メリット２つ目はコンポーネントのカプセル化による保守運用のしやすさです。

カプセル化されたコンポーネントはその影響範囲が限定的になります。例えば、複数のコンポーネントにおいてCSSで同じクラスを使用したとしても、クラス名の衝突が発生せずレイアウトが崩れるということがありません。

小さくコンポーネント化されていると、変更・追加の回数が多くても比較的少ない作業量で対応が可能です。つまり、大規模なコンテンツほどその効果が期待できると言えるでしょう。

コンポーネント指向のメリット３：可読性の向上

コンポーネント化でできるだけ小さな部品に分けることによるメリットが可読性の向上です。機能を小さく分けたコンポーネント毎のコードは量が少ないので、見るべき内容が限定されコードを読む時間を短縮できるのです。

コンポーネント指向のデメリット

コンポーネント指向にも以下のようなデメリットがあります。

コンポーネントの想定や作成に時間がかかる
チーム開発でコンポーネントの粒度がエンジニアによって変わる可能性がある
更新がないコンテンツでは効果がない

特に初学者はコンポーネントの作成に時間がかかってしまうため、「思っていたより効率的ではないな･･･」と感じてしまうことがあるかもしれません。しかし、時間がかかるものなのだと分かっていれば心の持ちようが変わってきます。

最初にしっかりと開発全体を見通したコンポーネントを作成することで後半の作業効率がグンと上がりますので、しっかりと取り組んでください。

コンポーネントの定義

Reactのコンポーネント定義は、関数を使用する「関数コンポーネント」とクラスを使用する「クラスコンポーネント」の２つがあります。

ここではそれぞれの定義方法を見ていきましょう。

関数コンポーネント

関数コンポーネントを定義するもっとも簡単な方法はJavaScriptの関数を定義することです。一例として「Hello,〇〇」という文字列を返すコードを見てみましょう。

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

※React公式ドキュメント（https://ja.reactjs.org/docs/components-and-props.html）より

この関数はデータの入った “props”（プロパティ）というオブジェクトを引数としてひとつ受け取り要素を返しており、有効なReactコンポーネントとなります。

クラスコンポーネント

クラスコンポーネントは、JavaScriptのクラス構文を用いてコンポーネントを定義します。例えば、関数コンポーネントで紹介した「Hello,〇〇」という文字列を返すコードをクラスコンポーネントで記述すると以下のようになります。

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

※React公式ドキュメント（https://ja.reactjs.org/docs/components-and-props.html）より

コードは全く違いますが、Reactから見ると同じ内容になります。ただ、クラスコンポーネントではReact.Componentを拡張するクラスを作成する必要があるため、簡潔に書けるケースの多い関数コンポーネントが主流になっています。

最後に

いかがでしたか？今回はReactの基本となるコンポーネント指向とコンポーネントの定義について解説しました。

React開発ではユーザーインターフェースのさまざまな要素をコンポーネントとして作成、再利用していきます。そのベースとなる考え方をきちんと理解することは、実践において非常に大切です。

また、コンポーネント指向はReact以外にもVueなどモダンJSでよく用いられる考え方ですので、しっかりと理解しておくことで開発の幅が広がります。書籍でもっと深堀したいという方は、以前書いた「Reactの入門書おすすめ8選レベル別に紹介」という記事を参考にしてみてくださいね。