React でシンプルな ToDo リストアプリを構築する

あなたのような読者が MUO をサポートします。当社サイトのリンクを使用して商品を購入すると、アフィリエイト手数料が発生する場合があります。続きを読む。

React のような新しいテクノロジーを学ぶには、実際の経験がないと混乱する可能性があります。開発者にとって、現実世界のプロジェクトを構築することは、概念と機能を理解するための最も効果的な方法の 1 つです。

今日のMUOビデオ スクロールしてコンテンツを続けてください

React を使用して簡単な To Do リストを作成するプロセスに従い、React の基礎についての理解を深めます。

To Do リストを作成するための前提条件

このプロジェクトを開始する前に、いくつかの要件があります。 HTML、CSS、JavaScript、 ES6 、および反応します。 Node.js が必要です。 npm、JavaScript パッケージマネージャー。 Visual Studio Code などのコードエディターも必要です。

このプロジェクトで使用する CSS は次のとおりです。

 /* styles.css */ 
.App { 
  font-family: sans-serif; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.Todo { 
  background-color: wheat; 
  text-align: center; 
  width: 50%; 
  padding: 20px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
  margin: auto; 
} 
 
ul { 
  list-style-type: none; 
  padding: 10px; 
  margin: 0; 
} 
 
button { 
  width: 70px; 
  height: 35px; 
  background-color: sandybrown; 
  border: none; 
  font-size: 15px; 
  font-weight: 800; 
  border-radius: 4px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.input { 
  border: none; 
  width: 340px; 
  height: 35px; 
  border-radius: 9px; 
  text-align: center; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.Top { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
} 
 
li { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  padding: 10px; 
} 
 
li:before { 
  content: "*"; 
  margin-right: 5px; 
}

1. プロジェクト環境のセットアップ

この段階には、プロジェクトのセットアップに必要なすべてのコマンドとファイルが含まれます。まず、新しい React プロジェクトを作成します。ターミナルを開いて次のコマンドを実行します。

 npx create-react-app todo-list

必要なすべてのファイルとパッケージをインストールするには数分かかります。 todo-list という名前の新しい React アプリケーションを作成します。このようなものが表示されたら、正しい方向に進んでいることになります。

次のコマンドを使用して、新しく作成したプロジェクトのディレクトリに移動します。

 cd todo-list

次のコマンドを使用してプロジェクトをローカルで実行します。

 npm start

次に、ブラウザーでプロジェクト (http://localhost:3000/) を表示します。

プロジェクトの src フォルダーには、必要のないファイルがいくつかあります。次のファイルを削除します。 アプリCSS 、 App.test.js 、 ロゴ.svg 、 レポートWebVitals.js 、 setupTests.js 。

利用可能なファイル内で import ステートメントを探し、削除されたファイルへの参照をすべて削除してください。

2. TodoList コンポーネントを作成する

これは、ToDo リストに必要なすべてのコードを実装するコンポーネントです。 src フォルダーに「TodoList.js」という名前のファイルを作成します。次に、すべてが正常に動作していることをテストするために、次のコードを追加します。

 import React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;

App.js ファイルを開き、TodoList コンポーネントをインポートし、それを App コンポーネント内でレンダリングします。次のようになります。

Windows10の日付と時刻が間違っています

 import React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

localhost:3000 が実行されているローカルブラウザに移動し、「Hello World」が太字で書かれていることを確認します。大丈夫ですか？次のステップへ。

3. ハンドル入力と入力変更

このステップにより、入力ボックスにタスクを入力したときにイベントをトリガーできるようになります。 React パッケージから useState フックをインポートします。 useState は状態を効率的に管理できる React フックです。

 import React, { useState } from 'react';

useState フックを使用して、空の文字列の初期値を持つ「inputTask」という名前の状態変数を作成します。さらに、ユーザー入力に基づいて「inputTask」の値を更新する「setInputTask」関数を割り当てます。

 const [inputTask, setInputTask] = useState("");

イベントパラメータを受け取る「handleInputChange」という関数を作成します。 setInputTask 関数を使用して inputTask 状態を更新する必要があります。イベントのターゲットの値には、event.target.value でアクセスします。これは、入力フィールドの値が変更されるたびに実行されます。

 const handleInputChange = (event) => { 
    setInputTask(event.target.value); 
};

いくつかの JSX 要素を返します。 1 つ目は「My ToDo リスト」という見出しです。好きな見出しを決定できます。入力要素にいくつかの属性を含めます。 type=”テキスト” : これは入力タイプをテキストとして指定します。 値={入力タスク} : これにより、入力フィールドの値が inputTask 状態変数にバインドされ、現在の値が確実に反映されます。 onChange={handleInputChange} : これは、入力フィールドの値が変更されたときに handleInputChange 関数を呼び出し、inputTask の状態を更新します。

 <div className="Todo"> 
    <h1>My To-Do List</h1> 
    <div className="Top"> 
        <input className="input" type="text" value={inputTask} 
           onChange={handleInputChange} placeholder="Enter a task" />

次に、入力したタスクをリストに追加するボタンを作成します。

         <button className="btn">ADD</button> 
   </div> 
</div>

この段階では、ブラウザの出力は次のようになります。

4.「追加」ボタンに機能を追加

使用 使用状態 フックを使用して、空の配列の初期値を持つ「list」という名前の状態変数を作成します。「setList」変数には、ユーザー入力に基づいてタスクの配列が保存されます。

 const [list, setList] = useState([]);

ユーザーが「追加」ボタンをクリックして新しいタスクを追加したときに実行される関数 handleAddTodo を作成します。ユーザーが入力した新しいタスクを表す todo パラメーターを受け取ります。次に、Math.random() を使用して生成された一意の ID と、入力テキストを保持する todo プロパティを持つオブジェクト newTask を作成します。

次に、スプレッド演算子 […list] を使用してリストの状態を更新し、リスト内の既存のタスクを含む新しい配列を作成します。 newTask を配列の末尾に追加します。これにより、元の状態配列が変更されなくなります。最後に、inputTask 状態を空の文字列にリセットし、ユーザーがボタンをクリックすると入力フィールドをクリアします。

アルミニウムvsステンレススチールアップルウォッチ

 const handleAddTodo = (todo) => { 
    const newTask = { 
        id: Math.random(), 
        todo: todo 
   }; 
 
   setList([...list, newTask]); 
    setInputTask(''); 
};

を含めます onClick 属性をボタン要素に「ADD」というテキストで追加します。クリックすると、handleAddTodo 関数がトリガーされ、新しいタスクがリスト状態に追加されます。

 <button onClick={() => handleAddTodo(inputTask)}>ADD</button>

この段階では、ブラウザの出力は同じように見えますが、タスクを入力した後に「追加」ボタンをクリックすると、入力フィールドは空になります。問題なく動作している場合は、次のステップに進みます。

5. 削除ボタンを追加する

これは、ユーザーが間違いを犯した場合、またはタスクを完了した場合にタスクを削除できるようにする最後のステップです。ユーザーが特定のタスクの「削除」ボタンをクリックしたときにイベントハンドラーとして機能する handleDeleteTodo 関数を作成します。タスクの ID をパラメータとして受け取ります。

関数内で、リスト配列の filter メソッドを使用して、一致する ID を持つタスクを除外する新しい配列 newList を作成します。 filter メソッドは、リスト配列内の各項目を反復処理し、指定された条件を満たす項目のみを含む新しい配列を返します。この場合、各タスクの ID がパラメータとして渡された ID と等しいかどうかを確認します。 setList(newList) を呼び出してリストの状態を更新します。これにより、状態が新しいフィルター処理された配列に設定され、一致する ID を持つタスクがリストから効果的に削除されます。

 const handleDeleteTodo = (id) => { 
    const newList = list.filter((todo) =>  
        todo.id !== id 
   ); 
 
    setList(newList);  
};

map メソッドを使用して、リスト配列内の各項目を反復処理し、新しい配列を返します。次に、リスト配列内の各 todo オブジェクトのタスクを表す

要素を作成します。 React で要素のリストをレンダリングするときは、必ず key 属性を追加してください。これは、React が各リスト項目を一意に識別し、UI が変更されたときに効率的に更新するのに役立ちます。この場合、一意性を確保するために、キーを各 todo オブジェクトの ID に設定します。

各 todo オブジェクトの todo プロパティにアクセスします。最後に、クリックすると、対応するタスクの ID をパラメーターとして使用して handleDeleteTodo 関数をトリガーするボタンを作成します。これにより、リストからタスクを削除できるようになります。

 <ul> 
{ list.map((todo) => ( 
   <li className="task" key={todo.id}> 
        {todo.todo} 
        <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button> 
    </li> 
))} 
</ul>

最終的なコードは次のようになります。

 import React, { useState } from 'react'; 
 
const TodoList = () => { 
    const [inputTask, setInputTask] = useState(''); 
    const [list, setList] = useState([]); 
 
    const handleAddTodo = () => { 
        const newTask = { 
            id: Math.random(), 
            todo: inputTask 
        }; 
 
       setList([...list, newTask]); 
        setInputTask(''); 
    }; 
 
   const handleDeleteTodo = (id) => { 
        const newList = list.filter((todo) => todo.id !== id); 
        setList(newList); 
    }; 
 
   const handleInputChange = (event) => { 
        setInputTask(event.target.value); 
    }; 
 
   return ( 
        <div className="Todo"> 
            <h1>My To-Do List</h1> 
 
            <div className="Top"> 
                <input className="input" type="text" value={inputTask} 
                   onChange={handleInputChange} placeholder="Enter a task" /> 
 
                <button className="btn" onClick={handleAddTodo}>ADD</button> 
            </div> 
 
           <ul> 
                { list.map((todo) => ( 
                    <li className="task" key={todo.id}> 
                        {todo.todo} 
                        <button onClick={() => handleDeleteTodo(todo.id)}> 
                           Delete 
                       </button> 
                    </li> 
                ))} 
            </ul> 
        </div> 
    ); 
}; 
 
export default TodoList;

最終的な出力は次のようになります。追加ボタンと削除ボタンの両方が期待どおりに機能します。

おめでとうございます。タスクを追加および削除する To-Do リストが作成されました。スタイルや機能を追加することで、さらに進化することができます。

現実世界のプロジェクトを使用して React を学ぶ

練習は効果的な学習方法となります。これにより、React の概念とベストプラクティスを実践的に適用できるようになり、フレームワークの理解を強化できます。世の中にはたくさんのプロジェクトがあるので、適切なものを見つける必要があります。