RESTfulなルーティング4
今回はコメントの更新のルーティングについて見ていきます。
更新のルーティングで必要なHTTPリクエストメソッドは
「PUT」と「PATCH」です。
PUT・・・対象リソースの現在の表現全体を、リクエストのペイロードで置き換える
PATCH・・・リソースを部分的に変更するために使用する
現状ではコメントの更新（編集）という部分的なものになるので、「PATCH」を使用します。
早速記述していきます。
index.js
const express = require('express');
const app = express();
const path = require('path');
const { v4: uuid } = require('uuid');
app.use(express.urlencoded({ extended: true }));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
let comments = [
{
id: uuid(),
username: 'sasaki',
comment: 'おもしろいーー！'
},
{
id: uuid(),
username: 'arita',
comment: '野球が好きです'
},
{
id: uuid(),
username: 'suzuki',
comment: '趣味は貯金'
},
{
id: uuid(),
username: 'tanaka',
comment: 'ジャンガジャンガ〜'
}
];
// その他のルーティングは省略
//コメントの更新 patchメソッド・・・リソースを更新するときに使う
app.patch('/comments/:id', (req, res) => {
const { id } = req.params;
//リクエストされたコメントを新しい変数に代入
const newCommentText = req.body.comment;
//更新したいコメントを見つけ新しい変数に代入
const foundComment = comments.find(c => c.id === id);
foundComment.comment = newCommentText;
//リダイレクト・・・コメント一覧に戻る
res.redirect('/comments');
})
app.listen(3000, () => {
console.log('ポート3000で待ち');
});
ここからコメントを編集するためのフォームを作成していきますが、ここで一つ問題があります。
HTMLのフォームは「GET」か「POST」でしかリクエストを送ることができません。
※put/patch/deleteなどは使えない
まずはフォーム作成のルーティングから記述します。
index.jsに追加
//コメント編集フォーム作成
app.get('/comments/:id/edit', (req, res) => {
const { id } = req.params;
const comment = comments.find(c => c.id === id);
//元々あるコメント取得、ないと編集が面倒
res.render('comments/edit', { comment });
})
フォームは「GET」か「POST」でしかリクエストを送ることができないため、
edit.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>コメント編集</title>
</head>
<body>
<h1>コメント編集</h1>
<form method="POST" action="/comments/<%= comment.id %>?_method=PATCH">
<textarea name="comment" id="" cols="30" rows="10"><%= comment.comment %></textarea>
<button>保存</button>
</form>
</body>
</html>
また、index.jsに下記を追加します。これで準備OKです。
//method-overrideの宣言
const methodOverride = require('method-override');
//method-overrideを呼び出す
app.use(methodOverride('_method'));
編集フォームから変更し、
無事コメントが更新されています。
