ReactでTodoアプリを作ってみよう

kenpapa

2021年12月13日 19:42

Reactというユーザインターフェース構築のためのJavaScriptライブラリがあります。

非常に人気のあるライブラリなので、興味のある方もいらっしゃると思います。

そこで、本記事ではReactで簡単なTodoアプリを一から作成する手順を紹介しようと思います。

Reactでのアプリ開発がどのようなものかをざっと理解していただければと思います。

今回作成するTodoアプリは下図のような追加と削除ができるだけの簡単なものです。

Reactでアプリ開発を行う上で知っておいていただきたいことは、アプリを小さい部品（コンポーネント）の集合として考えて開発を行うことができるという点です。

今回のTodoアプリは下図のようにApp、TodoForm、TodoListの３つのコンポーネントで構成されています。

実行環境

ReactにはCreate React AppというReactの学習を簡単に始められる便利なツールがりますので、ここでもそのツールを使ってTodoアプリを作ることにします。

参考までにCreate React Appについて説明している箇所の公式ドキュメントのリンクを下記に貼っておきます。

Node.jsがインストールされていれば「npx create-react-app プロジェクト名」をターミナル上で実行することでプロジェクトを作成することができます。

実行手順

大きな流れは次の通りです。

１．プロジェクトの作成
２．Appコンポーネントの作成
３．TodoFormコンポーネントの作成
４．TodoListコンポーネントの作成
５．実行

１．プロジェクトの作成

「npx create-react-app mytodo」を実行します。

mytodoという名前のプロジェクトが自動で作成され、プロジェクトの中には下図のようにフォルダやファイルが存在しています。

Screenshot from 2021-12-10 17-17-30 (コピー)

Create React Appを使ってアプリ開発を行う場合は、プロジェクトの中に存在する自動生成されたファイルを変更したり、新しくフォルダやファイルを作成したりしながら開発を進めることになります。

２．Appコンポーネントの作成

既存のApp.jsを下記のように変更します。

App.js

import { useState } from 'react';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';

let nextId = 0;

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

 const addTodo = newTodo => {
   nextId = nextId + 1;
   setTodos([...todos, { id: nextId, text: newTodo }]);
 }

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

 return (
   <>
     <TodoForm add={addTodo}></TodoForm>
     <TodoList todos={todos} del={deleteTodo}></TodoList>
   </>
 );
}

export default App;

３．TodoFormコンポーネントの作成

TodoForm.jsとTodoList.jsを置くためのcomponentsフォルダを作成します。

Screenshot from 2021-12-10 17-21-19 (コピー)

components配下にTodoForm.jsを作成して下記のコードを入力します。

TodoForm.js

import { useState } from 'react';

const TodoForm = ({add}) => {
 const [ newTodo, setNewTodo ] = useState('');

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

 const addTodo = () => {
   if (newTodo === '') return;
   add(newTodo);
   setNewTodo('');
 }

 return (
   <>
     <h3>My Todo</h3>
     <input value={newTodo} onChange={handleChange} placeholder="Input here..." />
     <button onClick={addTodo}>ADD</button>
   </>
 );
}

export default TodoForm;

４．TodoListコンポーネントの作成

components配下にTodoList.jsを作成して下記のコードを入力します。

TodoList.js

const TodoList = ({todos, del}) => {
 return (
   <>
     <h5>Todo List</h5>
     <ul>
       {
         todos.map(todo => {
           return (
             <li key={todo.id}>
               {todo.text}
               <button onClick={() => del(todo.id)}>DEL</button>
             </li>
           )
         })
       }
     </ul>
   </>
 );
}

export default TodoList;

５．実行

「npm start」を実行します。