【NodeでWebアプリ】(4) MVCでサイトを構成する

4.MVCアーキテクチャー

今回は、ExpressのスケルトンをベースにしてMVCアーキテクチャを構成しています。ご存知のようにMVCアーキテクチャーとは、ユーザーインターフェースを持つアプリケーションケーションの実装パターンのひとつで以下の３つから構成されます。

Model　(データやロジック)
View　（ユーザーインターフェース）
Controller　（入力を受け取りModelとViewをコントロールする）

Expressは制約の少ない柔軟なフレームワークなので、スケルトンをベースに様々な機能を加えていくときに、どのようにでも構成できてしまいます。そのような状況で、MVCは設計に明確な指針を与えてくれる存在でもあります。

4.1 スケルトンとMVC

Expressジェネレータが作成するスケルトンは下図のような構成でした。スケルトンの初期状態からMVCの「V」に相当するものは存在しています。

次に、Sequelize-CLIを使ってModelを作成した結果、下図のような状態になりました。(静的ファイルの図は省略します。)

この段階でMVCの「V」と「M」に相当するものができました。Contorollerはまだありませんが、その代わりにRouteのroutes/users.jsがその役割をしています。

4.2 今回のレッスンで作るもの

今回は、「C」のControllerを追加します。Controllerはその名の通り、ModelやViewをコントロールする存在で、Expressに導入する場合はRouteから呼び出してもらうように配置することができます。図解すると下図のようなイメージです。

また、ユーザーを表示するためのviewも新たに追加します。下図のピンク色の長方形の部分が今回追加する部分です。

そして、以下の３つの機能を実装します。

	パス	機能
機能1	/users/	全ユーザーのリストを表示
機能2	/users/:userId	ユーザーIDで指定されたユーザーを表示
機能3	/uses/json	DBのデータをJSON形式で返す

機能１の表示結果
Screen Shot 2019-07-03 at 8.30.51.png

機能２の表示結果
Screen Shot 2019-07-03 at 8.57.00.png

機能３の表示結果
Screen Shot 2019-07-03 at 8.32.56.png

4.2 MVCに関するディレクトリ

ディレクトリ構成としては、段階を追って以下のように変化します。

4.3 今回のスタート地点

今回のレッスンで新しい機能を実装する前に、現在のコード状況をもう一度整理しておきましょう。これまでのレッスンで./routes/users.jsファイルに２つのルートを追加した結果、現在は以下の３つのルートが存在しています。

	パス	レスポンス内容
ルート1	/users/	“respond with a resource”と返す
ルート2	/users/:userId	“ok”と返す。 console.logでメッセージ出力。
ルート3	/uses/json	DBのデータをJSON形式で返す

./routes/users.js全体としては以下のような状態です。現状ではレスポンスを返す処理などもこのファイルに実装されていますので、これらの部分をControllerに移すことにします。

//
// 前回のレッスン(第２回)のルート実装
//
var express = require('express');
var router = express.Router();
var dbModels = require('../models/');

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

/*ユーザーIDを指定できるルート*/
router.get('/:userId', function(req, res, next) {
  var userId = req.params.userId;
  console.log('ユーザーID '+userId+ ' が指定されました。');
  res.send('ok');
});

/* ユーザーのリストをJSON出力する */
router.get('/json/', function(req, res, next) {
  // Sequelizeのモデルを使ってデータを取得する
    dbModels.User.findAll().then(users => {

        if (!users) return next(); // 404 Error
        
        res.json(users);
    });
});

module.exports = router;

このルーティングを以下のように変更します。

4.4 新しいルーティング実装

上記のように前回のレッスンでは./routes/users.jsにレスポンスを返す処理が実装されていましたが、これを、シンプルにコントローラを呼び出す形に変えます。

//
// 今回のレッスン(第３回)のルート実装
//
var express = require('express');
var router = express.Router();
var userController = require('../controllers/user');


/* GET users listing. */
router.get('/', userController.showAllUsers);
router.get('/:userId', userController.showUserById);
router.get('/json', userController.sendJson);

module.exports = router;

4.5 Controllerの仕様

今回作成するControllerは、以下の３つのメソッドを持つものとします。

	パス	メソッド名	レスポンス内容
