⚛️

Reactで始めるモダンフロントエンド開発

2025/06/18に公開

はじめに

こんにちは！今回は、Reactを使ったモダンなフロントエンド開発について解説します。

Reactは、Facebookが開発したJavaScriptライブラリで、UIを構築するための強力なツールです。コンポーネントベースのアプローチにより、再利用可能で保守しやすいコードを書くことができます。

なぜReactを選ぶのか？

1. コンポーネントベースの設計

Reactの最大の特徴は、UIを小さなコンポーネントに分割して開発できることです。

function Button({ onClick, children }) {
  return (
    <button onClick={onClick} className="btn">
      {children}
    </button>
  );
}

2. 仮想DOM

Reactは仮想DOMを使用して、効率的なレンダリングを実現します。実際のDOMへの変更を最小限に抑えることで、パフォーマンスを向上させています。

3. 豊富なエコシステム

Next.js: サーバーサイドレンダリング対応のフレームワーク
Redux: 状態管理ライブラリ
React Router: ルーティング管理
Material-UI: UIコンポーネントライブラリ

簡単なサンプルコード

では、実際にReactでカウンターアプリを作ってみましょう。

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div className="counter">
      <h2>カウンター: {count}</h2>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
}

export default Counter;

コードの解説

useState Hook: Reactの状態管理を行うためのHookです
count: 現在のカウンターの値を保持する状態変数
setCount: カウンターの値を更新するための関数
increment/decrement: カウンターを増減させる関数

より実践的な例：TODOリスト

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, {
        id: Date.now(),
        text: inputValue,
        completed: false
      }]);
      setInputValue('');
    }
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div className="todo-list">
      <h2>TODOリスト</h2>
      <div className="input-group">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="新しいタスクを入力"
        />
        <button onClick={addTodo}>追加</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} className={todo.completed ? 'completed' : ''}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            <span>{todo.text}</span>
            <button onClick={() => deleteTodo(todo.id)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

スタイリング

Reactでは様々な方法でスタイリングができます：

1. CSSモジュール

/* TodoList.module.css */
.todoList {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.inputGroup {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.completed {
  text-decoration: line-through;
  opacity: 0.6;
}

2. CSS-in-JS (styled-components)

import styled from 'styled-components';

const Container = styled.div`
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
`;

const Button = styled.button`
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

パフォーマンス最適化

1. React.memo

コンポーネントの不要な再レンダリングを防ぐ：

const ExpensiveComponent = React.memo(({ data }) => {
  // 重い処理
  return <div>{/* レンダリング内容 */}</div>;
});

2. useMemo Hook

計算結果をメモ化する：

const expensiveValue = useMemo(() => {
  return calculateExpensiveValue(data);
}, [data]);

3. useCallback Hook

関数をメモ化する：

const handleClick = useCallback(() => {
  // クリック処理
}, [dependency]);

まとめ

Reactは、モダンなフロントエンド開発において非常に強力なツールです。主な利点は：

📦 コンポーネントベースの設計による再利用性
⚡ 仮想DOMによる高速なレンダリング
🎨 柔軟なスタイリング方法
🔧 豊富なエコシステムとツール
📱 React Nativeによるモバイルアプリ開発への展開

初心者の方も、まずは簡単なコンポーネントから始めて、徐々に複雑なアプリケーションを構築していくことをおすすめします。

参考リンク

Happy Coding! 🚀