初心者向けReact入門：ToDoアプリで学ぶSPA開発

Posted at 2025-09-29

Reactの概要

Reactは、Facebookが開発したJavaScriptのライブラリで、 ユーザーインターフェース（UI） を構築するために使われます。特に、コンポーネント指向のアプローチが特徴で、UIを再利用可能な独立したパーツ（コンポーネント）に分割して開発を進めます。これにより、大規模なアプリケーションでも管理しやすく、効率的に開発できます。

Reactの特徴

Reactの主な特徴は以下の通りです。

コンポーネント指向: UIを独立した再利用可能なパーツ（コンポーネント）に分割する開発手法です。これにより、コードの再利用性が高まり、大規模なアプリケーションでも管理しやすくなります。
仮想DOM（Virtual DOM）: Reactは実際のDOM（Document Object Model）とは別に、軽量な仮想DOMをメモリ上に持ちます。UIに変更があった際、Reactはまず仮想DOM上で差分を計算し、必要な部分だけを効率的に実際のDOMに反映させます。これにより、パフォーマンスが大幅に向上します。
宣言的UI: 状態が変更されたときにUIがどうあるべきかを宣言的に記述するだけでよいため、コードがシンプルで読みやすくなります。開発者はUIの変更を一つずつ命令的に記述する必要がありません。
JSX: JavaScriptの構文を拡張したもので、HTMLのような記述をJavaScriptコード内に直接書くことができます。これにより、UIの構造とロジックを一つのファイルで管理でき、開発効率が向上します。
豊富なエコシステム: Reactは非常に人気が高いため、関連ライブラリ、ツール、そして活発なコミュニティが豊富に存在します。これにより、様々な要件に対応した開発が可能です。

Reactを使ったSPAの簡単な演習：ToDoアプリの作成

SPA（Single Page Application） は、単一のHTMLページで動作し、動的にコンテンツを書き換えるWebアプリケーションです。今回はReactを使って簡単なToDoアプリを作成する演習を行います。

演習の準備

まず、プロジェクトの作成に必要なツールをインストールします。

Node.js: Node.jsがまだインストールされていない場合は、公式ウェブサイトからダウンロードしてインストールしてください。
Vite: 新しいReactプロジェクトを始めるには、Viteというビルドツールを使うのが一般的です。以下のコマンドでプロジェクトを作成します。
```
npm create vite@latest my-todo-app -- --template react
cd my-todo-app
npm install
```
開発サーバーの起動: プロジェクトディレクトリに移動したら、以下のコマンドで開発サーバーを起動します。
```
npm run dev
```
これでブラウザで http://localhost:5173 にアクセスすると、初期のReactアプリが表示されます。

ToDoアプリの作成

src/App.jsx ファイルを編集して、ToDoアプリを作成していきます。既存のコードをすべて削除し、以下のコードを記述します。

import { useState } from 'react';
import './App.css';

function App() {
  // ToDoリストの状態を管理
  const [todos, setTodos] = useState([]);
  // 入力フォームの状態を管理
  const [inputValue, setInputValue] = useState('');

  // ToDoを追加する関数
  const handleAddTodo = () => {
    if (inputValue.trim() !== '') {
      // 新しいToDoオブジェクトを作成
      const newTodo = { id: Date.now(), text: inputValue };
      // todos配列の末尾に追加
      setTodos([...todos, newTodo]);
      // 入力フォームをクリア
      setInputValue('');
    }
  };

  // ToDoを削除する関数
  const handleDeleteTodo = (id) => {
    // 削除したいToDoを除外した新しい配列を作成
    const newTodos = todos.filter(todo => todo.id !== id);
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <h1>Simple ToDo App</h1>
      <div>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="新しいToDoを入力"
        />
        <button onClick={handleAddTodo}>追加</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => handleDeleteTodo(todo.id)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

コードの解説

useState: ReactのHooksの一つで、コンポーネントに状態（state）を持たせるために使います。
- const [todos, setTodos] = useState([]); は、todos という状態変数と、それを更新するための関数 setTodos を作成しています。初期値は空の配列 [] です。
- const [inputValue, setInputValue] = useState(''); も同様に、入力フォームの値を管理しています。
handleAddTodo 関数:
- 入力値が空でないことを確認します。
- 新しいToDoオブジェクトを作成し、現在の todos 配列の末尾に追加しています。...todos はスプレッド構文で、既存の配列要素を展開しています。
- setInputValue('') で、ToDoを追加した後にフォームを空にしています。
handleDeleteTodo 関数:
- filter メソッドを使って、引数で受け取ったidと一致しない要素のみを含む新しい配列を作成し、setTodosで状態を更新しています。
return文内のJSX:
- <ul> タグ内で todos.map() を使って、todos配列の各要素をリストアイテム <li> に変換しています。
- key プロパティ: Reactがリスト内のアイテムを識別するために必要な一意な値です。ここではtodo.idを使います。
- onClick イベント: ボタンがクリックされたときに、対応する関数が実行されるように設定しています。

このシンプルな演習を通して、Reactの基本的な考え方であるコンポーネントの状態管理やJSXの記述方法を学ぶことができます。ぜひ、スタイルを追加したり、機能を拡張したりして、自分だけのアプリを作ってみてください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up