お知らせ

Web開発で利用されるReactとは？

ブログ

公開日：2023-04-21

フロントエンド開発に使用される「React」。

現在弊社ではWebアプリケーション開発事業においてReactを使用しておりますが、「そもそもReactってなに？」と私自身が思うことが良くあります。

今回は、「React」ってどういうものなのかについて記載します。

Reactとは、Meta社（旧Facebook社）が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリです。

「React.js」と呼ばれることもあります。

「Reactで開発」と初めて聞いたとき「Reactというプログラミング言語で開発」と勘違いしてしまいましたが、Reactの元となっているのは「JavaScript」というプログラミング言語になります。

現在世界中で利用されているサービス「Facebook」、「Instagram」、「Yahoo!」「Airbnb」「Reddit」「Netflix」「Slack」「Uber」などでReactが使われており、現在最も勢いのあるJavaScriptライブラリになります。

GoogleChromeの拡張機能（アドオン）である「React Developer Tools」を使用すると、現在ブラウザで開いているページにReactが使用されているか判別できます。

皆さんが良く使用されるWebサービスに、Reactが使用されているか確認してみるのもいいかもしれません。

ReactはWebアプリ開発で使用されます。

特に、Webアプリのなかでも画面遷移が少なく、単一の Webページでユーザが行う操作を完結でき、UX（ユーザーエクスペリエンス）を向上できるSPA（シングルページアプリケーション）の開発に向いています。

なぜSPA開発に向いているのかというと、Reactの特徴に「コンポーネント指向」があるからです。

コンポーネントとは、「構成要素」や「部品」のことです。

コンポーネント指向とは、部品ごとに小さく分けた「コンポーネント」を組み合わせて開発をする考え方のことです。

Reactは、コンポーネント指向を前提として作られたライブラリになります。

React公式サイトには、3つのReactの特徴が説明されています。

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

これは、処理に必要な変数や値をコンポーネントに渡すだけで、そのコンポーネントの中身を見ることなく、処理を完結できるようにすることです。

これは、「単一責任の原則」という考え方が根っこにあるようです。

※モジュールやクラスをカプセル化し、その役割が単一の疎結合（互いに影響を及ぼしあわない）の状態にするという考え方

Reactは、表示する画面全体をコンポーネントに分割して作成していくことになります。

この考え方は、Web制作でWordPressを触ったことある方なら、コンポーネントをブロックと考えればイメージしやすいと思います。

コンポーネント指向で開発するメリットは、以下の通りです。

影響範囲が限定されるため、保守運用がしやすいコンポーネントの影響範囲が限定されるようになるため、保守運用をしやすくなります。
また、小さなコンポーネントに分割されていれば、可読性向上も期待できます。
パーツの再利用がしやすく、拡張しやすいコンポーネントを分けることで、パーツの再利用性を上げ、拡張しやすくなります。

一方でデメリットとして、コンポーネントを分ける明確なルールを設けていないため、コンポーネント分割の分け方が人によって異なるということがあります。

チーム開発においては明確なデメリットとなるため、摺り合わせが必要になってきます。

今回は、Reactの紹介として「Reactとはなにか」と「コンポーネント指向という特徴」について紹介しました。

世界では、Reactを使用したWeb開発が主流となっており、日本でもその流れが来ているといわれています。

コンポーネント指向は、ReactによるWeb開発の前提となる考え方だと思いますので、これを意識したうえで今後も学習に励んでいきたいと考えています。

ご参考になれば幸いです。