92日目：コメントの追加（post)と削除（delete)のroutes作成でバックエンド部分完成

2019年06月15日 2019年06月19日

キョウコ

昨日から引き続き、routesの作成とPostmanでのcollections作成をしました。ユーザーがコメントを追加・削除できる機能を追加するということで、コメント追加・コメント削除のroutesを作成。その後PostmanでGet request、Delete requestでコメント追加と削除ができるようにしました。

本日は、この部分に時間をかける予定はなかったのですが、講座通りにコードを書いていったところPostmanで動かないという自体が発生。後ほどUdemyの講座の「コメント削除」のrouteコードに一部間違いがあったことがわかり、Q&Aコーナーなどを読んでコードを修正しました。

実際にコメント追加と削除ができるかどうかPostmanで確認するのにかなり時間がかかり、この部分のみで予想を大幅に上回る約2時間経過です。

Udemy講師の作ったコメント削除のrouteと間違いがあった理由

Udemy講師のBrad Traversyが元々作成していたコードがこちら（↓）ですが、これでは私のPostmanではコメント削除することができませんでした。理由は、一人のユーザーが複数コメントを残した場合に、削除するようなコードになっていなかったことです。

// @route    DELETE api/posts/comment/:id/:comment_id
// @desc     Delete comment
// @access   Private
router.delete('/comment/:id/:comment_id', auth, async (req, res) => {
  try {
    const post = await Post.findById(req.params.id);

    // Pull out comment
    const comment = post.comments.find(
      comment => comment.id === req.params.comment_id
    );

    // Make sure comment exists
    if (!comment) {
      return res.status(404).json({ msg: 'Comment does not exist' });
    }

    // Check user
    if (comment.user.toString() !== req.user.id) {
      return res.status(401).json({ msg: 'User not authorized' });
    }

    // Get remove index
    const removeIndex = post.comments
      .map(comment => comment.id)
      .indexOf(req.params.comment_id);

    post.comments.splice(removeIndex, 1);

    await post.save();

    res.json(post.comments);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server Error');
  }
});

↑上のコードのGet Remove Indexとコメントアウトしているところから下の4行を使った場合、一人のユーザーが１コメントしている場合は削除できるのですが、複数コメントを残している場合には機能しませんでした。

講座のQ&Aコーナーでcomment.remove(); にした方が、一人のユーザーが複数コメントした時に指定したコメントのみ削除できるという指摘があったので、試してみたところ、１ユーザーが複数コメントを残している場合でも上手く削除することができました。

実際に正しく動いたコメント削除のrouteのコード

実際にPostmanで正しく動いたコードは、Pull out commentのところと、Delete the commentのコード内容が少し違い、

const comment = post.comments.find(
comment => comment.id === req.params.comment_id
);

(上手く動かなかったコード）を、

const comment = post.comments.find(
comment => comment.id.toString() === req.params.comment_id
);

に新しく変更しました。そして、コメント削除は単に

comment.remove();

となっています。

// @route  DELETE api/posts/comment/:id/:commnet_id
// @desc   Delete comment
// @access Private
router.delete("/comment/:id/:comment_id", auth, async (req, res) => {
try {
const post = await Post.findById(req.params.id);

//Pull out comment
const comment = post.comments.find(
comment => comment.id.toString() === req.params.comment_id
);

// Make sure comment exists
if (!comment) {
return res.status(404).json({ msg: "Comment does not exist" });
}

//Check user
if (comment.user.toString() !== req.user.id) {
return res.status(401).json({ msg: "User not authorized" });
}

// Delete the comment
comment.remove();

//Save the post

await post.save();

res.json(post.comments);
} catch (err) {
console.error(err.message);
res.status(500).send("Server error");
}
});

こちらのコードの方がわかりやすく、動作する範囲も広いですし、見た目にもスッキリしています。