1. 宣言型プログラミングによる直感的な開発#

Reactは、UIを構築するための宣言型プログラミングを採用しており、コードが読みやすく、保守しやすいのが特徴です。従来の命令型プログラミングとは異なり、どのようにUIを表現したいかを記述するだけで、Reactはその状態を自動的に更新してくれます。そのため、複雑なUIであっても、直感的に開発することができます。

宣言型プログラミング#

1
import React, { useState } from 'react';
2

3
const Counter = () => {
4
  const [count, setCount] = useState(0);
5

6
  const increment = () => setCount(count + 1);
7
  const decrement = () => setCount(count - 1);
8

9
  return (
10
    <div>
11
      <h1>Counter: {count}</h1>
12
      <button onClick={increment}>Increment</button>
13
      <button onClick={decrement}>Decrement</button>
14
    </div>
15
  );
16
};
17

18
export default Counter;

命令型プログラミング#

1
<!DOCTYPE html>
2
<html lang="ja">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>カウンターアプリ</title>
6
</head>
7
<body>
8
  <h1>カウンター: <span id="count">0</span></h1>
9
  <button onclick="increment()">増やす</button>
10
  <button onclick="decrement()">減らす</button>
11

12
  <script>
13
    let count = 0;
14

15
    function increment() {
16
      count++;
17
      document.getElementById('count').textContent = count;
18
    }
19

20
    function decrement() {
21
      count--;
22
      document.getElementById('count').textContent = count;
23
    }
24
  </script>
25
</body>
26
</html>

宣言型プログラミングと命令型プログラミングのコード例を比較

項目	宣言型プログラミング	命令型プログラミング
UIの記述	JSXを使ってUIを宣言的に記述	HTMLとJavaScriptを使ってUIを直接記述
状態の管理	`useState` フックを使って状態を管理	変数を使って状態を直接管理
副作用の発生	副作用を最小化できる	DOM操作や変数の直接操作による副作用が発生する
コードの冗長性	コードが簡潔で分かりやすい	DOM操作やイベントハンドラの設定など、コードが冗長になりやすい

2. コンポーネントベースの開発による再利用性#

Reactは、UIを小さな部品である「コンポーネント」に分割して開発するコンポーネントベースのアーキテクチャを採用しています。コンポーネントは再利用可能なので、同じようなUIを何度も記述する必要がなく、コードの冗長性を減らし、開発効率を向上させることができます。また、コンポーネントを組み合わせることで、複雑なUIも簡単に構築することができます。

例#

この例では、Button コンポーネントを作成し、App コンポーネントで複数回使用することで、コードの再利用性を示します。

Button.js#

1
import React from 'react';
2

3
const Button = ({ label, onClick }) => {
4
  return (
5
    <button onClick={onClick}>
6
      {label}
7
    </button>
8
  );
9
};
10

11
export default Button;

App.js#

1
import React from 'react';
2
import Button from './Button';
3

4
const App = () => {
5
  const handleClick = () => {
6
    console.log('ボタンがクリックされました');
7
  };
8

9
  return (
10
    <div>
11
      <Button label="ボタン1" onClick={handleClick} />
12
      <Button label="ボタン2" onClick={handleClick} />
13
    </div>
14
  );
15
};
16

17
export default App;

3. 仮想DOMによる効率的な更新#

Reactは、仮想DOMと呼ばれる技術を採用しており、UIの更新処理を効率化しています。仮想DOMは、実際のDOMとは別にUIの状態を管理するもので、変更があった部分のみを更新することで、パフォーマンスを向上させることができます。これにより、複雑なUIであっても、滑らかな動きを実現することができます。

高速な更新 Reactは、変更検出と呼ばれるアルゴリズムを使用して、変更された部分のみを効率的に更新します。仮想DOM上で変更をシミュレートすることで、実際にDOMを操作する前に影響範囲を特定し、必要な更新のみを実行します。
バッチ更新 Reactは、複数の更新をまとめてバッチ処理することで、パフォーマンスを向上させます。個々の更新を逐次的にDOMに反映するのではなく、一度にまとめて処理することで、ブラウザへのレンダリング要求を削減します。
コンポーネントベースの再レンダリング Reactは、コンポーネントベースの再レンダリング機構を採用しています。変更されたコンポーネントとその子コンポーネントのみを再レンダリングすることで、不要な再レンダリングを抑制し、パフォーマンスを向上させます。