React 入門：現代のWeb開発を支えるUIライブラリ

はじめに

Web開発の現場では、ユーザーインターフェース（UI）の作成が非常に重要です。ここでは、Reactというライブラリに焦点を当て、その役割や目的、使い方を解説します。HTML、CSS、JavaScript の基本は既にご理解いただいている前提で、これらとReactの関係にも触れていきます。React を使うことで、複雑なUIを効率的かつ再利用可能なコンポーネントとして実装できるようになります。

1. Reactとは？

Reactは、Facebook（現 Meta）が開発したオープンソースの JavaScript ライブラリです。主に以下のような特徴があります。

• コンポーネントベースの開発
  アプリケーションを小さな再利用可能な部品（コンポーネント）に分割して作成します。これにより、開発効率が上がり、メンテナンスが容易になります。
• 宣言的なUI記述
  状態に基づいてUIを自動的に再描画する仕組みを提供します。コードが見やすく、予測可能な動作が実現できます。
• 仮想 DOM（Virtual DOM）の利用
  変更があった際、実際のDOMに反映する前に仮想DOM上で効率的に差分計算を行い、パフォーマンスを向上させます。

2. Reactを使う目的

Reactを導入する主な理由は以下の通りです。

複雑なUIの管理

従来の HTML / CSS / JavaScript だけで大規模なUIを管理すると、コードが散らばってしまい、バグが発生しやすくなります。Reactでは、UIをコンポーネント単位で管理するため、変更や再利用が容易です。

保守性の向上

コンポーネントが独立しているため、特定の部分のみを修正・テストすることができます。プロジェクトが大きくなるほど、コードの保守性は非常に重要になります。

開発効率の向上

React には豊富なエコシステム（ライブラリ、ツール、コミュニティ）があり、例えばルーティングや状態管理のためのライブラリを活用することで、開発を効率化できます。

ユーザー体験の向上

仮想DOMによる効率的なレンダリングや、コンポーネントの再利用により、ユーザーに対してスムーズなインタラクションを提供できます。

3. HTML、CSS、JavaScriptとの関係

React はあくまで JavaScript ライブラリであり、以下のように既存のWeb技術と連携して動作します。

HTML

Reactでは、JSXという拡張構文を用いてHTMLに似た記述を行います。JSXはブラウザ上でJavaScriptに変換され、実際のDOM操作を行います。つまり、Reactで書かれたコードは最終的にはHTMLとしてブラウザに描画されます。

CSS

コンポーネントごとにスタイルを管理する方法（CSS Modules、styled-components、Emotionなど）を用いて、CSS の適用範囲を限定し、スタイルの衝突を防ぎます。従来のグローバル CSS と比べ、より管理しやすいスタイル設計が可能です。

JavaScript

React は JavaScript の力を最大限に活用します。イベントハンドリングや非同期通信、ロジックの実装など、全て JavaScript で行われます。

4. Reactの基本概念

コンポーネント

Reactの基本単位はコンポーネントです。コンポーネントは再利用可能なUIの部品であり、以下のような2種類に大別されます。

関数コンポーネント

シンプルな構文で、関数として定義されるコンポーネントです。React Hooks を利用することで状態管理やライフサイクルの処理が可能です。

// 関数コンポーネントの例
import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

クラスコンポーネント

クラス構文を使って定義され、ライフサイクルメソッドを利用できるコンポーネントです。現在は主に関数コンポーネントと Hooks が推奨されています。

JSX

JSXはJavaScript内でHTMLのような構文を記述するための拡張構文です。これにより、UI構造を直感的に記述することができます。

const element = <div className="container">Hello, React!</div>;

JSXはブラウザで動作する前に、Babelなどのトランスパイラを通して通常のJavaScriptに変換されます。

PropsとState

Props（プロパティ）

コンポーネント間で値を渡すための手段です。読み取り専用で、親コンポーネントから子コンポーネントへデータを流す際に使用します。

State

