プロジェクト作成

こちらを参考にしてみた。
http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/

node.js、expressはインストール済みとして進めます。
MacOSXで作業していますが、他OSでもあまり変わらないと思います。

$express nodetest

nodetestというディレクトリが出来るので移動します。
そこにpackage.jsonというファイルがあるので
mongodbとmonkを追加します。
mongooseが有名ですが、ここではmonkを使います。
理由は参考にした先がmonkだから。。

package.json

{
  "name": "nodetest",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.12.0",
    "cookie-parser": "~1.3.4",
    "debug": "~2.1.1",
    "express": "~4.12.2",
    "jade": "~1.9.2",
    "morgan": "~1.5.1",
    "serve-favicon": "~2.2.0",
    "mongodb": "*",
    "monk": "*"
  }
}

追加したのは末尾の２項目です。
実際の内容はexpressのバージョンによって変わってくると思います。

npm installコマンドでpackage.jsonにしたがってインストールします。

$npm install

ここでmonddb用のディレクトリを作っておきます。
まだ要らないけど。

$mkdir data

下記コマンドでWebサーバとして動きます。

$npm start

http://localhost:3000/
にアクセスしてみると"Welcome to express"というメッセージが出ています。

ハローワールド

とりあえず自動で生成されたapp.jsを開いてみると既に60行ほどのコードが出力されています。

app.js

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

ここがルーティングの定義で「/」以下にアクセスしたときの動作を
route/index.jsで定義します。
今はusersは無視しておきます。

route/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;

自動生成した時点のindex.jsの内容が上記の通りです。
これは「/」にアクセスするとviews/index.jadeで描画するということになります。
テンプレートとして明示的に指定した場合はjadeではなくejsなど。

ここにハローワールド用のルーティングを追加してみましょう。

route.index.js

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

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

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

module.exports = router;

"GET Hello World page"のブロックを追加しました。
/helloworldにアクセスするとhelloworld.jadeで描画するという指定です。
helloworld.jadeというファイルはもちろん存在しないのでviewsディレクトリの下に新規作成します。

views/helloworld.jade

extends layout

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

jadeはインデントで動作が変わるので注意。
1行目はlayout.jadeの内容を継承しますという指定。
layout.jadeの中に"block content"という箇所があるので
それがここで記述した"block content"以下に置き換わります。

ここで再度npm startして、
http://localhost:3000/helloworld
にアクセスすると「Hello, world!」と出ていれば成功。

今回はここまで。