【プロゲート】Node.js Node.js IIIの学習内容まとめ

Node.js III

1.目標物の確認

メモアプリを完成させよう
・このレッスンでは、買い物メモの削除や更新を学ぶ
・今までのレッスンで学んだことと組み合わせれば、作れるWebアプリの幅がグッと広がる

このレッスンで作るものを確認しよう
・このレッスンでは、買い物メモアプリに削除機能と更新機能を加えていく
・今回のレッスンで買い物メモアプリが完成する

今回作るもの
・このレッスンではデータベースを使って2つの機能を作る

2.削除ボタンの準備

ルーティングを用意しよう
・メモを削除するためのルーティングを用意する
・データベースを変更する処理なのでpostを用いる

削除ボタンを用意しよう
・各メモごとに削除ボタンを作る
・ボタンはフォームで作成する
・ルーティングに合わせてフォームのaction属性とmethod属性を指定する

フォームの使いどころ
・削除ボタンはリンクでなくフォームで作成する
・postでリクエストする時は入力する項目がなくてもフォームを使うと覚えておく

リダイレクトしよう
・フォーム送信後には一覧画面を表示する
・削除機能はデータベースを変更する処理なので、リダイレクトを用いて一覧画面を表示する

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

メモ削除の処理を作ろう
・次はメモ削除の処理を作る

削除するメモのidを指定したい
・削除にはDELETEクエリを使う
・しかし現状では、サーバーはどのメモをWHEREに指定すれば良いか分からず削除できない
・サーバーが削除するメモのidを受け取ることができれば、削除できるようになる

URLで値を渡そう
・メモのidを受け渡すにはURLを利用する
・リクエストするURLは/delete/3のようにidを含めるようにし、ルーティングのURLは/delete/:idのように指定する
・これでURLに含まれたidを取得できるようになる
・/:idの部分をルートパラメータと呼ぶ

ルートパラメータを使おう
・ルートパラメータを使ってみる
・また、ルーティングに合わせてフォームの送信先URLにメモのidを含める

ルートパラメータの値を受け取ろう
・req.params.ルートパラメータ名でルートパラメータの値を受け取ることができる
・console.logで出力して内容を確認してみよう

4.DELETEクエリの実行

受け取ったidをクエリに使おう
・あとは受け取ったidを使ってDELETEクエリを実行するだけ

メモを削除しよう
・ルートパラメータから取得したメモのidを用いてDELETEクエリを実行する

5.メモ更新の準備

編集画面を作ろう
・次はメモを更新するために編集画面を用意していく
・編集画面にはメモの内容を編集するためのフォームを用意する
・フォームには選択されたメモの内容が最初から入力されている状態にする

処理の流れを確認しよう
・まずは①リンクでidを送信と③編集画面表示を作っていく

ルーティングを作成しよう
・一覧画面に編集ボタンを作成し、そのリンクのURLにメモのidを含めるようにする
・ルーティングにはルートパラメータを使用してそのメモのidを受け取れるようにする
・idは選択されたメモ情報を取得するときに使う

編集画面の見た目をつくろう
・編集画面のファイルを作成する

6.選択されたメモの表示

メモの内容を表示する流れを確認しよう
・次は右の図の②取得と、④取得結果表示を作っていく
・これでどのメモを編集しているのかわかる

メモを取得しよう
・受け取ったメモのidを利用して編集するメモを取得する

取得結果をEJSに渡そう
・クエリの取得結果は件数に関わらず配列になる
・配列resultsから1件目の要素を取り出し、edit.ejsにitemプロパティを渡す

フォームに値を表示しよう
・value属性に値を指定すると、フォームに初期値を表示できる
・取得したメモの内容をvalue属性に指定する

7.更新のルーティング

更新処理の流れを確認しよう
・これから更新処理を作っていく
・まずは①フォーム送信と③一覧画面表示を作っていく
・一覧画面の表示ではリダイレクトを使っていく

更新に必要な情報を確認しよう
・更新にはUPDATEクエリを使う
・メモを更新するには、フォームの値とメモのidが必要
・この2点を渡せるようにしていく

ルーティングにルートパラメーターを使おう
・まずはルートパラメータを用いてidを渡す
・更新のルーティングを用意する
・送信先URLには、事前にedit.ejsに渡していたitemのidを含める
・また、フォーム送信後には一覧画面へリダイレクトする

フォームの値を送信しよう
・次にname属性を追加してフォームの値を送信する

8.選択されたメモの更新

選択されたメモを更新しよう
・選択されたメモをフォームの値で更新する

情報の受け渡し方を確認しよう
・ルートパラメータの値はparamsオブジェクトで、フォームの値はbodyオブジェクトで受け取る
・ここでしっかりと復習しておこう

メモを更新しよう
・受け取ったidとフォームの値を用いてメモを更新する
・クエリに複数の値を入れる時は配列の要素を増やす
・配列の要素の順番通りに？に入れることができる