コンポーネント内で変化するデータを管理するための仕組みです。ユーザーの入力や非同期通信などでデータが変化する場合に、stateが更新されるとコンポーネントが再レンダリングされます。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

ライフサイクル

コンポーネントが生成・更新・破棄される一連の過程をライフサイクルと呼びます。関数コンポーネントの場合はHooks（例：useEffect）を使ってライフサイクルのタイミングに合わせた処理を行います。

5. 開発環境の構築

Reactのプロジェクトを始める際、以下のツールがよく利用されます。

Create React App

Facebookが提供する公式のスターターキットです。設定不要でReactアプリケーションをすぐに始めることができます。しかし、2022年4月を最後に更新が止まっています。

npx create-react-app my-app
cd my-app
npm start

Vite　（オススメ）

最近人気が高まっているビルドツールで、超高速な開発サーバーが特徴です。React用のテンプレートも用意されており、シンプルにセットアップできます。

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

6. 実際のコード例： Vite を使った React アプリ

Vite を使って実際に React のToDoアプリを作ってみましょう

Viteプロジェクトの作成手順

ターミナルで以下のコマンドを実行して、Vite の React テンプレートからプロジェクトを作成します。

npm create vite@latest my-vite-app --template react

実行すると以下のような画面が出てくるので、とりあえず react を選びます。

次に以下のような画面が出てくるので、今回は javascript で開発しましょう。

ちなみにSWCとは、Speedy Web Compiler のことで、Rust製の高速な JavaScript / TypeScript コンパイラです。従来、JavaScript や TypeScript のコードを変換（トランスパイル）する際には Babel がよく使われてきましたが、SWC は Babel に比べてビルド速度が非常に速いという特徴があります。
次に以下のコマンドを実行して

cd my-vite-app

以下のコマンドでライブラリをインストールしましょう

npm install

最後に以下のコマンドを実行すれば環境構築が完成です！

npm run dev

以下のような画面が出ると思うのでコマンドボタンを押しながら http の部分をクリックしてアクセスしましょう。

以下のような画面が表示されました

プロジェクト構成

以下に書いてるもの以外にも色々作られてると思いますが、とりあえず src フォルダの中身を以下のようにします。

my-vite-app/
├─ index.html
├─ package.json
├─ vite.config.js
└─ src/
   ├─ main.jsx
   ├─ App.jsx
   └─ components/
       ├─ NewTaskInput.jsx
       ├─ Task.jsx
       └─ TaskList.jsx

各ファイルの内容

1. src/main.jsx

エントリーポイントです。ここでReactアプリをレンダリングします。

main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. src/App.jsx

アプリ全体の状態（Todoリストと新規タスクの入力値）を管理する親コンポーネントです。
ここから子コンポーネントに必要なデータや関数（props）を渡します。

App.jsx

import React, { useState } from 'react';
import NewTaskInput from './components/NewTaskInput.jsx';
import TaskList from './components/TaskList.jsx';

function App() {
  // Todoリストと入力値をstateで管理
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  // 新規タスクを追加する関数
  const addTask = () => {
    if (newTask.trim() !== '') {
      const task = {
        id: Date.now(),
        text: newTask,
        completed: false,
      };
      setTasks([...tasks, task]);
      setNewTask('');
    }
  };

  // タスクの完了状態を切り替える関数
  const toggleTaskCompletion = (id) => {
    const updatedTasks = tasks.map((task) =>
      task.id === id ? { ...task, completed: !task.completed } : task
    );
    setTasks(updatedTasks);
  };

  // タスクを削除する関数
  const deleteTask = (id) => {
    const updatedTasks = tasks.filter((task) => task.id !== id);
    setTasks(updatedTasks);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>Todo List App</h1>
      {/* 新規タスク入力用コンポーネントにstateと関数をpropsで渡す */}
      <NewTaskInput newTask={newTask} setNewTask={setNewTask} addTask={addTask} />
      {/* タスクリスト表示コンポーネントにタスクデータと操作関数をpropsで渡す */}
      <TaskList 
        tasks={tasks} 
        toggleTaskCompletion={toggleTaskCompletion} 
        deleteTask={deleteTask} 
      />
    </div>
  );
}

