Node.js で小規模なアプリケーションを開発する方法 その2

2日目も無事にやる気が維持して続きました、ストックしてもらえると嬉しいですね。皆さんに役立ててもらえるような記事を書けるように頑張ります。

# 現在のappディレクトリの構成
現在のappディレクトリの構成は下記のようになっているかと思います。

```
app
├ bin
│ └ www
├ routes
│ └ pages.js
├ views
│ └ pages
│   └ anonymous-home.jade
├ index.js
└ package.json
```

前回は、とにかく最小限のファイルで動作確認出来るようにと色々とはしょってしまったので、いくつかファイルを加えていこうと思います。

# 設定ファイルを格納するconfigディレクトリ
データベースの設定やCookie/Sessionの設定を格納するためのディレクトリを作成します。

```
cd app
mkdir config
```

```config``` ディレクトリ内にWebサイトの設定を格納するための設定ファイルを ```site.json``` という名称で作成します。

```
touch config/site.json
```

```site.json``` の内容は下記の通りです。

```site.json
{
  "development": {
    "baseUrl": ""
  },
  "test": {
    "baseUrl": ""
  },
  "production": {
    "baseUrl": ""
  }
}
```

```app/index.js``` を編集して ```baseUrl``` を設定ファイルから読み込むようにします。

```app/index.js(変更前)
'use strict';

var env = process.env.NODE_ENV || 'development'

var url = require('url')
var path = require('path')
var morgan = require('morgan')
var express = require('express')
var serveStatic = require('serve-static')
var proxyMiddleware = require('proxy-middleware')
var pages = require('./routes/pages')

module.exports = factory

function factory(options) {
  options = options || {}

  var staticPath = options.staticPath
  var app = express()

  app.set('strict routing', true)
  app.set('views', path.join(__dirname, 'views'))
  app.set('view engine', 'jade')

  app.locals.baseUrl = ''

  app.use(morgan('dev'))
  app.get('/', pages.anonymous.home())

  if (env === 'development') {
    app.use('/static', proxyMiddleware(url.parse('http://127.0.0.1:8080')))
  } else {
    app.use('/static', serveStatic(staticPath))
  }

  return app
}

```

```app/index.js(変更後)
'use strict';

var env = process.env.NODE_ENV || 'development'

var url = require('url')
var path = require('path')
var morgan = require('morgan')
var express = require('express')
var serveStatic = require('serve-static')
var proxyMiddleware = require('proxy-middleware')
var pages = require('./routes/pages')

var siteConfig = require('./config/site')[env]

module.exports = factory

function factory(options) {
  options = options || {}

  var staticPath = options.staticPath
  var app = express()

  app.set('strict routing', true)
  app.set('views', path.join(__dirname, 'views'))
  app.set('view engine', 'jade')

  app.locals.baseUrl = siteConfig.baseUrl

  app.use(morgan('dev'))
  app.get('/', pages.anonymous.home())

  if (env === 'development') {
    app.use('/static', proxyMiddleware(url.parse('http://127.0.0.1:8080')))
  } else {
    app.use('/static', serveStatic(staticPath))
  }

  return app
}

```

変更点は下記の通りです。

```
var siteConfig = require('./config/site')[env]
```

```
app.locals.baseUrl = siteConfig.baseUrl
```

# bin/wwwをもう少しマシにする

```staticPath``` を設定してなかった ```bin/www``` を編集します。

```bin/www(変更前)
#!/usr/bin/env node

'use strict';

var port = Number.parseInt(process.env.PORT || '3000', 10)

var http = require('http')
var factory = require('../index')

var app = factory()
var server = http.createServer(app)

server.listen(port, function () {
  console.log('Listening on ' + port)
})

```

```bin/www(変更後)
#!/usr/bin/env node

'use strict';

var port = Number.parseInt(process.env.PORT || '3000', 10)

var http = require('http')
var path = require('path')
var factory = require('../index')

var app = factory({
  staticPath: path.join(__dirname, '../../static/dist'),
})
var server = http.createServer(app)

server.listen(port, function () {
  console.log('Listening on ' + port)
})

```

