きっかけ
ユーザー登録・データ保管ができるWebアプリを作ろうと思いました。
そのためにはサーバー立て＋DB操作という裏側の処理が必要なので、とりあえずnodeを使って、ローカルでそんなシステムを作ってみようと思いました。
ページのviewはHTML・CSS・JavaScriptで書いていくつもりです。
完成後の姿
localhost:3000にアクセスすると、DB(mysql)の中身が表示されるページを作成。
前提知識
読んでる途中で「？」な箇所あればこの辺調べてみてください！
本記事は手順のみのメモなので、詳細な解説は書きません。
- 基本的なhtmlが書ける
- コマンド操作をしたことがある
- JavaScriptの基本的な文法がわかる：変数、関数、同期/非同期処理
- SQLの基本的な書き方（select、insertレベル）が分かる
手順
※使用OSはWindowsです。
MySQLのインストール
MySQLをインストールします。
こちらを参照。https://prog-8.com/docs/mysql-env-win
↑の通りにインストールを進めてください。
バージョンは今回の目的なら何でもいいと思いますが、参照先に合わせてMySQL 5.7にしておきます。
MySQL事前データ登録
ブラウザに表示させるデータを事前に登録しておきます。
（参考：https://prog-8.com/docs/mysql-database-setup）
mysqlに入る
コマンドプロンプトを起動してこちらを打って下さい。
mysql --user=root --password
↑でエラーが出る場合、最初にこちらを入力してください。
net start mysql57
※この時、コマンドプロンプトを「管理者として実行」しないとうまくいかないことがあります。
データベースを作成
「CREATE DATABASE ○○;」と打つと○○という名前のデータベースが作れます。
今回は「testDB」という名前で作ろうと思うので、以下のとおり打ってください。
CREATE DATABASE testDB;
その後、以下のように打ってtestDBに入ってください。
USE testDB;
テーブルの作成
ここまできたら、ようやくデータを登録できます。
以下のようなテーブルを登録していきます。
＜Users テーブル＞
| id | name |
|---|---|
| 1 | 維尼 |
| 2 | 炳添 |
まずは以下のようにテーブルを作成してください。
CREATE TABLE users (id INT AUTO_INCREMENT, name TEXT, PRIMARY KEY (id)) DEFAULT CHARSET=utf8;
その後、以下の2つを入力して、データの登録を行ってください。
INSERT INTO users(name) VALUES ('維尼');
INSERT INTO users(name) VALUES ('炳添');
最後に確認として、以下のように打って、
SELECT * FROM users;
以下のように表示されれば完成です。
node.jsのインストール
nodeをインストールします。
nodeは「ブラウザでこのURLが入力されたら、このhtmlを返す」などの処理をコーディングするためのものです。
インストール自体はこの通りに実行すればOKです。
https://zenn.dev/wkb/books/node-tutorial/viewer/3
＞ Node.jsについて ＞ Node.jsのインストール
nodeの動作チェック
適当な場所に練習用フォルダ（今回は「node-app」とします）を作成し、
その下にapp.jsという名前でjsファイルを作成してください（今回はC:\Users\○○<自分のwindowsユーザー名>\OneDrive\デスクトップ\node-app\app.jsとします）。
app.jsにはこのように記述して保存してください。
"use strict";
const http = require("http");
const server = http.createServer((request, response) => {
response.writeHead(200, {
"Content-Type": "text/html"
});
const responseMessage = "<h1>Hello Node.js!</h1>";
response.write(responseMessage);
response.end();
console.log(`Sent a response : ${responseMessage}`);
});
server.listen(3000);
console.log("listening on port 3000...");
次に、app.jsを起動します。
コマンドプロンプトを起動し、「cd」でapp.jsがある階層に移動してください。
今回の場合以下になります。
cd C:\Users\○○<自分のwindowsユーザー名>\OneDrive\デスクトップ\node-app
その後、以下コマンドでnodeサーバーを起動します。
node app.js
この状態で、ウェブブラウザからhttp://localhost:3000 にアクセスし、以下のような表示がされれば成功です。
モジュールインストールの準備
このままだと「require("http");」などの超基本モジュールしか用意されていない状態なので、これから様々なモジュールをインストールしていきます。nodeの環境へのモジュールインストールには「npm」を使用します。
npmは（Node Package Manager）の略で、その名の通り、nodeの環境へのパッケージインストールに使用するコマンドです。
nodeをインストールすると「npm」も同梱の形でインストールされているはずです。
インストールされているか確認するためには
npm --version
と打って、バージョンが出てくるか確認してください。
バージョンが出てくれば問題なくインストールできています。
続いて、npmの初期化をします。
このようにapp.jsがある階層に移動した後、
cd C:\Users\○○<自分のwindowsユーザー名>\OneDrive\デスクトップ\node-app
以下のコマンドを打ってください。
npm init
その後以下の様に「package nameはappでいい？」「versionは1.0.0でいい？」とか次々聞かれます。
とりあえず今回はすべて初期設定のままEnterし、最後に「yes」と打ってEnterを押してください。
app.jsの隣にpackage.jsonができていれば成功です。
モジュールインストール[ejsとexpress]
今のapp.jsはresponse.writeでテキストを表示させるだけです。
ではなくて、html的な感じでページを書きたいので、「ejs」をインストールします。
ejsは、ほとんどhtmlみたいに書けるけど、合間にif文やfor文などのjsの機能を挟めるという便利なテンプレートエンジンです。
また、Webアプリケーションを構築するにあたってちょくちょく必要になってくるフレームワーク「express」も同時にインストールします。
ejsとexpressのインストール手順
このようにapp.jsがある階層に移動した後、
cd C:\Users\○○<自分のwindowsユーザー名>\OneDrive\デスクトップ\node-app
以下2つを実行してください。
npm install ejs
npm install express
ここまでうまくいっているか確認
まず、「node-app」階層の下に「views」階層を作成し、そこにtest_view.ejsを作成してください。
中には以下の様に記述してください。
<html>
<head>
<title>テストページ</title>
</head>
<body>
<h1>Hello Node.js!</h1>
<p>with ejs.</p>
</body>
</html>
また、app.jsの中身を以下に書き換えてください。
"use strict";
//express設定
var express = require('express');
var app = express();
// EJS設定
app.set('view engine', 'ejs');
//ポート3000で待機...
app.listen(3000, function(){
console.log("listening on port 3000...");
});
//「/」(TOP階層)にアクセスがあった時の処理
app.get("/", function (req, res) {
res.render('test_view');
});
再度こちらのコマンドでapp.jsを起動し、
node app.js
localhost:3000にアクセスして、以下のような表示になれば成功です。
モジュールインストール[mysqlとknex]
ここまで、nodeを使って、ブラウザからのアクセスを打ち返すコードができました。
次はnodeとDBの接続に入っていきます。
まず、mysqlを操作する基本のモジュール「mysql」をインストールします。
あわせて、簡単にDBを操作するためのモジュール、「knex（ケネックス）」をインストールします。
mysql（DBシステムじゃなくてnodeモジュールの方）のインストール手順
このコマンドでapp.jsのあるところまで移動し、
cd C:\Users\○○<自分のwindowsユーザー名>\OneDrive\デスクトップ\node-app
npmでmysqlをインストールしてください。
npm install mysql
knexのインストール手順
app.jsのあるところまで移動し、
cd C:\Users\○○<自分の階層>\OneDrive\デスクトップ\node-app
npmでknexをインストールしてください。
npm install knex
次に、以下コマンドでknex.jsの接続設定ファイルを作成します。
npx knex init
「node-app」階層内にknexfile.jsができているので、エディタで開きます。
中身を以下に書き換えてください。
// Update with your config settings.
module.exports = {
development: {
client: "mysql",
connection: {
database: "[操作したいデータベースの名前]",
user: "root",
password: "[事前準備で設定したrootユーザのパスワード]",
},
pool: {
min: 2,
max: 10
},
},
staging: {
client: "mysql",
connection: {
database: "[操作したいデータベースの名前]",
user: "root",
password: "[事前準備で設定したrootユーザのパスワード]",
},
pool: {
min: 2,
max: 10
},
},
production: {
client: "mysql",
connection: {
database: "[操作したいデータベースの名前]",
user: "root",
password: "[事前準備で設定したrootユーザのパスワード]",
},
pool: {
min: 2,
max: 10
},
}
};
[操作したいデータベースの名前]は今回の場合は「testDB」になっているはずです。
[事前準備で設定したrootユーザのパスワード]はご自身のパスワードを入れてください。
次に、app.js上でknex呼び出しの記述を長々と書かなくても良いようにするため、knex.jsを作成します。
「node-app」の下に「db」という階層を作り、その中に以下の様に記述したファイルknex.jsを作成します。
const environment = "development";
const config = require("../knexfile.js")[environment];
const knex = require("knex")(config);
module.exports = knex;
ここまでうまくいっているか確認
app.jsを以下の様に書き換えてください。
"use strict";
//express設定
var express = require('express');
var app = express();
// EJS設定
app.set('view engine', 'ejs');
//SQL設定
const knex = require('./db/knex');
//ポート3000で待機...
app.listen(3000, function(){
console.log("listening on port 3000...");
});
//「/」(TOP階層)にアクセスがあった時の処理
app.get("/", function (req, res) {
knex("users").select("*")
.then(function (results) {
console.log(results);
});
});
そして、こちらのコマンドでapp.jsを起動し、
node app.js
localhost:3000にアクセスしてください（この時、ブラウザではページが表示されなくてOKです）。
この時、コマンドラインに、以下の様にDBの中身が表示されていれば成功です。
DBの中身をブラウザで表示
いよいよDBの中身をブラウザで表示します。
app.jsを以下の様に書き換えてください。
"use strict";
//express設定
var express = require('express');
var app = express();
// EJS設定
app.set('view engine', 'ejs');
//SQL設定
const knex = require('./db/knex');
//ポート3000で待機...
app.listen(3000, function(){
console.log("listening on port 3000...");
});
//「/」(TOP階層)にアクセスがあった時の処理
app.get("/", function (req, res) {
knex("users").select("*")
.then(function (results) {
console.log(results);
res.render('test_view', {users_data:results});
});
});
test_view.ejsを以下の様に書き換えてください。
<html>
<head>
<title>テストページ</title>
</head>
<body>
<p>Usersテーブル</p>
<table border="1">
<tr>
<th>id</th>
<th>名前</th>
</tr>
<% for(let i in users_data){ %>
<tr>
<td><%= users_data[i].id %></td>
<td><%= users_data[i].name %></td>
</tr>
<% } %>
</table>
</body>
</html>
★「users_data」という箱に乗って、app.js→test_view.ejsへとデータがやりとりされています。
こちらのコマンドでapp.jsを起動し、
node app.js
ウェブブラウザからhttp://localhost:3000 にアクセスし、以下のような表示がされれば成功です。
以上で、nodeを用いてDBの中身をブラウザで表示させるコードの完成です。
終わりに
もし、ブラウザ操作でDBへデータ追加をしたければ、knexの「insert」の仕方を調べて改造してください。
もし、ページをCSSを用いて装飾したければ、app.jsの「// EJS設定」のあたりに以下を記述し、
app.set('views', __dirname + '/views');
「views」階層の下に「views/css/style.css」を書き、
test_view.ejsで、普通に↓のようにcss読み込みを行えば可能です。
<link rel="stylesheet" href="/css/style.css">
本記事をベースにして、各々やりたいように改造してもらえれば幸いです。