2021年1月5日
【Node.js+Express】ToDoリストを作る

ToDoリストを作りたいと思います。
ちゃんと作るにはToDoデータベースが必要で、MongoDBがオススメらしいです。
今回はデータベースを使わずにやります。
必要な機能は以下の通りです。
- タスク一覧表示
- タスク追加
- タスク削除
- (余裕があれば)実行済みのチェックマークOR取消線
リストを表示する仕組みを作る
まず、HelloWorldページを複製してリストを表示するページを作ります。
// app.js // TODOリストページを追加します const todoRouter = require('./routes/todo') app.use('/todo', todoRouter);
// todo.html <ul> <% for (var i = 0; i < listItems.length; i++){ %> <li><%= listItems[i] %></li> <% } %> </ul>
// todo.js const items= ["purchase food", "cook food", "eat food "]; let workItems =[]; // define the home page route router.get('/', function (req, res, next) { const data = { title: 'TODOリスト', content: 'TODOを入力してください', listItems: items } res.render('todo', data); })

送信ボタンを押したらTODOリストに追加
続いて、フォームにテキストを入力して「送信」ボタンを押した時にTODOリストに追加されるようにします。
// todo.html <form action="todo" method="post"> <input type="text" name="todo" value=""> <input type="submit" name="送信"> </form>
// todo.js router.post('/', (req, res, next) => { const todo = req.body['todo']; items.push(todo) const data = { title: 'TODOリスト', content: todo + 'を追加しました。', listItems: items } res.render('todo', data); })

フォームにTODOを入力して「送信」ボタンを押すとリストに追加されるようになりました。
get()とpost()を使い分けることがポイントですね。
ちなみに、データベースを使っていないのでサーバを落とすとフォームで追加した分は消えてしまいます。
参考にしたページ

フォローお願いします