Node.js(Express)とPostgreSQLを使ってChatアプリを作る。第２回（全４回）

18727 ワード
PostgreSQL Express Node.js Node.js テキストリンク

はじめに

・Node.jsとExpressのインストール編
・PostgreSQLインストール＆Node.jsとdatabase接続編
・詳細ページの作成と非同期処理について
・ユーザー登録の機能

コピペ禁止です。
コマンド、コードはコピぺしないで作成してください。
気になった用語があれば各自で調べてください。

PostgreSQLをインストール

PostgreSQLのインストール
PostgreSQL（ポストグレスキューエル）はオープンソースのリレーショナルデータベース管理システム（RDBMS）です。
簡単に言えばDBを管理するシステムです。
詳しくはWikipediaを参照してください。
https://ja.wikipedia.org/wiki/PostgreSQL

PostgreSQL

PostgreSQLを起動します。(Mac)

$ brew services start postgres
$ psql postgres

PostgreSQLを起動します。(Windows)

SQL Shell (psql)を起動します。
接続時に、パスワード以外、各質問に対して何も入力せずにenterキーを押してください。
postgres=#が表示されたら、コマンドを入力することができます。

データベースを作成します。
CREATE DATABASE chat_db;

データベースに接続します。
\c chat_db;

テーブルを作成します。

テーブル名：channel

カラム 型　 NOT NULL PRIMARY KEY
channel_id SERIAL ○ ○
title VARCHAR(255) ○
created_at TIMESTAMP ○

テーブル名：message

カラム 型　 NOT NULL PRIMARY KEY
messages_id SERIAL ○ ○
channel_id INTEGER ○
message TEXT ○
created_at TIMESTAMP ○

Node.jsとデータベースを接続

HTML側でフォームを作る
まず、views/index.ejsを変更します。

index.ejs
<!-- 中略 -->
<body>
<div class="wrapper">
  <form action="/" method="post" class="board-form">
    <input type="text" name="title" class="input" placeholder="タイトル" required>
    <button type="submit" class="submit">作成</button>
  </form>
</div>
</body>
<!-- 中略 -->

formのactionというのはリクエストを送るURL、今回だと/
formのmethodというのはリクエストを送るときの形式、今回はpost

フォームからリクエストを受け取とる
routes/index.jsを以下のように書き換えます。

index.js
// 中略
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
  var title = req.body.title;
  console.log(title);
});
// 中略

フォームから送られたリクエストをreq.body.[name属性]この形で取得することができます。
今回だとindex.ejsに記述したinputダグのname属性はtitleなのでreq.body.titleで取得できます。
そのパラメータをconsole.logでターミナルに出力といった流れの処理を書いています。

フォームに値を入力して作成のボタンを押した後にサーバーで値が取得されているか見てみてください。


確認できましたね。

day.jsを使って日付を取得します。

テーブルに日付を入れる場所を作成し、型にDATETIME型を選択したので、
DATETIME型になるようにフォーマットをしてきますが課題１でやった感じのを作るのナンセンスなので日付用のライブラリday.jsを使います。

$ npm i -S dayjs

だいぶ省略して書いていますが、やっていることはnpm install --save momentと同じです。
routes/index.js

index.js
var express = require('express');
var router = express.Router();
var dayjs = require('dayjs'); // 追加

/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/', function (req, res, next) {
  var title = req.body.title;
  var createdAt = dayjs().format('YYYY-MM-DD HH:mm:ss'); // 追加
  console.log(title);
  console.log(createdAt); // 追加
});

module.exports = router;

npm i -S dayjsでインストールしたライブラリはvar dayjs = require('dayjs')で使用することができます。

そしてvar createAt = dayjs().fromat('YYYY-MM-DD HH:mm:ss');で
DATETIME型の現在時刻が取得できます。
ターミナルに2020-12-24 22:22:22感じ時刻が取得できればOKです。

データベースと接続しよう

Node.jsでデータベースに接続するためにはライブラリが必要です。今回使うのはPostgreSQLなのでPostgreSQLのライブラリを入れます。

$ npm i -S pg

これでPostgreSQLライブラリを使う準備はできましたが、接続するための関数はさまざまな箇所で使いたいので
汎用的な関数にしないといけないのでdbConnection.jsを作ってそれをroutes/index.jsでrequireできるように実装しましょう。

汎用的なデータベース接続モジュールを作成

dbConnection.jsを作成。

dbConnection.js
var pg = require('pg');

var dbConfig = new pg.Pool({
    database: 'chat_db',
    user: 'Postgre', // 変更してたらここ変えないとエラーでる
    password: '', // 設定していたら記述する
    host: 'localhost',
    port: 5432,
});

module.exports = dbConfig;

momentでも記述したようにvar pg = require('pg');をします。
new pg.Pool(）でデータベースの情報をオブジェクトにして引数に渡しmodule.expressで外部から
require('../dbConnection')で呼び出せるようにしています。

データベースにデータを入れてみよう

routes/index.jsを書き換える。

index.js
// 中略
var dayjs = require('dayjs');
var pool = require('../dbConnection'); // 追加

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
  var title = req.body.title;
  var createdAt = dayjs().format('YYYY-MM-DD HH:mm:ss');
  var query = "INSERT INTO channel (title, created_at) VALUES ('" + title + "', " + "'" + createdAt + "')"; //追加
  pool.connect(function (err, client) {
    client.query(query, function (err) {
      res.redirect('/');
    });
  });
});

module.exports = router;

var pool = require('../dbConnection');このようにするとrequireで呼び出すことができます。

client.query();について説明します。clientのqueryメソッドは第一引数にPostgreSQLのquery、第二引数にcallback関数をとります。
この第一引数のクqueryを実行することによって、データがデータベースに蓄積されます。
そしてcallback関数が実行されます。

callback関数内ではres.redirect('/');をしています。res.redirect()は第一引数にURLをとります。そしてこのURLに移動するだけです。今回だと/なのでlocalhost:3000/に移動するだけです。

フォームに値を入力してDBに入力した値が入っていればOKです。

今回は以上です、次はデータの取得をしていきます。