node.jsで立てたサーバーとmysqlを繋げるところまで、なるはやセットアップ（ローカル編）

## きっかけ
ユーザー登録・データ保管ができるWebアプリを作ろうと思いました。
そのためにはサーバー立て＋DB操作という裏側の処理が必要なので、とりあえずnodeを使って、ローカルでそんなシステムを作ってみようと思いました。
ページのviewはHTML・CSS・JavaScriptで書いていくつもりです。
# 完成後の姿
localhost:3000にアクセスすると、DB(mysql)の中身が表示されるページを作成。
![キャプチャ9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291827/03cf1acf-347f-ed7c-0806-2b48b6017224.png)
# 前提知識
読んでる途中で「？」な箇所あればこの辺調べてみてください！
本記事は手順のみのメモなので、詳細な解説は書きません。
- 基本的な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;
```
以下のように表示されれば完成です。
![キャプチャ2_edited.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291827/b5175252-95c0-0aff-763e-db80d2262731.png)
## 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にはこのように記述して保存してください。
```javascript
"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 にアクセスし、以下のような表示がされれば成功です。
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291827/50634cf0-7c0d-14c1-2240-1f706b772770.png)
## モジュールインストールの準備
このままだと「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を押してください。
![キャプチャ4_edited.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291827/1bc62049-fa50-e763-00f9-1457123dc76e.png)

app.jsの隣にpackage.jsonができていれば成功です。
![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291827/a00f3066-405a-db7e-d819-4c1c3fa840c3.png)
## モジュールインストール[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
<html>
<head>
<title>テストページ</title>
</head>
    <body>
        <h1>Hello Node.js!</h1>
        <p>with ejs.</p>
    </body>
</html>
```
また、app.jsの中身を以下に書き換えてください。
```javascript
"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にアクセスして、以下のような表示になれば成功です。
![キャプチャ7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291827/42f35e0b-8679-2a6c-9d8f-4cd9ffea6459.png)
## モジュールインストール[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ができているので、エディタで開きます。
中身を以下に書き換えてください。
```javascript
// 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を作成します。
```javascript
const environment = "development";
const config = require("../knexfile.js")[environment];
const knex = require("knex")(config);

module.exports = knex;
```
### ここまでうまくいっているか確認
app.jsを以下の様に書き換えてください。
```javascript
"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の中身が表示されていれば成功です。
![キャプチャ8_edited.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291827/532762f0-86e0-4e9c-f498-5645e874a2f3.png)
## DBの中身をブラウザで表示
いよいよDBの中身をブラウザで表示します。

app.jsを以下の様に書き換えてください。
```javascript
"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
<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 にアクセスし、以下のような表示がされれば成功です。
![キャプチャ9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291827/0f7680d9-4c46-e654-a534-100e22847d55.png)

以上で、nodeを用いてDBの中身をブラウザで表示させるコードの完成です。
## 終わりに
もし、ブラウザ操作でDBへデータ追加をしたければ、knexの「insert」の仕方を調べて改造してください。

もし、ページをCSSを用いて装飾したければ、app.jsの「// EJS設定」のあたりに以下を記述し、
```javascript
app.set('views', __dirname + '/views');
```
「views」階層の下に「views/css/style.css」を書き、
test_view.ejsで、普通に↓のようにcss読み込みを行えば可能です。
```html
<link rel="stylesheet" href="/css/style.css">
```


本記事をベースにして、各々やりたいように改造してもらえれば幸いです。