Twitter

Category

もっと見る

Tag

もっと見る

バックエンド開発

【Node.js + PostgreSQL】取得したデータをejsに表示する

【Node.js + PostgreSQL】取得したデータをejsに表示する

目次

  1. データベースの用意
  2. 必要ファイルの用意
  3. PostgreSQLからデータを取得して、ejsに表示させる
  4. まとめ

今回はnode.jsを使って、PostgreSQLに接続し、データベースにあるデータをejsファイル上に表形式で表示するということをやってみたいと思います。

前回までで学んだことを使って、簡易的な名簿アプリのようなものを作ってみます。

nodeでpostgresqlを扱う方法に関しては前回もご紹介しましたので、下記記事も合わせてご参考ください。

【Node.js + PostgreSQL】Node.jsをPostgreSQLに接続して、クエリ操作を実行してみる
https://www.dailyupblog.com/backend_development/962/#chapter-7

それでは早速やってみましょう。

データベースの用意

まず、データベースの準備をします。

今回使うテーブルを作成しましょう。

コマンドライン上で作成していきます。

nodedbというデータベースを作成して、その中にmemberというテーブルを作成しましょう。

postgresqlに接続したら、下記の順番でSQLコマンドを実行しましょう。

create database nodedb; //nodedb作成
¥c nodedb //nodedbに移動
create table member (id integer primary generated always as identity, name varchar(20));

memberテーブルにはidとnameという二つのカラムの内容にします。

idはprimary keyに設定して、さらにgenerated always as identityで連番の数字が設定されるようにします。

データも入れておきましょう。

下記コマンドでデータを入れておきましょう。

insert into member (name) values ('マイケル'),('スティーブ'),('ジェシカ');

これで準備は完了です。

一応、pgadminでデータを確認しておきましょう。

下記のようになっていたらOKです。

データベースの準備は以上です。

必要ファイルの用意

それでは続いてはNode.jsにて、必要なファイルを準備しましょう。

ejsファイルの読み込みに関しては下記記事で詳しく書いているので、ご参考ください。

【Node.js】ejsを使ってページを表示する
https://www.dailyupblog.com/backend_development/954/

「node-psql」というフォルダを作成し、cdコマンドでこのディレクトリに移動しましょう。

下記コマンド順番でnpm installを行い、必要なnode-moduleをインストールします。

npm init
npm install ejs

今回はejsを使うので、ejsをインストールしておきましょう。

そして、「node-psql」直下にapp.jsというjsファイルを作成しましょう。

そして、一旦下記のようにejsファイルを読み込む設定を書いておきましょう。

const http = require("http"),
  fs = require("fs");
ejs = require("ejs");

const server = http.createServer();

const template = fs.readFileSync(`${__dirname}/public/index.ejs`, "utf-8");

server.on("request", function (req, res) {
  const data = ejs.render(template);
  res.writeHead(200, { "Content-Type": "text/html" });
  res.write(data);
  res.end();
});

server.listen(8080, "127.0.0.1");
console.log("server listening...");

そして、app.jsと同階層に「public」フォルダを作成して、その中にindex.ejsファイルを作成しましょう。

index.ejsファイルには一旦下記のように記述しておきます。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>PostgreSQL</title>
</head>

<body>
	<h1>Hello World</h1>
</body>

</html>

そして、一度nodeを起動してみましょう。

下記のように問題なくejsファイルが読み込まれればOKです。

PostgreSQLからデータを取得して、ejsに表示させる

最後に取得したデータをejsファイルに出力してみましょう。

まず、index.ejsファイルには下記のように記述しましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>PostgreSQL</title>
</head>

<body>
	<ul>
		<% for(let i = 0; i < posts.length; i++){ %>
		<li><%= posts[i].name %></li>
		<% } %>
	</ul>
</body>

</html>

nodeから取得したpost配列の中身のデータをfor文で順番にliタグで出力する様に記述しました。

配列の中の「name」だけを一覧で表示させます。

続いて、app.jsには下記の様に記述します。

const http = require("http"),
  fs = require("fs");
ejs = require("ejs");

const { Client } = require("pg");

const server = http.createServer();

const template = fs.readFileSync(`${__dirname}/public/index.ejs`, "utf-8");

const client = new Client({
  user: "ユーザー名",
  host: "127.0.0.1",
  database: "nodedb",
  password: "ユーザーパスワード",
  port: 5432,
});

client.connect();

let posts = [];

client.query("SELECT * FROM member", (err, res) => {
  posts = res.rows;
  client.end();
});

server.on("request", function (req, res) {
  const data = ejs.render(template, {
    posts: posts,
  });
  res.writeHead(200, { "Content-Type": "text/html" });
  res.write(data);
  res.end();
});

server.listen(8080, "127.0.0.1");
console.log("server listening...");

まず、前回もやったようにpostgresqlに接続するための記述を書きます。

const { Client } = require("pg");

const server = http.createServer();

const template = fs.readFileSync(`${__dirname}/public/index.ejs`, "utf-8");

const client = new Client({
  user: "ユーザー名",
  host: "127.0.0.1",
  database: "nodedb",
  password: "ユーザーパスワード",
  port: 5432,
});

client.connect();

そして、今回はSELECTを使って、データベースからデータを取得するので、下記の様にqueryを用意しておきます。

取得したデータを入れ込むposts配列も用意しましょう。

let posts = [];

client.query("SELECT * FROM member", (err, res) => {
  posts = res.rows;
  client.end();
});

最後にサーバー接続後にejsのrenderを実行し、その際に、ejsに渡すデータに先ほどのposts配列を渡してあげれば、OKです。

  const data = ejs.render(template, {
    posts: posts,
  });

これでapp.jsを実行してみてください。

ページにアクセスすると下記の様にデータベースの内容が表示されると思います。

まとめ

今回はnodeを使って、postgresqlのデータベースにアクセスし、取得したデータをejsファイルに出力する方法についてご紹介いたしました。

この様にデータベースにアクセスして、データを取得するような技術を使えば、簡易的にWebアプリケーションなどの開発も可能です。

是非応用してみてください！

それでは今回はここまで！

お疲れ様でした！

関連記事

関連記事