個別に削除するボタンを実装しよう
2019/7/8
山﨑智仁

今日のゴール
今まで作ったフォームは入力するか、全てを消すかしかできませんでした。
今回は、個別にデータを消せるようにしたいと思います。
目標は、一つ一つのレコードをクリックしたら削除するようにします。
クリックすれば
消すことが
できるように︕

今日の内容
データベースを新しくしよう！
Clientで表示させよう！
削除機能をServerにつけよう！
クリックで削除させよう！
初期化して表示させよう！

Step1: データベースを新しくしよう！①
今までのデータベースは左のように、dreamという列しかありませんでした。
しかしこれでは、同じものが二つあるときは、どちらを消したらいいかわかりません。
dream
コーヒーを飲む
テニスをする
お買い物をする
テニスをする
Dreamテーブル

Step1: データベースを新しくしよう！②
あたらしく、idという列を追加します。
自動で入力される機能を使えば、簡単に番号をふることができます！
dream
コーヒーを飲む
テニスをする
お買い物をする
テニスをする
Dreamテーブル
id dream
1 コーヒーを飲む
2 テニスをする
3 お買い物をする
4 テニスをする
新Dreamテーブル

Step1: データベースを新しくしよう！③
新しいカタチにするには上のコードを
”db.serialize”関数の一番上に入れる。
※この下のコードも変えておきましょう！
Dreamsというテーブルを一旦削除
新しく、Dreamsというテーブルを作成。
id dream
1 コーヒーを飲む
2 テニスをする
3 お買い物をする
4 テニスをする

Step2: Clientで表示させよう！
データの形が変わったので、表示方法を変更する必要があります！
dream
コーヒーを飲む
テニスをする
お買い物をする
テニスをする
Dreamテーブル
id dream
1 コーヒーを飲む
2 テニスをする
3 お買い物をする
4 テニスをする
新Dreamテーブル

Step2: Clientで表示させよう！
setAttribute(‘id’, dream.id);
は、その表示した「dream」に名前（id）をつけるためのもの。

削除機能をつけるには？
特定のデータを
ユーザーがクリックしたら
削除するリクエストを送る
特定のデータを
削除するリクエストを
受け取ったらデータベースに
アクセスする。
クエリでデータベースから
特定のデータを消す。

削除機能をつけるには？
特定のデータを
ユーザーがクリックしたら
削除するリクエストを送る
特定のデータを
削除するリクエストを
受け取ったらデータベースに
アクセスする。
クエリでデータベースから
特定のデータを消す。
Step3 Step3Step4

Step3: 削除機能をServerにつけよう！
一件を削除するので、”/deleteOne”でつくる。 “/”をお忘れなく！
Step3

Step4: クリックで削除させよう！
「addEventListener(“click”,function(){ 対応する中身 });」は、
クリックされたイベントに対応するコード
Step4

Step5: 初期化して表示させよう！
dreamList.innerHTML = “” ; は、表示されている中身を空にする。
次のプログラムは、再度画面に表示させる。

詳しくはこちらを参照のこと。
https://github.com/tomohitoy/tcsdb