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()を使い分けることがポイントですね。
ちなみに、データベースを使っていないのでサーバを落とすとフォームで追加した分は消えてしまいます。
参考にしたページ

フォローお願いします