Node.js モジュール追加（Express） #Node.js

概要

前回の続きで Node.js で導入すると便利なモジュールの追加を行い、その導入手順を残します。

環境・前提条件

OS:Windows 8.1 Pro
Node.JS ver.5.3.0 導入済
MongoDB ver.3.2.0 導入済
Git ver.2.5.0 導入済

Express モジュール追加

Expressは Node.js で MVC を容易に実現することができるフレームワークになります。
サイトを構築する想定なので Express を導入します。

Node.js のモジュールを追加するには npm コマンドを使います。
Node.js command prompt を起動して以下のコマンドを実行します。

> npm -v
3.3.12

バージョンが表示されればOKです。

まずは express-genarator を導入します。
express コマンドを実行するには express-genarator が必要なので以下のコマンドを実行します。

>npm install express-generator -g

※ -g オプションを付けることによって、ローカル端末全体で express コマンドが使えるようになる。npmコマンドは -g を付けると端末全体、付けないとカレントディレクトリ配下への追加となる。

MVCサイト構築

express コマンドを使ってサイトの雛形生成からサイトの動作確認まで。

>mkdir c:\dev

>cd c:\dev

>express myapp -e ejs

>cd dev

>npm install

>npm start

※c:\dev フォルダを生成しその配下で上記のコマンドを実行

サイトの確認
以下のURLにアクセスすると確認ができます。
http://localhost:3000/

MVCサイト構築拡張

レイアウト機能を使いたいので ect モジュールを導入する。

ect モジュールの追加

>npm install ect

※c:\dev\myapp配下でコマンドを実行する。

app.js の修正

app.js のソースに以下の修正を加えます。

app.js

var ECT = require('ect');
app.set('view engine', 'ect');
app.engine('ect', ECT({ watch: true, root: __dirname + '/views', ext: '.ect' }).render);

layout.ect ファイルを生成する。

index.ejs の内容を元に新規に layout.ect ファイルを生成する。

layout.ect

<!DOCTYPE html>
<html>
  <head>
    <title><%= @title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
  <% content %>
  </body>
</html>

index.ect の修正

デフォルトのファイルの拡張子を ect に変更し内容を以下のように修正する。

index.ect

<% extend 'layout' %>
<h1><%= @title %></h1>
<p>Welcome to <%= @title %></p>

error.ect の修正

デフォルトのファイルの拡張子を ect に変更し内容を以下のように修正する。

error.ect

<h1><%= @message %></h1>
<h2><%= @error.status %></h2>
<pre><%= @error.stack %></pre>

動作確認

以下のURLへアクセスしページが表示されればOKです。

http://localhost:3000/

注意事項

私が躓いた点をいくつか。。。。

ejsと ect では変数にアクセスする書き方が違うので注意する。

サンプルEJS

<h1><%= message %></h1>

サンプルECT

<h1><%= @message %></h1>

※ @（アットマーク）が付くか付かないかの違い。

デフォルトで作成済の view ファイルの拡張子を全て ect に変更する。
error.ejs は使用していないから後で修正しようと思っていたらエラーを表示するのに使っており違うエラーが発生していて原因が特定できなかった。

まとめ

ここまでは難しくない。
次は jquery、bootstrap を組込んでみる。
その次に MongoDB へ接続をやってみる。

以上