Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

一、環境を構築

ステップ1:Node.jsをインストール

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

ステップ2:Express & Express Generatorをインストール

npm -g express
npm -g express-generator

ステップ3:MongoDBのインストール

https://www.mongodb.com/

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

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

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

express app1

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

ステップ2:app1のフォルダーに移動

cd ~/app1

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

npm install

ステップ4:appを開始

npm start

ステップ5:web appの稼働確認

http://localhost:3000/

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

ステップ6: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のデータを取得

ステップ1:サーバーを閉じて、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を実行し、追加したモジュールをインストールします。

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

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

ステップ3:MongoDBデータベースの作成

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

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

ステップ4:データベースにデータを追加

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

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

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

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

ステップ5: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);

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

ステップ6: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

ステップ7:取ってきたデータを確認

npm start
http://localhost:3000/userlist

下記のページが出てきましたね。これはmongodbから取ってきデータですよ。
image.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

hairui
System Engineer, Application Developer, Data Analyst, Solution Delivery
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした