⚛️

React誕生の背景とその特徴

2024/07/01に公開

こんにちは!現在独学でフロントエンドの勉強をしている駆け出しエンジニアのjaymzzz37です。
今日は、自分が理解している範囲でReactが誕生した背景や使用するメリット、デメリットを言語化してアウトプットをしてみたいと思います。
もしこれは違うのでは?こうなのでは?というご意見があればどしどしコメントをお送りください。

Reactとは

まずReactとは何か?ReactはWebサイトやWebアプリケーションのUIの開発に特化したJavaScriptライブラリです。Facebook社(現Meta社)によって開発され、2013年にオープンソース化されました。

State of JavaScriptが2023年公開したフロントエンドフレームワーク、ライブラリの利用率調査ではReactが1位を獲得しており、2016年から8年連続1位を獲得している。2022年から利用率も伸ばしています。世界的にみると支持率が高いJavaScriptライブラリだとわかります。

Reactが誕生した背景

2011年にFacebook社ではFacebook Ads(広告管理アプリ)が多機能化しことにより、コードが大規模化、複雑化し、保守が困難を極めていました。この状態はビジネスにもインパクトがあったため、課題解決が急務となっていました。そこで、Facebook社の社員であったJordan Walke氏はよりシンプルにコードが書くことができ、開発と保守がより効率化できるようFaxJS(現Reactのプロトタイプ)を開発し導入しました。

名前の由来

Reactは日本語で「反応する」という意味です。ユーザーの操作や状態変化に反応してUIを更新することからこの名前になったのではないかと思います。下記の「Reactの特徴」を読み進めることでより納得できるのではないかと思います。

Reactの特徴

宣言的なUI

宣言的とは、「アプリがこの状態であればこのようにUIを表示する」とコード内でUIを宣言する書き方です。これは命令的な書き方をするJavaScriptなどと異なる大きなポイントです。宣言的なUIは命令的なUIと比べるとエラーが発生しづいらい、第三者がコードも見ても直感的に理解がし易いといった特徴があります。

宣言的、命令的なUIを例えるなら

私は、「版画」と「手書き」を比喩として使うのが分かりやすいと思っています。版画は宣言的なUI、「富士山の絵が欲しい」というリクエストがあれば富士山の版画を刷ります。版を見れば誰もが富士山の絵だと分かりますし、版を一回作ってしまえばミスなく同じ富士山が何度も刷れます。一方で手書きは命令的なUI、「まず少し平たい山を描いて、頂上は少し欠けていて雪が積もっていて、麓には木が生えていて・・・」と指示通りに描いていくイメージです。指示だけを見ても最終的な完成図が掴みづらいですし、途中で指示を間違えていて少し違う絵になる可能性もあります。このようにして考えると宣言的なUIは、可読性が高く、エラーが起こりづらいというのが理解しやすくなると思います。

コンポーネント指向

コンポーネント指向とは、アプリ内で必要な「パーツ」に分けてコードを書くことです。そして作ったコンポーネントを組み合わせていくことでアプリケーションを完成させていきます。コンポーネントを作るとそれが色んな場所で再利用ができるため開発効率が上がります。また各コンポーネントはカプセル化されているため、コンポーネントに修正を加える際にアプリケーションの他の部分に影響を与える心配がなく、更にはテストもし易いという特徴があります。

コンポーネント指向を例えるなら

先ほどの版画の例に沿って例えると、富士山の絵に「太陽」と「雲」を足したいとなった場合に、富士山の版に追加でそれらを掘るのではなく、「太陽の版」と「雲の版」を別で作っておくようなイメージです。それぞれの版を別々で作っておくことで版の配置を変えて違うバリエーションの絵が刷れますし、全く別の絵を刷るときに太陽が欲しいとなった場合に、作っておいた「太陽の版」を再利用すれば良いのです。このようにコンポーネント指向とは、「パーツ」を作り、それらのパーツを組み合わることで最終的な絵(ページ)を作りあげるようなコンセプトです。

状態管理がし易い

Reactは状態管理が容易にできる設計になっています。先にも記しているようにUIを宣言的に書くReactにおいては「状態」は重要な役割を担っています。ユーザーはログイン中なのか、データはローディング中なのか、どんなデータが取得できたのか、ダークテーマが選択されているのかなど様々な状態の参照及び更新は必要不可欠です。Reactはコンポーネントごとに状態管理ができるようになっており、誤って他のコンポーネントの状態を更新することが防げるため堅牢性が高いです。

仮想DOMを使ったレンダリング

仮想DOMを使ったレンダリングとは、DOMを直接操作するのではなく、DOMを模した仮想のDOMを操作することでUIを更新するということです。もう少し詳しく説明をすると、ReactはUIの更新があった場合まず仮想DOMにその変更内容を反映します。次に仮想DOMと実際のDOMの差分を検出します。検出された差分のみが実際のDOMに反映されます。このようなステップでDOMを操作するこで無駄のない処理ができ、結果的に高速にUIを更新することができます。

メリット

リッチなユーザー体験が提供できる

仮想DOMを使ったレンダリングにより高速にUIを更新することができるためSPA(Single Page Application)の開発に適しています。UIを更新するために必要な時間が短いという特徴がある上に、SPAであればページをリロードする時間も短縮することができるため、ユーザーの待機時間を減らし体験を向上することができます。

チーム開発がしやすくなる

宣言的なUIであるためコードの可読性が高く、他のチームメンバーが書いたコードも理解がしやすいです。またコンポーネント指向であるため、一度作られたコンポーネントは他のチームメンバーが再利用することができ、同時にUIに統一感を持たすことができます。

豊富なエコシステムによる開発効率が向上する

世界的にみると利用率が高いReactには大きなコミュニティが形成されており、React向けのサードパーティ・ライブラリが数多く公開されています。これらのライブラリを活用することにより効率的に開発が進められます。

ネイティブアプリの開発にも活用ができる

英語では"Learn Once, Write Anywhere"("一度学習し、どこでも活用できる")と言われているようにReact Nativeを使うことでモバイル端末用のネイティブアプリの開発も可能となります。

デメリット

仮想DOMが原因でパフォーマンスが低下する可能性がある

仮想DOMは、DOM構成をメモリ上に保持するため、メモリの消費は必然的です。状態変化やそれに応じてUIの更新があまりないアプリケーションの場合、このメモリの消費が反ってパフォーマンスの低下に繋がってしまう場合があります。Reactの採用有無はアプリケーションの要件に応じて決定するのが良いでしょう。

豊富なエコシステムが裏目に出る可能性がある

Reactのメリットでもありデメリットともなり得るのがサードパーティ・ライブラリの豊富さです。開発効率を上げることができるのは事実ですが、一方でライブラリを選定するコスト、ライブラリの更新やそれに伴う他のライブラリへの影響範囲などを調査するコストなど配慮すべきことが増えるもの事実です。将来的にReactに実装される機能次第ではこのデメリットは変化する可能性もあります。

参考文献

https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/
https://prismic.io/blog/vue-vs-react
https://ja.react.dev/
https://www.kagoya.jp/howto/it-glossary/develop/react/

Discussion