質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

846閲覧

knexでdeleteができない

watasida

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2023/01/23 11:47

前提

以下のサイトを見ながらTodoアプリを作っています。
Webアプリを作るのは初めてで、コードの内容が正確に理解できているかは微妙なところですが、とりあえず最後まで完成し、機能を追加してみようと思っています。
https://zenn.dev/wkb/books/node-tutorial

実現したいこと

作成したtodoを削除する機能をつけたいです。
以下のようにindex.ejsの各todoに削除ボタンをつけて、クリックして消せるようにしようと考えています。

index.ejs

1... 2... 3<div class="container"> 4 <div class="row"> 5 <form action="/" method="post"> 6 <label>タスクの追加</label> 7 <input required type="text" name="add" placeholder="何をする?"/> 8 <input type="submit" value="追加"/> 9 </form> 10 <ul> 11 <% for(let todo of todos){ %> 12 <li><span><%= todo.content %></span></li> 13 <form method="post" action="/delete"> 14 <input type="hidden" name="delete_id" value="<%= todo.id %>"> 15 <input type="submit" value="DELETE" class="btn btn-primary"> 16 </form> 17 <% } %> 18 </ul> 19 </div> 20</div> 21... 22...

postで削除するリクエストを送信し、以下のようにdelete.jsで受け取って処理しています。

delete.js

1const express = require('express'); 2const router = express.Router(); 3const knex = require('../db/knex'); 4 5router.post('/', function (req, res, next) { 6 const id = req.body.delete_id; 7 console.log(id); 8 knex('tasks') 9 .where({id: id}) 10 .del(); 11 res.redirect('/'); 12}); 13 14module.exports = router;

発生している問題・エラーメッセージ

コンソールに削除対象のtodoのidは表示されているので、postリクエストは設計した通りに処理されていると思うのですが、データベースからデータが消えません。

試したこと

knexのGithubを見るとdeleteに関しては以下のような記載があり、使い方は合っていると思うのですが、、、
イメージ説明

補足情報(FW/ツールのバージョンなど)

一応、index.js, app.js, index.ejsの全体を載せておきます。
delete以外の機能に関しては問題なく動いています。

index.js

1const express = require('express'); 2const router = express.Router(); 3const knex = require('../db/knex'); 4 5router.get('/', function (req, res, next) { 6 const isAuth = req.isAuthenticated(); 7 if(isAuth) { 8 const userId = req.user.id; 9 knex("tasks") 10 .select("*") 11 .where({user_id:userId}) 12 .then(function (results) { 13 res.render('index', { 14 title: 'ToDo App', 15 todos: results, 16 isAuth: isAuth, 17 }); 18 }) 19 .catch(function (err) { 20 console.error(err); 21 res.render('index', { 22 title: 'ToDo App', 23 isAuth: isAuth, 24 }); 25 }); 26 }else { 27 res.render('index', { 28 title: 'ToDo App', 29 isAuth: isAuth, 30 }); 31 } 32}); 33 34router.post('/', function (req, res, next) { 35 const isAuth = req.isAuthenticated(); 36 const todo = req.body.add; 37 const userId = req.user.id; 38 knex("tasks") 39 .insert({user_id: userId, content: todo}) 40 .then(function () { 41 res.redirect('/') 42 }) 43 .catch(function (err) { 44 console.error(err); 45 res.render('index', { 46 title: 'ToDo App', 47 isAuth: isAuth, 48 }); 49 }); 50}); 51 52router.use('/signup', require('./signup')); 53router.use('/signin', require('./signin')); 54router.use('/logout', require('./logout')); 55router.use('/delete', require('./delete')); 56 57module.exports = router;

app.js

1const createError = require('http-errors'); 2const express = require('express'); 3const path = require('path'); 4const cookieParser = require('cookie-parser'); 5const logger = require('morgan'); 6const flash = require('connect-flash'); 7 8const app = express(); 9 10app.use(flash()); 11 12// view engine setup 13app.set('views', path.join(__dirname, 'views')); 14app.set('view engine', 'ejs'); 15 16app.use(logger('dev')); 17app.use(express.json()); 18app.use(express.urlencoded({ extended: false })); 19app.use(cookieParser()); 20app.use(express.static(path.join(__dirname, 'public'))); 21 22// authorization 23require("./config/passport")(app); 24 25// router 26app.use('/', require('./routes')); 27 28// catch 404 and forward to error handler 29app.use(function(req, res, next) { 30 next(createError(404)); 31}); 32 33// error handler 34app.use(function(err, req, res, next) { 35 // set locals, only providing error in development 36 res.locals.message = err.message; 37 res.locals.error = req.app.get('env') === 'development' ? err : {}; 38 39 // render the error page 40 res.status(err.status || 500); 41 res.render('error'); 42}); 43 44module.exports = app;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

delete.jsを以下のように修正することで解決しました。
.del()に続けて.then()の中でリダイレクトする必要があったようです。
selectではそのようにしていたので、そりゃそうかという感じのお粗末なミスでした。

delete.js

1router.post('/', function (req, res, next) { 2 const id = req.body.delete_id; 3 console.log(id); 4 knex('tasks') 5 .where({id: id}) 6 .del() 7 .then(function() { 8 res.redirect('/'); 9 }) 10 .catch(function (err) { 11 console.error(err); 12 res.redirect('/'); 13 }); 14 15});

投稿2023/01/25 08:01

watasida

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問