YEOMANを使ってMEAN（MongoDB + Express.js + Angular.js + Node.js）のWebアプリケーションを作る

MEANとは

MongoDB + Express.js + Angular.js + Node.js を組み合わせてWebアプリケーションを作成することです。

手順

Windows上で簡単なユーザ登録アプリケーションを作ってみましょう。 次の手順で進めていきます。

1. アプリケーションの雛形を作成
2. ユーザページを追加
3. htmlを修正してユーザ一覧を追加
4. クライアントのJavaScript（Angular.js）を修正
5. サーバのJavaScript（Express.js）を修正
6. MongoDBを参照
7. ユーザの登録機能を追加

完成したものはGitHubにおいてあります。 Chocolatey本体のインストール以外はMinGW Bash*1で実行可能です。

事前準備

ChocolateyでMongoDBとNode.jsをインストールします。Chocolateyをインストールしていなかったら次のコマンドを実行してください。

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin

MoongDBのインストール

cinst gb.MongoDB

Node.jsのインストール

cinst nodejs.install

YOEMANのインストール

YOEMANはGruntとBowerを使用します。一緒にインストールします。

npm install -g yo grunt-cli bower
npm install -g generator-angular-fullstack

※執筆時点のgenerator-angular-fullstackのバージョンは1.0.1でした。2014年1月16日の時点で既に1.2.1までバージョンが上がっています。

Ruby と Compassのインストール

generator-angular-fullstackはCompassを使用するのでRubyとCompassをインストールします。

cinst ruby
gem install compass

アプリ作成

YOEMANを使ってアプリケーションの雛形を作ります。 　

mkdir register-user && cd $_
yo angular-fullstack register-user

いろいろ聞かれるのですべてをYにする

• Twiiter Bootstarp
• SCSS
• angularのモジュール4つ
• MongoDB デフォルトがNなので注意

起動確認

grunt serve

YOMENで生成されたアプリケーションがブラウザで起動します

固定のユーザ一覧を表示をする

ページを追加する

Ctrl + C でgruntを一度止め、次のコマンドを実行します。

yo angular-fullstack:route user
grunt serve 

http://localhost:9000/user が開けるようになります。

ユーザ一覧を追加

app/views/partials/user.html を編集します。

<h2>ユーザ一覧</h2>
<ul>
    <li ng:repeat="user in users">
        {{user.name}}
    </li>
</ul>

ダミーのユーザを表示

app/scripts/controllers/user.js の5~7行目を編集します。

before

    $http.get('/api/awesomeThings').success(function(awesomeThings) {
      $scope.awesomeThings = awesomeThings;
    });

after

    $http.get('/api/awesomeThings').success(function() {
      $scope.users = [{name:'田中'},{name:'鈴木'}];
    });

サーバのAPIを作成

lib/controllers/api.jsの最後に次のコードを追記します。

exports.users = function(req, res) {
  return res.json([{name:'田中_1'},{name:'鈴木_1'}]);
};

ルートディレクトリにある、server.js の Server Routes のブロックに次の行を追記します。

app.get('/api/users', api.users);

http://localhost:9000/api/users でJSONが取得できるようになります。

APIに接続

app/scripts/controllers/user.js の5~7行目をもう一度編集します。

    $http.get('/api/users').success(function(users) {
      $scope.users = users;
    });

http://localhost:9000/user にAPI版のユーザ情報が出ます。

MongoDBと接続

lib/models/user.jsを作る

'use strict';

var mongoose = require('mongoose'),
    Schema = mongoose.Schema;
    
// Schema
var UserSchema = new Schema({
  name: String
});

mongoose.model('User', UserSchema);

lib/db/dummydata.jsの末尾に追記します。

var User = mongoose.model('User');
User.find({}).remove(function() {
    User.create({
        name: '田中_2'
    }, {
        name: '鈴木_2'
    }, function(err) {
        console.log('finished populating Users');
    });
});

lib/controllers/api.jsをMongoDBを参照するように修正します。

exports.users = function(req, res) {
    mongoose.model('User').find(function(err, users) {
        if (!err) {
            return res.json(users);
        } else {
            return res.send(err);
        }
    });
};

http://localhost:9000/user に dummydata.js で MongoDB に登録したユーザー情報が出ます。

ユーザの登録

ユーザ登録フォームを追加

ユーザ登録用に app/view/partial/user.htmlを書き換えてフォームを追加します。

<div ng-controller="UserCtrl">
    <h2>ユーザ登録</h2>
    <form >
        <legend>ユーザ登録</legend>
        <label>名前</label> 
        <input type="text" id="name" name="name" ng-model="user.name"> 
        <button class="btn btn-primary" ng-click="createUser()">登録</button>
    </form>

    <h2>ユーザ一覧</h2>
    <ul>
        <li ng:repeat="user in users">
            {{user.name}}
        </li>
    </ul>
</div>

http://localhost:9000/user にフォームが表示されます。

登録ボタンのイベントハンドラを設定

この時点ではボタンがまだ動作しないのでイベントハンドラを設定します。

app/script/controllers/user.js に$scope.createUser関数を追加します。

'use strict';

angular.module('registerUserApp')
    .controller('UserCtrl', function($scope, $http) {
        $http.get('/api/users').success(function(users) {
            $scope.users = users;
        });

        $scope.createUser = function() {
            if ($scope.user && $scope.user.name) {
                $scope.users.push({
                    name: $scope.user.name
                });
                $scope.user.name = '';
            }
        };
    });

名前欄に名前を入力し、登録ボタンを押すと一覧にユーザを追加します。

ユーザ登録用のPOST APIを作成

まだ、サーバには保存できていません。ブラウザをリロードすると登録したユーザは消えてしまいます。 ユーザ登録用のPOST APIを作成します。

lib/controllers/api.jsの最後に追記します。

exports.createUser = function(req, res) {
    var User = mongoose.model('User');
    new User({
        name: req.body.name
    }).save(function() {
        res.end();
    });
};

server.js の Server Routes のブロックに追記します。

app.post('/api/users', api.createUser);

app/script/controllers/user.js のイベントハンドラを修正します。

      $scope.createUser = function() {
            if ($scope.user && $scope.user.name) {
                $http({
                    method: 'POST',
                    url: '/api/users',
                    data: $scope.user
                }).success(function() {
                    $scope.users.push({
                        name: $scope.user.name
                    });
                    $scope.user.name = '';
                });
            }
        };

これで登録したユーザがMongoDBに保存されるようになりました。*2

参考リンク

Full-Stack JavaScript With MEAN And Yeoman にMEAN用のGeneratorがいくつか紹介されています。

おわりに

今回の作業で特に良いと思う点

• YOEMANでアプリケーションの雛形を作る簡単さ
• 画面をデザインするために作ったJSONファイルをそのままDBに保存できる統一感

すごくいいです。

*1:Git for WindowsでインストールされるGit BashもMinGW Bashです。

*2:gurnt serve でサーバを再起動すると dummydata.js が実行されてデータは削除されます。