WebアプリにてJavascriptオンリーで、データベースへの接続が手できれば便利だなと思い、試してみました。手軽さを求め、WebサーバーはNode.js+Expressで、データベースはSQLite3を利用しています。
node.jsとsqlite3がインストールされている前提とします。
Expressの使い方については、こちらでも使い方の例を載せています。
準備
プロジェクト用のフォルダを作成し、そのフォルダに移動して初期化処理を行います。
npm init -y
Expressとejsとsqlite3をインストールします。
npm install express
npm install ejs
npm install sqlite3
SQLite3にてデータベースの作成
プロジェクト内のフォルダにてSQLite3のデータベースファイル「sample_data.db」を用意し、テーブル名「bbteams」として、以下のようなテーブルを作成しておきます（Windows環境であればPupSQLiteを利用するとGUIで対応できます）。
CREATE TABLE "bbteams" (
[id] INTEGER,
[team] TEXT,
[place] TEXT,
PRIMARY KEY([id])
);
| id | team | place |
|---|---|---|
| 1 | タイガース | 兵庫 |
| 2 | カープ | 広島 |
| 3 | ベイスターズ | 横浜 |
| 4 | ジャイアンツ | 東京 |
| 5 | スワローズ | 東京 |
| 6 | ドラゴンズ | 名古屋 |
ファイルの配置
ejsファイルをプロジェクト内のviewsというフォルダ内に作成します（デフォルトでviewsフォルダを参照します）。ここではindex.ejsというファイル名で作成しています。
配置について.
・プロジェクトフォルダ
・index.js
・viewsフォルダ
・index.ejs
コード例
上記のデータベースよりチーム名が「ズ」で終わるチームを出力させています。
index.js
let port = 3000; //ポート番号
let express = require("express");
let app = express();
app.set("view engine", "ejs"); //テンプレートエンジンの指定
let sqlite3 = require("sqlite3"); //sqlite3
let db = new sqlite3.Database("./sample_data.db");
let bb_dat = {dat:null}; //ejs転送用オブジェクト
let pl = "%ズ"; //SQLプレースホルダー用変数
//データベースに接続しSQL文の実行
db.all("select * from bbteams where team like ? ", pl, function(err,rows){
bb_dat.dat = rows;
});
//ルートにアクセス時index.ejsにbb_datを渡し、応答する
app.get("/",function(req,res){
res.render("index.ejs",bb_dat);
console.log(bb_dat.dat);
});
//ポート番号を指定してWebサーバーとして起動
let listener = app.listen(port,function(){
console.log("ブラウザにてlocalhost:" + port + "にアクセスしてください");
});
index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>データベースからの取得</h1>
<ul>
<% for(let e of dat){ %>
<li><%= e.team %></li>
<% } %>
</ui>
<script>
console.log("@ejs");
</script>
</body>
</html>
サーバー起動します。
node index.js
ブラウザにてlocalhost:3000にアクセスします。データベースよりデータを取得できました。
次の記事で、検索ができるよう紹介しています。