Zenn
🟨

なぜ React を使うのか？

2024/05/03に公開
JavaScript
React
tech

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

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

宣言型プログラミング

import React, { useState } from 'react';

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

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

命令型プログラミング

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

  <script>
    let count = 0;

    function increment() {
      count++;
      document.getElementById('count').textContent = count;
    }

    function decrement() {
      count--;
      document.getElementById('count').textContent = count;
    }
  </script>
</body>
</html>

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

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

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

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

例

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

Button.js

import React from 'react';

const Button = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

App.js

import React from 'react';
import Button from './Button';

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

  return (
    <div>
      <Button label="ボタン1" onClick={handleClick} />
      <Button label="ボタン2" onClick={handleClick} />
    </div>
  );
};

export default App;

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

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

  1. 高速な更新
    Reactは、変更検出と呼ばれるアルゴリズムを使用して、変更された部分のみを効率的に更新します。仮想DOM上で変更をシミュレートすることで、実際にDOMを操作する前に影響範囲を特定し、必要な更新のみを実行します。

  2. バッチ更新
    Reactは、複数の更新をまとめてバッチ処理することで、パフォーマンスを向上させます。個々の更新を逐次的にDOMに反映するのではなく、一度にまとめて処理することで、ブラウザへのレンダリング要求を削減します。

  3. コンポーネントベースの再レンダリング
    Reactは、コンポーネントベースの再レンダリング機構を採用しています。変更されたコンポーネントとその子コンポーネントのみを再レンダリングすることで、不要な再レンダリングを抑制し、パフォーマンスを向上させます。

4. 豊富なライブラリとツール

Reactには、UI開発を支援する豊富なライブラリとツールが用意されています。これらを利用することで、開発効率をさらに向上させることができます。例えば、状態管理ライブラリであるReduxや、ルーティングライブラリであるReact Routerなどがあります。

5. 活発なコミュニティ

Reactは、世界中に多くのユーザーを持つ活発なコミュニティがあります。そのため、問題が発生したときに解決策を見つけやすいというメリットがあります。また、コミュニティでは、Reactに関する最新情報やノウハウを共有することができます。

Discussion