React.js を学び始める際に、最初に取り組むのにちょうど良いプロジェクトとして「TODO リストアプリの作成」があります。このシンプルなアプリは、React.js の基本的な使い方を身につけるために最適です。本記事では、React.js を使った TODO リストアプリの作成手順と、各コードの解説を行います。なお、筆者の環境は macOS です。
プロジェクトの準備
まずは、React.js のプロジェクト環境をローカルにセットアップしましょう。Node.js がインストールされていない場合は、Node.js 公式サイトからダウンロードしてインストールしてください。
Node.js と React.js のインストール確認方法
1. Node.js の確認
ターミナルを開き、以下のコマンドを実行します。
node -vバージョン番号が表示されれば、Node.js がインストールされています。
2. npm（Node Package Manager）の確認
Node.js のインストールにより、npm も一緒にインストールされます。以下のコマンドで確認できます。
npm -v3. npx の確認npx は npm の一部であり、プロジェクト作成時に使います。以下で確認できます。
npx -vNode.js や npm のバージョンが表示されれば準備完了です。エラーが表示される場合は、インストールが必要です。
プロジェクトの作成手順
1. ターミナルで作業したいディレクトリに移動し、以下のコマンドを入力して新規プロジェクトを作成します。
npx create-react-app todo-app2. todo-app ディレクトリに移動して、React アプリを起動します。
cd todo-app
npm startブラウザに自動で http://localhost:3000 が開き、React の初期画面が表示されれば、セットアップ完了です。
TODO リストアプリのコード
次に、アプリケーションのコードを App.js に追加していきます。このコードでは、タスクをリストに追加し、完了や削除の操作ができるシンプルな TODO リストを構築します。
App.js のコード
以下のコードを src/App.js ファイルに貼り付けてください。
import React, { useState } from 'react';
function App() {
const [tasks, setTasks] = useState([]);
const [task, setTask] = useState('');
const addTask = () => {
if (task.trim()) {
setTasks([...tasks, { text: task, completed: false }]);
setTask('');
}
};
const toggleComplete = (index) => {
const newTasks = [...tasks];
newTasks[index].completed = !newTasks[index].completed;
setTasks(newTasks);
};
const deleteTask = (index) => {
setTasks(tasks.filter((_, i) => i !== index));
};
return (
<div style={{ padding: '20px' }}>
<h1>ToDo List</h1>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="New task"
/>
<button onClick={addTask}>Add</button>
<ul>
{tasks.map((task, index) => (
<li key={index} style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
{task.text}
<button onClick={() => toggleComplete(index)}>
{task.completed ? 'Undo' : 'Complete'}
</button>
<button onClick={() => deleteTask(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
}
export default App;コードの詳細解説
a. 状態管理 (useState)
useStateフックを使用してtasks（タスクのリスト）とtask（新しいタスクの入力値）を管理します。tasksは配列で、各タスクはオブジェクト形式で格納され、completedというプロパティを持つことで完了状態を管理します。
b. タスクの追加 (addTask 関数)
addTask関数は、現在のtask状態が空でない場合にのみタスクをtasks配列に追加します。setTask('')によって入力フィールドもリセットされます。
c. タスクの完了状態を切り替える (toggleComplete 関数)
toggleComplete関数は指定したタスクの完了状態を反転させる関数です。completedプロパティをtrueまたはfalseに切り替えることで、タスクの完了状態を管理しています。
d. タスクの削除 (deleteTask 関数)
deleteTask関数はfilterメソッドを使い、指定したインデックスのタスクをtasks配列から削除します。
アプリの実行と確認
コードを保存したら、ターミナルで以下のコマンドを実行し、アプリを起動します。
npm starthttp://localhost:3000 にアクセスし、TODO リストアプリが表示されれば成功です。新しいタスクを追加、完了、削除して、各機能が動作するか確認してみましょう。
まとめ
この TODO リストアプリの作成を通して、React.js の基礎的なコンポーネント構造や状態管理の方法について学びました。React は JavaScript の基本文法を活かしつつ、コンポーネントを組み合わせて機能を拡張できるため、シンプルなアプリから学習を始めると理解が進みやすいです。これを機に、さらに複雑なアプリケーションにも挑戦してみましょう！
コメント