Nodeを使って「Hello、World！」ページを表示するWebアプリのチュートリアル結構あるのですが、自分の経験でDBをアクセスするまでのチューロチアルが少ないということで、今回の記事のテーマは簡単にMongoDBに保存したデータを取得したり、MongoDBにデータを書き込んだりするWebアプリの手順を紹介します。

一、環境を構築

ステップ１：Node.jsをインストール

node.js公式サイトをクリックして使われているOSを自動検知するから、インストールボタンを押すだけで済みます。
https://nodejs.org/en/
インストールファイルをダウンロードし実行して、Node.jsとよく使われているパッケージ・マーネッジャのNPMもインストールされます。
macの場合ではterminal、windowsの場合はcommand promptを開いて、webアプリを保存するdirectoryをcdしましょう
（例：/Users/webapp）

ステップ２：Express & Express Generatorをインストール

npm -g express
npm -g express-generator

ステップ３：MongoDBのインストール

以上で、DBアクセスできるwebアプリが動ける環境の構築が完了しました。
続いてwebアプリを作りましょう。

二、「Hello World」webアプリを作成

ステップ１：Express generatorを生かしweb appの雛形を作成

express app1

app1というフォルダーが作成されたことを確認しましょう。

ステップ２：app1のフォルダーに移動

cd ~/app1

ステップ３：appが稼働させるdependencyをインストール

npm install

ステップ４：appを開始

npm start

ステップ５：web appの稼働確認

にアクセスし、下記の画面が出ることを確認しましょう。

ステップ６：hello worldを出力

~/app3/routers/index.jsを開いて、下記のコードがあることを確認します。

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

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

上記module.exports = router行の前に、下記のコードを追加します。

/* GET Hello World page. */
router.get('/helloworld', function(req, res) {
res.render('helloworld', { title: 'Hello, World!' });
});

~app3/views/にhellowrold.jadeというファイルを新規作成します。中身は

extends layout

block content
  h1= title
  p Welcome to #{title}

で保存します。

http://localhost:3000/helloworld
にアクセスし、「hello world」のメッセージを確認しましょう。

三、MongoDBのデータを取得

ステップ１：サーバーを閉じて、MongoDBへアクセスするパッケージを追加

~app1/package.jsonを開いて、

{
  "name": "app3",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "jade": "~1.11.0",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2"
  }
}

のようになっていることを確認した後、下記のようにmongodbのモジュールを追加します。

{
  "name": "app3",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "mongodb": "^2.2.25",
    "monk": "^4.0.0",
    "jade": "~1.11.0",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2"
  }
}

ternimalに戻って、npm installを実行し、追加したモジュールをインストールします。

ステップ２：MongoDBのデータを保存するディレクトリ作成

~/app1/dataとのディレクトリを作成

ステップ３：MongoDBデータベースの作成

~/mongodb/binに移動し、mongoのパスを設定&サーバ起動します。
mongod --dbpath ~/app1/data/

もう一つのternimalを開き、app1というデータベースを作成
use app1db

ステップ４：データベースにデータを追加

mongodbで扱えるデータのフォマットはjson形式です。

{
 user:user1,
 e-mail:user1@gmail.com
}

上記のデータをapp1dbに追加します。

db.usercollection.insert({"user":"user1","e-mail":"user1@gmail.com"})

ステップ５：app1dbとapp1とを紐付ける

~/app1/app.jsの中、最初の数行を確認ください。

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

mongodbと紐付けるように、下記コードを追加

// New Code
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/app1db');

次には、app1dbがapp1にアクセスされるように設定

app.use(function(req,res,next){
    req.db = db;
    next();
});

というコードを

app.use('/', index);
app.use('/users', users);

の上にインサートします。

ステップ６：app1dbにあるデータをapp1から取得

~/app1/routes/index.jsを開き、下記コードを追加します。

/* userlist htmlページを作成 */
router.get('/userlist', function(req, res) {
    var db = req.db;
    var collection = db.get('usercollection');
    collection.find({},{},function(e,docs){
        res.render('userlist', {
            "userlist" : docs
        });
    });
});

~/app1/views/にuserlist.jadeを新規作成し、下記コードを入れます。ここにjadeエンジンを使っているので、インテントを注意してください。

extends layout

　　block content
    　　　　h1.
       　　　　　 User List
  　　　　  ul
     　　　　　   each user, i in userlist
       　　　　 　　  　  li
            　　　　　　　　    a(href="mailto:#{user.e-mail}")= user.user

ステップ７：取ってきたデータを確認

npm start
http://localhost:3000/userlist

下記のページが出てきましたね。これはmongodbから取ってきデータですよ。

1時間でNode+Express+MongoDBを使ったweb appを作りましょう