メソッド1	/users/	showAllUsers	Viewを使って全ユーザーのリストを表示する。
メソッド2	/users/:userId	showUserById	Viewを使って、ユーザー名を表示する。
メソッド3	/uses/json	sendJson	DBのデータをJSON形式で返す

4.6 Viewの実装

Controllerの実装を行う前に、Viewをあっさりと作ってしまいましょう。./views/フォルダの下に、ファイルを２つ作ります。

allUsers.ejs メソッド１用のView。全ユーザーを表示する。
oneUser.ejs メソッド２用のView。1人のユーザーを表示する。

先ず、メソッド1用のviewファイルをallUsers.ejsという名前で以下のように作成します。この中で使われているusersという変数は、後ほどController側で用意します。


<!DOCTYPE html>
<html>
  <head>
	<title>user</title>
	<link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  	<div>全てのユーザーを表示する</div>
	<ol>
		<% for(var i=0; i < users.length; i++) { %>
			<li> <%= users[i].firstName %> <%= users[i].lastName %></li>
		<% } %>
	</ol>
  </body>
</html>

次に、メソッド2用のviewファイルをoneUser.ejsという名前で以下のように作成します。この中で使われているuserという変数に関しても、後ほどController側で用意します。

<!DOCTYPE html>
<html>
  <head>
    <title>user</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>

    <div>IDで指定されたユーザーを表示する</div>
   
    <%= user.firstName %>　 <%= user.lastName %>

  </body>
</html>

4.7 Controllerの実装

それでは、Controllerを実装していきます。

先ず、Controllerモジュールの大枠を考えます。３つのメソッドを以下のように実装することにします。

var userController = {

    //
    // メソッド １
    // パス: /user/
    // レスポンス: 全てのユーザーを表示する
    //
    showAllUsers: function(req, res, next) {

        
    },
    //
    // メソッド 2
    // パス: /user/:userId
    // レスポンス: IDで指定されたユーザーを表示する
    //
    showUserById: function(req, res, next) {

        
    },
    //
    // メソッド 3
    // パス: /user/json
    // レスポンス: DBのデータをJSON形式で返す
    //
    sendJson: function(req, res, next) {

        
    }
};

module.exports = userController;

余談になりますが、モジュールのメソッドを実装するときのスタイルはいろいろあり、例えば以下のAとBは同じように動作します。

var foo = {
  bar: function(){
      //
  },
  baz: function(){
  }
};
module.exports = foo;

var foo = {};
foo.bar =  function(){
      //
};
foo.baz =  function(){
      //
};
module.exports = foo;

また、今回のメソッドはどれもreq、 res、 nextの３つのパラメータを受け取るように設計してあります。

