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

Node.js II

1.目標物の確認

データベースを使ってみよう
・このレッスンでは、データベースを使って買い物メモを追加できるようにする
・データベースを用いたWebアプリの開発を学んでいく

このレッスンで作るものを確認しよう
・データベースを使うとどんなことができるようになるか？
・メモを作成したり、メモ一覧を表示したりできるようになる

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

2.データベースの導入

データベースを準備しよう
・まずは、データベースを使う準備から

MySQLとは
・データベースを管理するツールはいくつかある
・今回は、その中のMySQLを使う
・本来は別途MySQLをインストールする必要がありますが、今回はProgateが用意している

MySQLを操作するには
・Node.jsからMySQLを操作するにはNode.jsからMySQLに接続する必要がある

mysqlパッケージをインストールする
・Node.jsをMySQLに接続するには、mysqlパッケージを利用する必要がある
・パッケージのインストールは学習ⅠでExpressを準備した時と同様

MySQLに接続しよう
・mysqlパッケージを読み込み、createConnectionメソッドを用いる
・データベースに接続するための情報を定数connectionに代入する
・これでMySQLへの接続が完了
・書き方を細かく覚える必要はない

3.データベースの利用

データベースを使ってみよう
・今回はデータベースを使ってメモを表示してみる

一覧画面を表示するまでの流れ
・まずは①クエリの実行までをやってみる

クエリを実行するには
・connection.query('クエリ', クエリ実行後の処理)と書くことで、Node.jsからデータベースに対してクエリを実行することができる

クエリ実行後の処理
・クエリ実行後の処理は2つの引数を取ることができる
・第1引数のerrorにはクエリが失敗したときのエラー情報が、第2引数のresultsにはクエリの実行結果（ここでは取得したメモ情報）が入る

4.取得した値の表示

取得した値の表示
・次は②取得結果を表示をやっていく
・データベースから取得したメモをindex.ejsに渡して一覧画面に表示する

EJSに値を渡す
・EJSはrenderメソッドから値を受け取ることができる
・renderメソッドの第2引数に{プロパティ : 値}と書くことで、EJS側に値を渡すことができる
・今回はデータベースから取得した値を使う

5.作成画面の作成

作成機能を作ろう
・ここからはフォームからメモを作成できるようにする
・まずは、作成画面から作る

作成画面を表示しよう
・まずはトップ画面や一覧画面のときと同じように作成画面を表示できるようにする
・作成画面は/newでアクセスできるようにする

作成画面へのリンク
・作成した作成画面へのリンクを一覧画面に用意する

6.フォームを使ったリクエスト

作成機能の処理の流れを確認しよう
・次は作成機能を作っていく
・まずは①フォームの送信について学んでいく
・フォーム送信後には③一覧画面を表示する

メモ作成のルーティングを用意しよう
・メモ作成用のルーティングを作る
・今まではapp.getを使っていたが、今回はapp.postを使う
・このgetやpostはメソッドと呼ばれるもので、リクエストの種類を表す

getとpostとは
・Webでは、サーバーへリクエストするときに、どんな処理をしたいかをメソッドで伝えるようにルールで決まっている
・getメソッドやpostメソッドは、それぞれ処理をしたい時に使う

フォームを用意しよう
・フォームを作るときはHTMLの<form>タグを用いる
・action属性には送信先のURL、method属性には「post」か「get」をルーティングに合わせて指定する

一覧画面を表示しよう
・一覧画面を表示する処理を書いていく
・/indexと同じ処理を利用して、一覧画面を表示させる

7.フォームの値の受け取り

フォームに入力した値を受け取ろう
・ここからは②メモ追加をやっていく
・データベースに追加する値をフォームから受け取れるようにしていく

フォームの値を受け取る準備をしよう（1）
・input要素にname属性を指定すると、右の図のようなオブジェクトの形で情報がサーバーに送信される
・よってサーバー側ではreq.body.name属性の値でフォームの値を取得できる

フォームの値を受け取る準備をしよう（2）
・フォームの値を受け取るにはapp.jsでソースコードを追加する必要がある

8.データベースへの追加

データベースに追加しよう
・いよいよ作成機能も大詰め
・SQL学習Ⅳで学んだINSERTを利用して、追加できるようにする

データを追加する
・SELECTの時と同様にqueryメソッドを使うことで　INSERTを実行することができる
・itemsテーブルのidにはAUTO INCREMENTを設定しているので、idの値を指定する必要はない

メモ内容を追加しよう
・フォームからの値をクエリに使うときは、VALUESに「?」を含める
・次に「connection.query()」の第2引数に渡したい配列を指定する
・この配列の要素が「?」の部分に入り、実行される

9.リダイレクトの活用

現状の問題点を確認しよう
・実は、今の状態だとメモ作成後にブラウザをリロードするとメモが増えてしまう

問題が起こる原因を確認しよう
・リロードは直前のリクエストを実行する機能
・そのため、一覧表示と一緒に追加処理も実行されてしまう
・この問題を解決するために、リダイレクトという新しい知識を学ぶ

リダイレクトとは
・サーバーは「次はこのURLにリクエストしてね」というレスポンスを返すことができる
・このレスポンスを受け取ったブラウザは指定されたURLに自動的にリクエストする
・このような別のURLに再度リクエストさせる仕組みをリダイレクトと言う

リダイレクト後のリロード
・リダイレクトを用いると、追加処理後に/indexにリクエストして一覧画面を表示することができる
・これによりメモ作成後にリロードしても、追加処理が実行されないのでメモが増えない

リダイレクトの使い方
・メモ追加後に一覧画面（/index）にリダイレクトするようにする
・リダイレクトするにはres.redirectメソッドを用い、引数にURLを指定する

リダイレクトの使いどころ
・リダイレクトを使う場面はいくつかあるが、よくあるのは今回のようにpostメソッドでリクエストした時
・こういう時はres.renderではなくres.redirectを使って、getのルーティングにリダイレクトする