Reactの特徴についてまとめてみた

これまで何となくReactを使ってきましたが、最近ふと「Reactのどこが優れていて、なぜこんなに使われているのか？」を自分の言葉で説明できないことに気づきました。

今回は、Reactの特徴や仕組みをあらためて整理し、初学者でも「なるほど」と思えるような形でまとめてみました。

なんとなくReactを使っている」「学び始めたばかりだけど全体がよくわからない」
そんな初学者の方に読んでもらえると嬉しいです。


## Reactを使用する4つのメリット
- コンポーネント指向で再利用性と保守性を向上
- 宣言的UIでバグを減らす
- 仮装DOMでパフォーマンスを向上
- 単方向データフローでデータの流れをわかりやすくした

記事を読んだところ、この4点が主に出てきたので、それぞれ噛み砕いて説明していきたいと思います。

## コンポーネント指向で再利用性と保守性を向上
Reactでは、**「コンポーネント」** と呼ばれる小さな部品のような単位でUI（画面）を作るのが特徴です。
このコンポーネントは、ボタンやフォームのような小さなパーツから、ページ全体のような大きなものまで、いろいろなサイズで作れます。

たとえば、ボタンを1つ作っておけば、そのボタンを別のページや場所でも**コピぺせずに** 再利用できます。しかも、ボタンの見た目や動きも、コンポーネントの中だけで完結しているので、他の部分に影響を与えずに修正できます。

さらにReactでは、見た目の部分（UI）とデータやロジックの部分（状態管理）を分けて考えることができます。
コンポーネントの中には「今どう表示するか」だけを書いて、データの変化や操作は別の場所（親コンポーネントや専用の管理ロジック）で扱うことができるんです。

例
```
// たとえばこんなコンポーネント
const MyButton = () => {
  return <button className="rounded bg-blue-500 text-white">クリックしてね</button>;
};

// ↑この MyButton をいろんな画面で使いまわすことができる

```

この仕組みのおかげで、コンポーネントは「部品」としてシンプルでわかりやすいまま保ちやすくなっています。
だからReactは **「作りやすくて、直しやすい」** アプリを作るのに向いている、と言われているんですね。

ここで、
- 作りやすい→再利用性を向上
- 直しやすい→保守性を向上

と言い換えることができます。

## 宣言的UIでバグを減らす
Reactでは、宣言的UIというスタイルを採用しています。

宣言的UIとは、「UIがどうあるべきか（＝状態に応じた見た目）」を宣言して書くコーディング手法のことです。
これによって、DOMを直接操作する必要がなくなり、状態に応じて自動的に画面が変わるようになります。

### 命令的UIとの比較
まずは、従来の「命令的UI」の書き方を見てみましょう。
```
// 命令的UIの例

if (isLoggedIn) {
  document.getElementById("message").innerText = "こんにちは！";
} else {
  document.getElementById("message").innerText = "ログインしてください";
}

```
このように、状態に応じてどの要素をどう操作するかを1つ1つ命令しなければなりません。
コードが複雑になりやすく、変更やバグ修正も大変です。

### 宣言的UIの例（React）
次に、Reactの宣言的な書き方を見てみましょう。

```
// 宣言的UIの例

const Message = ({ isLoggedIn }) => {
  return (
    <p>
      {isLoggedIn ? "こんにちは！" : "ログインしてください"}
    </p>
  );
};
```
このように、状態に応じた“結果”をそのまま書くだけなので、とてもシンプルです。
複雑な条件分岐やDOMの直接操作を避けられるため、可読性が高く、バグも起きにくくなります。

### 宣言的UIのメリット
- UIの状態が一目でわかる

- DOMの書き換えロジックを自分で書かなくてよい

- 状態が変わればUIが自動で更新される

- 修正・保守がしやすい

こういった理由から、Reactでは宣言的UIがベースになっており、**「状態に合わせて、あるべき画面を宣言するだけ」** という考え方が、多くの開発者に支持されています。

## 仮想DOMでパフォーマンスを向上
Reactでは、仮想DOMという仕組みを採用しています。
まず、DOMとは、ブラウザがHTMLを読み込んで構築する画面の構造のことです。
このDOMを直接操作するのは、見た目を変えるときによく使われる手法ですが、操作のたびにブラウザに命令を出す必要があるため、頻繁に更新が発生するとパフォーマンスが低下してしまいます。

### 仮想DOMとは
仮想DOMとは、ブラウザ上の実際のDOMを直接いじる前に、JavaScriptのメモリ上に仮想的なDOMを作って比較する仕組みのことです。

Reactでは、次のような流れでUIを更新します

1. UIに変更があったとき、Reactは仮想DOMを先に更新します

2. 仮想DOMと、1つ前の状態の仮想DOMを比較します

3. 差分だけを見つけて、実際のDOMに最小限の変更だけを加えるようにします

### その結果どうなるのか
- 無駄なDOMの再描画を避けられる

- 描画コストが減るので、UIがサクサク動く

- 特に複雑な画面や更新が多いアプリで、効果が大きい


仮想DOMは、「毎回ブラウザに命令を出す」のではなく、メモリ上で一度シミュレーションしてから必要な部分だけを変えるという頭の良い方法です。
この仕組みによって、Reactはパフォーマンスが高く、スムーズなUIを実現できるのです。

## 単方向データフローでデータの流れをわかりやすくした
Reactでは、**単方向データフロー** という考え方を採用しています。

従来のフレームワークでは、双方向データバインディングがよく使われていました。
これは、データの変更がUIに反映され、UIの操作もデータに自動で反映されるという仕組みです。

たとえば入力フォームなどで「入力値が自動で状態に反映される」というのは便利でしたが、プロジェクトが大きくなると次のような課題がありました

- データがどこで変更されたのか分かりにくくなる

- UIと状態が密接に結びつくことで、デバッグやテストが難しくなる

### Reactは“データの流れ”をシンプルにした
Reactではこの問題を解決するために、データは基本的に **「親 → 子」へ一方通行で流れるルール** を取り入れています。

> 親コンポーネントが持っているデータを、propsとして子コンポーネントに渡す
子コンポーネントはそのデータを「表示する」だけに集中する

という形です。

### 単方向データフローのメリット
- データの出どころが明確：どこで変更されたかを追いやすい

- 状態管理がシンプル：複雑な連動を減らせる

- バグが起きにくく、保守しやすい：予測しやすいコードになる

例
```
const Parent = () => {
  const [message, setMessage] = useState("こんにちは");

  return <Child text={message} />;
};

const Child = ({ text }) => {
  return <p>{text}</p>;
};

```
→ 子コンポーネント Child は text を受け取って表示するだけ。データの管理は親だけがやるというのが単方向データフローの基本です。

このように、Reactではデータの流れを一方向にすることで、「誰が状態を管理しているか」が明確になり、アプリが大きくなっても迷子になりにくい設計になっています。

以上がReactを使用する主な4つのメリットとなります。参考になれば幸いです。