🍣

Reactの特徴とメリット

minagawa

2025/04/25に公開

React

tech

Reactについて

Reactは、Facebook（現Meta）が開発したJavaScriptライブラリで、UI（ユーザーインターフェース）の構築に特化しています。Reactの特長は、そのコンポーネントベースの開発モデルや、仮想DOM、状態管理の仕組みなど、Webアプリケーションの開発における効率化とパフォーマンス向上を実現する強力な機能群にあります。

コンポーネントベースのアーキテクチャ
Reactの最も大きな特徴は、アプリケーションをコンポーネントという小さな部品で構築できる点です。

コンポーネントの概要: コンポーネントは、UIの一部を独立して管理する小さな単位です。これにより、アプリケーションの各部分が再利用可能で、テストやメンテナンスが容易になります。

クラスコンポーネントと関数コンポーネント: 初期のReactでは、コンポーネントはクラスで定義していましたが、最近では関数コンポーネントが主流です。関数コンポーネントは、React Hooksと組み合わせることで、状態管理や副作用の管理が簡単にできます。

// 関数コンポーネントの例
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

仮想DOM（Virtual DOM）による高速なレンダリング
Reactは、仮想DOMという仕組みを使用することで、UIの更新を効率的に行います。

仮想DOMの仕組み: Reactは、実際のDOMに直接変更を加える前に仮想DOM（メモリ上のDOM）に変更を加え、実際のDOMと比較して必要な部分だけを更新します。このプロセスは「差分アルゴリズム（Reconciliation）」と呼ばれ、UIの更新を高速に行うことができます。

パフォーマンス向上: 仮想DOMにより、無駄な再レンダリングを避けることができ、特に大規模なアプリケーションでパフォーマンスの向上が期待できます。

JSX（JavaScript XML）
Reactでは、JSXという独自の拡張構文を使用してUIを記述します。

JSXとは: JSXは、JavaScriptの中にHTMLのような構文を埋め込むことができる拡張構文です。これにより、UIのコードが直感的に書きやすくなり、JavaScriptのロジックとUIの構造を一緒に管理できます。

const element = <h1>Hello, world!</h1>;

JSXの利点: JSXを使うことで、HTMLタグとJavaScriptコードを一緒に扱えるため、Reactのコンポーネントが分かりやすく、保守性も高くなります。

状態管理とuseStateフック
Reactのコンポーネントは、内部で状態（state）を管理することができます。この状態を管理するために、useStateフックを使用します。

useStateの基本的な使い方:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);  // 状態とその更新関数を取得
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

状態管理の重要性: 状態は、ユーザーの入力やアプリケーションの内部データの変化を反映させるために重要です。Reactの状態管理は非常にシンプルであり、複雑なUIの構築でも直感的に扱えます。

React Hooks
React 16.8以降、関数コンポーネントで状態管理や副作用を扱うためのHooksが導入されました。これにより、クラスコンポーネントに依存することなく、より簡潔なコードで機能を実装できます。

useEffectフック: 副作用（データフェッチ、DOM操作、タイマーなど）を関数コンポーネント内で管理できます。

import { useEffect, useState } from 'react';

function FetchData() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);  // 空の依存配列でマウント時に1回だけ実行
  
  if (!data) {
    return <p>Loading...</p>;
  }
  
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

useReducerフック: 複雑な状態の管理を行う際に役立つフックです。Reduxのような状態管理が必要な場合に有効です。

コンテキストAPI
ReactのContext APIは、コンポーネントツリー全体に状態やデータをグローバルに提供するための機能です。

コンテキストの作成と利用: React.createContextを使用してコンテキストを作成し、Providerでそのデータを提供します。ConsumerやuseContextフックを使って、子コンポーネントでそのデータを利用できます。

const ThemeContext = React.createContext('light');  // デフォルト値を設定

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);  // コンテキストの値を取得
  return <p>The theme is {theme}</p>;
}

状態管理の簡略化: 親から子に多くのプロパティを渡す「プロパティドリル」を避け、グローバルにデータを管理できます。

React Routerによるページ遷移
Reactアプリケーションでページ遷移を実現するために、React Routerというライブラリを使用します。これにより、SPA（Single Page Application）としてシームレスなページ遷移を行うことができます。

基本的な使い方:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

URLに基づいたUIの更新: Routeコンポーネントによって、URLが変わるたびに表示するコンポーネントを切り替え、シングルページアプリケーションとして動作します。

まとめ

Reactは、そのコンポーネントベースのアーキテクチャ、仮想DOM、状態管理、React Hooksなど、開発者が効率よくコードを管理できる数々の強力な機能を提供しています。これらの機能を駆使することで、複雑なアプリケーションでも簡潔かつ再利用可能なコードを書くことが可能です。Reactを使いこなすことで、Webアプリケーション開発の生産性を大きく向上させることができます。

91works Tech BlogPublication

91worksのTech Blogです。

Reactについて

まとめ

Discussion