1	function(req, res, next){

メソッド 1 : 全てのユーザーを表示する

それでは、/users/に対応する機能から取り組みます。前回のレッスンで、DBのデータをJSON形式で表示する機能を以下のように実装しました。

// Sequelizeのモデルを使ってデータを取得する
dbModels.User.findAll().then(users => {

    if (!users) return next(); // 404 Error
    
    res.json(users);
});

このコードの中でjsonを返している行を変更します。

//変更前
// res.json(users);
//変更後
res.render('allUsers', {users:users});

res.renderはViewエンジンを使ってレンダリングするメソッドです。パラメータは２つあり、１つは使用するビューの名前、もうひとつはビューへ渡す情報です。Viewに渡す情報はJSON形式であれば内容は自由です。

1	res.render("Viewファイル名", {Viewへ渡す情報});

この変更を反映すると、メソッド１は以下のようになります。

//
// メソッド １
// パス: /user/
// レスポンス: 全てのユーザーを表示する
//
showAllUsers: function(req, res, next) {

    // Sequelizeのモデルを使ってデータを取得する
    dbModels.User.findAll().then(users => {

        if (!users) {
            console.log("ユーザーデータを取得できませんでした");
            res.send('Error');
        } else {
            res.render('allUsers', { users: users });
        }
    });
},

メソッド 2 : IDで指定されたユーザーを表示する

メソッド２は、ユーザーIDを受け取って、そのユーザーの情報を表示する処理です。前回のレッスンで学んだように、URL中のユーザーIDはリクエストオブジェクト（req）にセットされています。

http://localhost/users/123

router.get('/:userId',function(req, res, next){
    var userId = req.params.userId;
    //...
});

このようにして取得したユーザーIDを、SequelizeのfindByPk()メソッドに渡して、指定ユーザーのデータを取得します。findByPkのPkというのはPrimary Key（主キー）のことです。背後では、SQLのSELECT文が実行されます。

1	dbModels.User.findByPk(userId).then(user => {

前回のレッスンでも触れましたが、Nodeのデータ取得は非同期で、SequelizeはPromiseを返すので、then(funcfiton(user){})という形式で取得データを受け取ります。

//
// メソッド 2
// パス: /user/:userId
// レスポンス: IDで指定されたユーザーを表示する
//
showUserById: function(req, res, next) {

    var userId = req.params.userId; // ユーザーIDを取得
    if (!userId) {
        console.log("ユーザーIDを取得できませんでした");
        res.send('Error');
    } else {
        // Sequelizeのモデルを使ってデータを取得する
        dbModels.User.findByPk(userId).then(user => {

            if (!user) {
                console.log("ユーザーデータを取得できませんでした");
                res.send('Error');
            } else {
                res.render('oneUser', { user: user });
            }
        });
    }
},

メソッド 3 : DBのデータをJSON形式で返す

次に３つめのメソッドを実装します。３つめのメソッドは、DBから取得したユーザーのリストをJSONで返すものです。メソッドの中身の処理は前回のレッスンで実装したものと同じものです。

sendJson: function(req, res, next) {

    // Sequelizeのモデルを使ってデータを取得する
    dbModels.User.findAll().then(users => {

        if (!users) {
            console.log("ユーザーデータを取得できませんでした");
            res.send('Error');
        } else {
            res.json(users);
        }

    });
},

以上３つのメソッドをまとめると、/controllers/user.js全体としては以下のようになります。

//
// /controllers/user.js
//
var dbModels = require('../models/');
var userController = {

    //
    // メソッド １
    // パス: /user/
    // レスポンス: 全てのユーザーを表示する
    //
    showAllUsers: function (req, res, next) {

        // Sequelizeのモデルを使ってデータを取得する
        dbModels.User.findAll().then(users => {

            if (!users) {
                console.log("ユーザーデータを取得できませんでした");
                res.send('Error');
            } else {
                res.render('allUsers', { users: users });
            }
        });
    },

    //
    // メソッド 2
    // パス: /user/:userId
    // レスポンス: IDで指定されたユーザーを表示する
    //
    showUserById: function (req, res, next) {

        var userId = req.params.userId; // ユーザーIDを取得
        if (!userId) {
            console.log("ユーザーIDを取得できませんでした");
            res.send('Error');
        } else {
            // Sequelizeのモデルを使ってデータを取得する
            dbModels.User.findByPk(userId).then(user => {

                if (!user) {
                    console.log("ユーザーデータを取得できませんでした");
                    res.send('Error');
                } else {
                    res.render('oneUser', { user: user });
                }
            });
        }
    },
    //
    // メソッド 3
    // パス: /user/json
    // レスポンス: DBのデータをJSON形式で返す
    //
    sendJson: function (req, res, next) {

        // Sequelizeのモデルを使ってデータを取得する
        dbModels.User.findAll().then(users => {

            if (!users) {
                console.log("ユーザーデータを取得できませんでした");
                res.send('Error');
            } else {
                res.json(users);
            }

        });
    },

};

module.exports = userController;

アプリを起動して確認する

それではアプリを起動して、３つの機能を確認してみましょう。

1	$ npm start

機能１

ブラウザで次のURLにアクセスします。

http://localhost:3000/users/

以下のようにユーザーの一覧が表示されれば成功です。

Screen Shot 2019-07-03 at 8.30.51.png

機能2

以下のURLにアクセスします。

http://localhost:3000/users/1

機能２の表示結果
Screen Shot 2019-07-03 at 8.57.00.png

機能3

http://localhost:3000/users/json

機能３の表示結果
Screen Shot 2019-07-03 at 8.32.56.png

まとめ

今回は、第２回のコードをベースにして、MVCの構成を作成しました。第２回のコードでは、Ruotes以下に実装していたロジックを、Controllerの部分にまとめることができました。