変更点は下記の通りです。

```
var path = require('path')
```

```
var app = factory({
  staticPath: path.join(__dirname, '../../static/dist'),
})
```

# Jade のレイアウト機能を使う

まずはviewsのディレクトリ構造を変更します、下記は新しく作成されるファイルです、内容は現時点では空で良いです。

- layouts/2-column/admin.jade
- layouts/2-column/base.jade
- layouts/2-column/members.jade
- layouts/full-width/admin.jade
- layouts/full-width/base.jade
- layouts/full-width/members.jade
- layouts/default.jade

```
views
├ layouts
│ ├ 2-column
│ │ ├ admin.jade
│ │ ├ base.jade
│ │ └ members.jade
│ ├ full-width
│ │ ├ admin.jade
│ │ ├ base.jade
│ │ └ members.jade
│ └ default.jade
└ pages
  └ anonymous-home.jade
```

```default.jade``` の内容はほとんど ```anonymous-home.jade``` のコピーでOKです。

```default.jade
doctype
html(lang='ja')
  head
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title Nippo
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap.min.css')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap-theme.min.css')
    block style
    script(src='#{baseUrl}/static/js/vendor/modernizr-2.8.3.min.js')
  body
    block content
    script(src='#{baseUrl}/static/js/vendor/jquery-1.11.2.min.js')
    script(src='#{baseUrl}/static/js/vendor/bootstrap.min.js')
    script(src='#{baseUrl}/static/js/bundle.js')
    block script
```

ポイントは下記の3点です。

```
block style
```

```
block content
```

```
block script
```

簡単なfull-widthの方から終わらせていきたいと思います。```layouts/full-width``` ディレクトリ内のファイルの内容を下記に記載します。

```full-width/base.jade
extends ../default

block content
  block main
```

```full-width/admin.jade
extends ./base
```

```full-width/members.jade
extends ../base
```

次に2-columnの方を記載します、サブカラムの内容は適当です。

```2-column/base.jade
extends ../default

block content
  .row
    .col-md-push-9.col-md-3
      block sub
    .col-md-pull-3.col-md-9
      block main
```

```2-column/admin.jade
extends ./base

block sub
  ul.nav
    li
      a(href='#{baseUrl}/admin/lorem/') Lorem
    li
      a(href='#{baseUrl}/admin/ipsum/') Ipsum
    li
      a(href='#{baseUrl}/admin/dolor/') Dolor
    li
      a(href='#{baseUrl}/admin/sit/') Sit
    li
      a(href='#{baseUrl}/admin/amet/') Amet
```

```2-column/members.jade
extends ./base

block sub
  ul.nav
    li
      a(href='#{baseUrl}/members/quick/') Quick
    li
      a(href='#{baseUrl}/members/brown/') Brown
    li
      a(href='#{baseUrl}/members/fox/') Fox
```

最後に```pages/anonymous-home.jade```を編集します。

```pages/anonymous-home.jade(変更前)
doctype
html(lang='ja')
  head
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title Nippo
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap.min.css')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap-theme.min.css')
    script(src='#{baseUrl}/static/js/vendor/modernizr-2.8.3.min.js')
  body
    main Nippo
    script(src='#{baseUrl}/static/js/vendor/jquery-1.11.2.min.js')
    script(src='#{baseUrl}/static/js/vendor/bootstrap.min.js')
    script(src='#{baseUrl}/static/js/bundle.js')
```


```pages/anonymous-home.jade(変更後)
extends ../layouts/default

block content
  main Nippo
```

# .gitignoreを追加する
```app``` と ```static``` のそれぞれのディレクトリ内に ```.gitignore``` を作成します。

```app/.gitignore
/node_modules/

```

```static/.gitignore
/dist/
/node_modules/

```

明日は```static```ディレクトリへのGulpの導入やアプリケーションサーバのProductionモードでの動作について解説したいと思います。