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から取ってきデータですよ。
###以上でNode+Express+MongoDBのweb appを作りました。