チャットアプリについて

トップページ

トークページ

node.jsをインストールする

MacOS

nodebrewを使ってインストールしてください

Windows

公式サイトからインストールしてください

開発環境の構築

Expressのインストール

$ cd Desktop
$ mkdir chat-app
$ cd chat-app
$ npm install -g express-generator
$ express --view=ejs
$ npm install
$ npm start

上記にアクセスした画像のように表示されていればOK

開発効率を上げるモジュールをインストールする

モジュールをインストールするにはまず、webアプリケーションを止める必要があります。
control+Cで止めることができます。

$ npm install -g nodemon
$ nodemon

nodemon は、Node.jsアプリケーションの開発を支援するためのツールの一つです。
通常、Node.jsアプリケーションを開発する際には、ソースコードの変更があるたびに手動でサーバーを再起動する必要がありますが、nodemonはこの作業を自動化してくれます。

npmのコマンドについては以下の記事を参考にしてください。

PostgresSQLのインストール

MacOS

nodebrewを使ってインストールしてください

Windows

公式サイトからインストールしてください

PostgresSQLを起動する

MacOS

$ brew services start postgres
$ psql postgres

Windows

SQL Shell (psql)を起動します
接続時に、パスワード以外、各質問に対して何も入力せずにenterキーを押してください
下記のように表示されればOK

postgres=#

databaseの作成

postgres=# CREATE DATABASE chat_app_db;
postgres=# \c chat_app_db;
chat_app_db=#

tableの作成

CREATE TABLE channel (
  channel_id SERIAL PRIMARY KEY,
  channel_title VARCHAR(255) NOT NULL,
  created_at TIMESTAMP NOT NULL
);

CREATE TABLE messages (
  message_id SERIAL PRIMARY KEY,
  channel_id SERIAL NOT NULL,
  message VARCHAR(255) NOT NULL,
  created_at TIMESTAMP NOT NULL
);

sqlのコマンド一覧とCRUD操作について

Node.jsとdatabaseの接続

入力フォームを作ります

views/index.ejsを変更します

<body>
  <div>
    <form action="/" method="post">
     <input type="text" name="title" placeholder="タイトル" required>
     <button>作成</button>
    </form>
  </div>
</body>

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

routes/index.jsを変更します

const express = require('express');
const router = express.Router();

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

router.post('/', (req, res, next) => {
  const title = req.body.title;
  console.log(title);
});

module.exports = router;

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

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

入力フォームに入れた文字がコンソールに表示されていればOKです。

dayjsを使って日付を取得する

作成ボタンを押したタイミングの日にちと時間を取得したいのですが、課題1でやったように処置を描くのはめんどくさいので、モジュールを使って日にちと時間を取得します。

npm install --save dayjs

routes/index.jsを変更します

const express = require('express');
const router = express.Router();
const dayjs = require('dayjs'); // 追加

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

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

module.exports = router;

フォームに値を入力して、サーバーで入力した値の後ろに日付が表示されていれば完了です

npm installで取得したモジュールはconst dayjs = require('dayjs');で使用できます。

データベースと接続する

Node.jsでデータベースに接続するためにはライブラリが必要です。
今回使うpostgressSQLのライブラリをインストールします。

npm install --save pg pg-pool

chat-app/dbConnection.jsを作成します。

dbConnection.js

const Pool = require('pg-pool');

// 環境変数を使用してセキュアに設定
const dbConfig = {
  database: process.env.DB_NAME || 'chat_app_db',
  user: process.env.DB_USER || '',
  password: process.env.DB_PASSWORD || '',
  host: process.env.DB_HOST || 'localhost',
  port: process.env.DB_PORT || 5432,
};

// コネクションプールの作成
const pool = new Pool(dbConfig);

// コネクションがエラーを発生させた場合のハンドリング
pool.on('error', (err) => {
  console.error('Unexpected error on idle clients', err);
  process.exit(-1); // アプリケーションの異常終了
});

module.exports = pool;

DB_USERとDB_PASSWORDは自分の設定したものを入力してください。

webサイトからデータベースにデータを登録する

routes/index.jsを変更します

const express = require('express');
const router = express.Router();
const dayjs = require('dayjs');
const pool = require('../dbConnection'); // データベース接続用のプールを読み込み

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

// 非同期処理を扱うためにasyncを追加
router.post('/', async (req, res, next) => {
  try {
    const title = req.body.title;
    const createdAt = dayjs().format('YYYY-MM-DD HH:mm');

    // データベースに挿入するためのクエリを定義
    const insertQuery = 'INSERT INTO channel (channel_title, created_at) VALUES ($1, $2)';

    // データベースへの挿入を非同期に実行
    await pool.query(insertQuery, [title, createdAt]);

    // トップページにリダイレクト
    res.redirect('/');
  } catch (error) {
    console.error(error);
    // エラーハンドリング: サーバーエラーが発生した場合は500をクライアントに返す
    res.status(500).send('サーバーエラー');
  }
});

module.exports = router;

フォームに値を入力してデータベースにカラムが追加されていればOKです

select * from channel;