shinoblog-manabu

Progate(プロゲート)を使って初歩の初歩からプログラミング勉強をはじめました。無料から有料バージョンへ以降しつつ、自分辞書として活用しています。なるべく私と同じ初心者目線を使い、各プログラミング内容を説明したいです。

3. 削除するidの受け渡し

 

今回覚えること

・/deleteから/delete/:idへ変更する概念を学ぶ

・ルーティング処理/delete/:idを使い、ルートパラメータからの出力(console.log)表示させる

・ルートパラメータを使って'指定されたidプロパティ値を追加'する

 

 

メモ削除の処理を作ろう

目的

:Node.jsを使ってメモ削除の処理を作る

 

 

 

削除するメモのidを指定したい

 

メモ一覧項目をid指定し削除する。

そうすると一つずつ処理が可能になる。

 

point

・DELETEクエリを使う

 

Ex.解決方法

DELETE FROM items WHERE id = 指定する

こうして指定IDのみ削除可能になる。


このように覚える

 

 

URLで値を渡そう

 

削除ボタンを押したときに発信されるコードをurlにて引き渡す。

かつID付きのurlにて送信されるのでそのボタンのみ削除可能となる。

 

  • id付きのurlのことをルートパラメータと呼ぶ

 

このように覚える

 

 

 

ルートパラメータを使おう

 

point

1.<form></form>メソッド内において拡張子.ejsを使ったルートパラメータを使用する

 

Ex.

<form action="/delete/<%= item.id %>" method="post">
<input type="submit" value="削除">
</form>

 

このように書く。(太字で書かれているのがルートパラメータだ

 

 

2.JavaScriptにて、ルーティングurlにルートパラメータを指定する

Ex.
app.post('/delete/:id', (req, res) => { ←ルーティング内にパラメータを指定
console.log(req, paramas, id);
res.redirect('/index');
});

 

 

参考:

EJSの使い方!静的なHTMLサイトで「共通パーツ」と「変数」を使おう – HPcode(えいちぴーこーど)

 

 

 

ルートパラメータの値を受け取ろう

req.params.ルートパラメータ名req.params.ルートパラメータ名req.param

 

ルートパラメータを受け取る方法

console.log(req, paramas, id);

 

このように書く

※(ルーティング内において、パラメータを指定しつつ、ルートパラメータから受け取った値(ID)を出力させる)

 

重要

Ex.
app.post('/delete/:id', (req, res) => {
console.log(req.params.id);←ルートパラメータを受け取る方法
res.redirect('/index');
});

 

 

参考:復習 そもそもconsole.logってなんだっけ?

 

 

paramsってなんだ?>>paramsとはRailsで送られてきた値を受け取るためのメソッド なのだそうだ。

現時点では謎。これ以降学んでいくこととする。

 

 

演習問題

・/deleteから/delete/:idへ変更する概念を学ぶ

→id指定し1つずつ消すことが可能になった

 

・ルーティング処理/delete/:idを使い、ルートパラメータからの出力(console.log)表示させる

→console.logでの表示方法を覚えることができた

 

・ルートパラメータを使って'指定されたidプロパティ値を追加'する

→フォームメソッドおよびスクリプトレット内でのHTML出力方法を理解できた

 

参考:今一度確認してみよう<% %>のこと

www.javadrive.jp

 

今回はここまで。お疲れ様でした。