なぜReactを使うのか？

ここでは、なぜReactを使うのか？をReactの特徴を挙げながら、説明していきます。

他のライブラリ・フレームワークとの比較

モダンなjavascriptライブラリ・フレームワークとして以下のようなものが挙げられます。

React
Angular
Vue.js

Google Trendsで上記3つのキーワードを見てみると、Reactが最も検索されているワードであることがわかります。(2024年5月現在)

Google Trends

またnpmトレンドを見るとわかりますが、上で挙げたライブラリの中で一番インストールされていることがわかります。(2024年5月現在)

npm trends

Reactの利点・特徴

ここでは、Reactの利点・特徴について説明します。

高速なレンダリング

上で挙げたAngularやVue.jsも同じような特徴がありますが、Reactでは、仮想DOMを用いることで、DOMに変更があった箇所のみを更新します。

そのため、仮想DOMを用いずにDOM全体を再構築するjQueryなどよりも高速に更新（レンダリング）することができます。

コンポーネント指向

Reactでは、画面の各構成要素を関数（コンポーネント）として定義していきます。これにより、画面の各構成要素のUIとそれに伴うロジックが１つのコンポーネントとして分離されます。

このことにより、以下のような特徴が得られます。

再利用性の向上

構成要素がコンポーネントとして分離されるので、画面上で同じようなロジックを持つものは、同じコンポーネントを使い回すことで対応ができるようになります。
可読性の向上

コンポーネントごとに、そのコンポーネントのロジックとUIを記述するため、別ファイルを参照することが少なくなるため、コードの可読性が向上します。
疎結合

コンポーネントは、それぞれの依存が緩い（場合によっては完全に独立している）ので、コンポーネントごとにテストを行うことができ、バグを減らすことができます。

Learn once, write anywhere

iOSやAndroidアプリもReactを使って記述することができます。(React Nativeを使う)

React Nativeを使っているアプリは、以下のようなものがあります。皆さんの知っているアプリもあるのではないでしょうか？

React Nativeを使っているアプリ ※React Nativeより抜粋(2024/05/14時点)

個人的に感じた利点

Reactでは、Javascriptの中にHTMLタグのようなもの記述するJSXという記法を用います。

const Component = () => {
  const handleClick = () => {
    // 処理を記述
  }
  return (
    // 以下は、JSX特有の書き方
    <div>
      <h1>Hello React</h1>
      <button onClick={handleClick}>Push</button>
    </div>
  );
};

この記法のお陰でJavascriptで実装するロジックとそれによって構成されるHTML(UI)のコードでの距離が近くなり、ロジックによってどのようにHTML(UI)が変化するのか分かりやすくなっています。

まとめ

Reactは、世界的にも支持されており、Reactの特徴によって大規模な開発でも保守性に優れたコードを記述することができます。

ただし、Reactの欠点として、学習コストが高いことが挙げられます。それは事実ですが、Reactを使うことで得られるメリットは、フロントエンド開発において、すごく大きいものだと思います。是非、Reactを身につけて、モダンなフロントエンド開発を行いましょう。

Chapter0 なぜReactを使うのか？