Node.js + Express + Sequelize で Web アプリ作成手順

Node.js + Express + Sequelize で Web アプリ作成手順

本記事の目的

Node.js + Express + Sequelize で Web アプリケーション作成のための環境構築から手順までをまとめる.

本記事は以下の書籍「作りながら学ぶWebプログラミング実践入門」の内容を自分なりに消化, 改修した内容となっている.

https://book.mynavi.jp/ec/products/detail/id=112778

今回作成したアプリケーションのリポジトリは以下

https://github.com/kita127/todo-app

各技術要素の概略

Sequelize と Mocha は「作りながら学ぶWebプログラミング実践入門」には登場しない要素.

環境構築

Node.js の導入

まずはメイン言語となる Node.js の導入.

nodebrew の導入

Node.js はバージョンの更新が目まぐるしいため, 通常は直接インストールせずバージョンマネージャをインストールして 任意のバージョンに切り替えつつ使用するのが一般的らしい.

Mac 環境では nodebrew というバージョンマネージャがよく使われるらしいのでそちらを導入する.

https://github.com/hokaccha/nodebrew

curl でインストールする

$ curl -L git.io/nodebrew | perl - setup

.bashrc 等の設定ファイルの PATH の設定に nodebrew のパスを追加する.

$ export PATH=$HOME/.nodebrew/current/bin:$PATH

設定ファイルをリロードする.

$ source ~/.bashrc

nodebrew のコマンドが使用できることを確認する.

$ nodebrew help
nodebrew 1.1.0

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backward compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`

nodebrew から Node.js のインストール

今回は最新のバージョンを導入する.

$ nodebrew install latest

意図したバージョンの Node.js がインストールされたことを確認する.

$ node -v
v16.0.0

Express の導入

Express はプロジェクトの雛形を生成するツール express-generator をグローバル環境に導入する.

$ npm install express-generator -g

プロジェクトの雛形を作成する. 以下のコマンドでテンプレートファイルに ejs を指定し, project-name で Express プロジェクトの雛形を作成する.

$ express -v ejs project-name

作成したプロジェクトフォルダに移動すし, 依存パッケージをインストールする.

$ cd ./project-name
$ npm install

作成したプロジェクトを試しに動かしてみる.

$ npm start

ブラウザから http://localhost:3000 にアクセスする. 以下が表示されることを確認する.

Express
Welcom to Express

Express の説明

Express の使い方

routes/ フォルダに任意の url にアクセスした際の制御を記述する.

以下はrouter/hoge.js を作成し http://localhost:3000/hoge にアクセスした際の制御. res.render() の第一引数にレンダリングする ejs ファイルを指定する. 第二引数には ejs ファイルに渡すオブジェクトを指定する.

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.render('hoge', { title: 'hoge' });
});

module.exports = router;

レンダリングする ejs ファイルを view フォルダに作成する.

view/hoge.ejs を以下の通り作成.

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

app.js に以下の設定を追加する. 以下の設定で作成した hoge.js が URL /hoge と紐づく. 以下の設定により /hogehoge.js におけるルートとなるため router.get('/', ....) の記述で http://localhost:3000/hoge にアクセスした場合の処理の記述となる.

// 作成したルータ hoge.js を require する
var hogeRouter = require('./routes/hoge');

    .
    .
    .

// 作成した hogeRouter に URL を紐付ける
app.use('/hoge', hogeRouter);

Sequelize

Sequelize を導入する. Sequelize は Node.js 用の OR マッパー.

導入

$ npm install sequelize

sequelize-cli の導入

sequelize を便利に使用するための CLI ツールを導入する.

$ npm install sequelize-cli

sequelize を初期化する

$ npx sequelize-cli init

以下のフォルダが作成されることを確認する.

  • config
    • 設定情報管理
  • models
    • データベースアクセスに使う「モデル」というオブジェクトを定義する

config.json に設定をする

SQLite3 を使用する場合は以下のような感じで設定する.

{
  "development": {
    "database": "db-development",
    "dialect": "sqlite",
    "storage": "seq-todo.sqlite3"
  },
  "test": {
    "database": "db-test",
    "dialect": "sqlite",
    "storage": "seq-todo.sqlite3"
  },
  "production": {
    "database": "db-product",
    "dialect": "sqlite",
    "storage": "seq-todo.sqlite3"
  }
}

モデルを作成する

データベースのテーブルにアクセスするためのオブジェクトであるモデルを作成する. モデルの作成は sequelize-cli のコマンドで行う.

以下は users というテーブルを作成, account, password, name, role といったカラムを持つ.

$ npx sequelize-cli model:generate --name users --attributes account:string,password:string,name:string,role:string

以下が生成されることを確認する.

  • models/users.js
  • migrations/yyyymmddxxxxxxxx-create-users.js

マイグレーションを実行する

データベースの内容を変更した場合にその差分をデータベースに適用することをマイグレーションと呼ぶ.

今回は新たにモデルを作成したため、その変更をデータベースに反映する. これによりモデルを作成した users テーブルが seq-todo.db に作成される.

$ npx sequelize-cli db:migrate --env development

シーディングによりレコードを作成する

seq-todo.db に users テーブルを作成したが, レコードは何もない. そのため, あらかじめレコードを作成する. こうしたはじめに用意しておくデータをシードと呼ぶ.

シーディング作成用のスクリプトファイルを生成する.

$ npx sequelize-cli seed:generate --name sample-users

seeders/yyyymmddxxxxxxxx-sample-users.js が生成されているためその up に生成するレコードの情報を記述する.

up: async (queryInterface, Sequelize) => {
    return queryInterface.bulkInsert('users', [
        {
            account: 'admin.com',
            password: 'admin',
            name: 'admin',
            role: 'admin',
            createdAt: new Date(),
            updatedAt: new Date()
        }
    ]);
    /**
     * Add seed commands here.
     *
     * Example:
     * await queryInterface.bulkInsert('People', [{
     *   name: 'John Doe',
     *   isBetaMember: false
     * }], {});
    */
},

シーディングを実行する.

$ npx sequelize-cli db:seed:all

Mocha

ユニットテスト用のフレームワークとして Mocha を導入する.

# mocha をインストール
$ npm install mocha --save-dev

# プロジェクト直下の test ディレクトリ内にある .js ファイルを対象に mocha はテストする
$ mkdir test

# テストモジュール作成
$ touch ./test/test-sample.js

テストモジュールに以下のようにテストを記述する.

describe('TEST SAMPLE', () => {
    it('test 1', (done) => {
        if ('aaa' === 'aaa') {
            done();
        }
        else {
            done('失敗');
        }
    });
});

テスト実行

$ npx mocha