初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってみよう〜

Reactとは何か？

• Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリ
• UIパーツ（コンポーネント）を再利用しやすく、仮想DOM（Virtual DOM）という技術で高速に画面更新が可能。
• JSXという独自の記法でHTML風にコードが書けるため、開発者にとって書きやすく理解しやすい。
• 単方向データフローでデータの流れがわかりやすいため、開発の効率化につながります。

---

Reactの開発環境の構築方法

Reactを使うには、Node.jsをインストールし、npmを使ってReactのライブラリをインストールする必要があります。また、BabelやWebpackなどのツールを使って、Reactのコードをブラウザが理解できる形式に変換する必要があります。このような環境構築には、create-react-appというツールを使うことができます。

---

create-react-appを使った構築例

# 事前にNode.jsをインストールする

# create-react-appをインストールする
$ npm install -g create-react-app

# Reactのアプリケーションを作成する
$ create-react-app my-app

# Reactのアプリケーションを起動する
$ cd my-app
$ npm start

ブラウザで http://localhost:3000 にアクセスすることで、Reactのアプリケーションが表示されます。

---

Reactの基本的な構文とコンポーネントの作り方

Reactでは、コンポーネントと呼ばれるUIパーツを作成することができます。コンポーネントは、renderメソッドでUIを定義することができます。また、コンポーネントは親コンポーネントからpropsというデータを受け取ることができ、これを使って動的なUIを作成することができます。さらに、コンポーネントはstateという状態を持つことができ、stateが変更されると再度renderメソッドが呼ばれて画面が更新されます。

---

コンポーネントのコード例

Reactの基本的な構文とコンポーネントの作り方について、実際のコード例を示します。
以下は、HelloWorldという名前のコンポーネントを作成する例です。

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

export default HelloWorld;

---

コンポーネントの使用例

import React from 'react';

class Greeting extends React.Component {
  render() {
    const { name } = this.props;
    return <div>Hello, {name}!</div>;
  }
}

export default Greeting;

---

Reactでイベントハンドリングとステート管理をする方法

Reactでは、onClickやonChangeなどのイベントを扱うことができます。これらのイベントを扱うために、イベントハンドラーを定義する必要があります。また、Reactではstateを使って状態を管理することができます。stateが変更されると再度renderメソッドが呼ばれるため、UIの状態を簡単に更新することができます。

---

イベントハンドリングとステート管理の例

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default Example;

この例では、useStateフックを使用して、カウントの状態を管理しています。ボタンがクリックされるたびに、handleClick関数が呼び出され、現在のカウント値に1を加算して、setCount関数を使用して新しい値を状態に設定します。

button要素には、onClickイベントが設定されており、ボタンがクリックされたときにhandleClick関数が呼び出されます。これにより、イベントハンドリングが実装されます。

---

ReactでTODOリストを表示・追加・削除・完了する機能を実装する

以下は、Reactを使ってTODOリストを表示・追加・削除・完了する機能を実装したコード例です。このコード例は、create-react-appで作成されたReactアプリケーションに、必要なコードを追加したものです。

import React, { useState } from "react";

function App() {
  const [todos, setTodos] = useState([]);

  const [newTodo, setNewTodo] = useState("");

  const handleNewTodoChange = (event) => {
    setNewTodo(event.target.value);
  };

  const handleNewTodoAdd = () => {
    setTodos([...todos, { text: newTodo, completed: false }]);
    setNewTodo("");
  };

  const handleTodoDelete = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  const handleTodoComplete = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = true;
    setTodos(newTodos);
  };

  return (
    <div>
      <h1>TODOリスト</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleTodoComplete(index)}
            />
            <span
              style={{
                textDecoration: todo.completed ? "line-through" : "none",
              }}
            >
              {todo.text}
            </span>
            <button onClick={() => handleTodoDelete(index)}>削除</button>
          </li>
        ))}
      </ul>
      <div>
        <input type="text" value={newTodo} onChange={handleNewTodoChange} />
        <button onClick={handleNewTodoAdd}>追加</button>
      </div>
    </div>
  );
}

export default App;