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

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のインストール

https://www.mongodb.com/

以上で、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の稼働確認

http://localhost:3000/

にアクセスし、下記の画面が出ることを確認しましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/182933/314f643a-cefe-a3ad-98e9-7b9090ab293b.png)

##ステップ６：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から取ってきデータですよ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/182933/910c2582-57dc-ac6a-50a6-35561dc63b49.png)

###以上でNode+Express+MongoDBのweb appを作りました。

#参考：
https://closebrace.com/tutorials/2017-03-02/the-dead-simple-step-by-step-guide-for-front-end-developers-to-getting-up-and-running-with-nodejs-express-and-mongodb