mysqlを使いやすくする

データベース接続用ファイルを作る。

// db.js(models/db.js)
// npm install mysql --save
const mysql = require("mysql");
const connection = mysql.createConnection({
    host : [MYSQL HostIP],
    port : [MySQL PortNo], 
    user : [Your User],
    password: [Your Password],
    database: [MySQL DatabaseName]
});

connection.connect(function(err) {
    if (err) {
        console.error("MYSQL connection Error: " + err.stack);
        return;
    }

    console.log('MYSQL connected as ThreadID: ' + connection.threadId);
});

module.exports = connection;

 

exportsしているので、あとは利用するファイルから読み込むだけ

//適当なファイル

const db = require("../models/db");

var sql = "select * from user;";

db.query(sql, (err,results,fields) => {
     if( err !== null ){
           console.log(err);
     }
});

 

MVCっぽく

//log.js(models/log.js)

const db = require("../models/db");

exports.getAllLog = (req, res, next) => {
    db.query("select * from log", (err, results, fields) => {
        req.data = results;
        next();
    });
};
//main.js
const log = require("./models/log");

// Routing設定
app.get("/test", log.getAllLog, (req, res, next) => {
    res.render("test", { contents: req.data });
});

 

shellを実行する

サーバの状態を確認したり、他のサーバの情報を連携したいときにshellコマンドを利用したい場合

//node.jsの標準モジュール child_processを読み込み
const exec = require('child_process').exec;

//shellのdateコマンドを実行
exec('date', (err, stdout, stderr) => {
   if(err !== null){
        console.log(err);
   } else {
        console.log(stdout);
   }
});

 

requireするモジュールにデータを渡して挙動を変える

下記のような引数があるモジュールを定義

// test.js
module.exports = msg => {
    console.log(msg);
};

引数付きで呼び出せば実行される。

require("test.js")("welcome message");

 

関数として使いたい場合は下記のように定義

// test.js
module.exports = msg => {
    module.showMessage = () => {
        console.log(msg);
    };

    return module;
};

requireして実行してやれば良い

const test = require("test.js")("welcome message");
test.showMessage();

 

 

POSTを受け取る

ExpressでPostを受け取るにはmain.jsに下記コードが必要

app.use(
     express.urlencoded({
          extended: false
     })
);
app.use(express.json());

 

POSTするHTMLを作成

<form method="post" action="/post_test">
    <label for="memo">Memo</label>
    <input type="text" name="memo">
    <button type="submit">Post!</button>
</form>

 

あとは普通にapp.postを利用して受け取る

app.post("/post_test", (req, res) => {
    console.log(req.body.memo);
});

 

(注)req.body.memoはHTMLのname属性を指定する。

Node.jsの自動再起動

Node.jsはビュー以外のファイルを修正すると、プロセスの再起動しなくては修正が反映されない。

 

ファイルの修正 → プロセス終了 → プロセス起動

 

この一連の操作が大変なのでnodemonをインストールして.jsファイルが書き換わると自動的にプロセスの再起動するように設定する。

 

インストール方法

npm install nodemon --save-dev

 

あとはnode main.jsとプロセスを起動させる代わりにnodemon main.jsとしてやれば良い

nodemon main.js

 

もう少し楽をしたい場合はpackage.jsonにstartスクリプトを追加する

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon main.js"
  },

 

スクリプトを追加したらnpmで起動できるようになるので起動させるjsファイル名を意識しなくて良くなる

npm start

 

EJSで部品を作成して読み込む

ヘッダーやフッター、サイドメニューなどはEJSで部品化しておくと便利。

header.ejsなどの別ファイルを作成してinclude関数で読み込んでインライン展開される。

※.ejsは省略可能です。

<%- include("header"); %>

 

パスも有効なのでcomponent(部品)フォルダを作成すると以外とファイルもコードもスッキリ。

<%- include("component/footer"); %>

 

include関数の第2引数でパラメータを渡すことも可能

<%- include("component/header", title: "PageTitle"); %>

 

テスト用テンプレート

色々テストをするときにCDN経由だと始めやすいのでBootstrapで

公開されているものを利用すると良いです。

 

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>タイトル</title>
  </head>
  <body>
    <h1>本題</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

 

Hello.js!

要件

JavaScriptとNode.jsの個人的メモ

 

開発環境

OS:MacOS

Editer:VisualStudioCode

Browser:GoogleChrome

JavaScript:ECMAScript2015

Node.js:Express+EJS(※メインファイルはmain.js)