export default App;

3. src/components/NewTaskInput.jsx

新しいタスクを入力するためのフォームコンポーネントです。
親から渡されたnewTask（入力値）、setNewTask（入力更新関数）、addTask（タスク追加関数）を利用します。

NewTaskInput.jsx

import React from 'react';

function NewTaskInput({ newTask, setNewTask, addTask }) {
  return (
    <div style={{ marginBottom: '20px' }}>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Enter new task..."
        style={{ padding: '8px', fontSize: '16px', marginRight: '8px' }}
      />
      <button onClick={addTask} style={{ padding: '8px 16px', fontSize: '16px' }}>
        Add Task
      </button>
    </div>
  );
}

export default NewTaskInput;

4. src/components/Task.jsx

個々のタスクを表示するコンポーネントです。
タスクオブジェクト（内容と完了状態）と、それに対する操作関数をpropsで受け取り、UI上で完了切替や削除ができるようにします。

Task.jsx

import React from 'react';

function Task({ task, toggleTaskCompletion, deleteTask }) {
  return (
    <li
      style={{
        display: 'flex',
        alignItems: 'center',
        marginBottom: '10px',
        textDecoration: task.completed ? 'line-through' : 'none',
      }}
    >
      <span style={{ flexGrow: 1 }}>{task.text}</span>
      <button
        onClick={() => toggleTaskCompletion(task.id)}
        style={{ marginRight: '8px', padding: '4px 8px' }}
      >
        {task.completed ? 'Undo' : 'Complete'}
      </button>
      <button onClick={() => deleteTask(task.id)} style={{ padding: '4px 8px' }}>
        Delete
      </button>
    </li>
  );
}

export default Task;

5. src/components/TaskList.jsx

Todoリスト全体を表示するコンポーネントです。
各タスクデータと操作関数（完了切替、削除）を子コンポーネントTaskに渡しています。

TaskList.jsx

import React from 'react';
import Task from './Task.jsx';

function TaskList({ tasks, toggleTaskCompletion, deleteTask }) {
  return (
    <ul style={{ listStyleType: 'none', padding: 0 }}>
      {tasks.map((task) => (
        <Task
          key={task.id}
          task={task}
          toggleTaskCompletion={toggleTaskCompletion}
          deleteTask={deleteTask}
        />
      ))}
    </ul>
  );
}

export default TaskList;

これで先ほどのローカルホストを見てみると以下のようになっています。実際に色々todoを作ってみてください。

ここからさらにClassNameを指定して CSS でスタイリングしていくという流れが一般的です。

7. Reactを学ぶ上でのポイント

コンポーネントの再利用と分割

大規模なアプリケーションでは、UIを小さな部品に分け、必要に応じて再利用することが鍵となります。設計段階でコンポーネントの役割を明確にし、単一責任の原則を意識しましょう。

エコシステムの活用

React単体でも強力ですが、状態管理（Redux、Recoil、MobXなど）やルーティング（React Router）など、さまざまなライブラリと組み合わせることで、より高度なアプリケーションを構築できます。

開発ツールとデバッグ

ブラウザのReact Developer Toolsなど、デバッグ支援ツールを活用することで、コンポーネントの状態やツリー構造を視覚的に確認でき、開発効率が向上します。

8. まとめ

Reactは、コンポーネントベースの開発手法と宣言的なUI記述により、複雑なWebアプリケーションの構築と保守を大幅に効率化します。HTML、CSS、JavaScriptの既存の知識を活かしながら、React独自の概念（JSX、Props、State、ライフサイクルなど）を学ぶことで、よりモダンなWeb開発の手法に習熟することができます。これからReactを学ぶ皆さんは、まずはシンプルなコンポーネント作成やイベント処理から始め、徐々に大規模なアプリケーションへとスキルを広げていくと良いでしょう。