概要
前回の続きで 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 のソースに以下の修正を加えます。
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 ファイルを生成する。
<!DOCTYPE html>
<html>
<head>
<title><%= @title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<% content %>
</body>
</html>
index.ect の修正
デフォルトのファイルの拡張子を ect に変更し内容を以下のように修正する。
<% extend 'layout' %>
<h1><%= @title %></h1>
<p>Welcome to <%= @title %></p>
error.ect の修正
デフォルトのファイルの拡張子を ect に変更し内容を以下のように修正する。
<h1><%= @message %></h1>
<h2><%= @error.status %></h2>
<pre><%= @error.stack %></pre>
動作確認
以下のURLへアクセスしページが表示されればOKです。
注意事項
私が躓いた点をいくつか。。。。
ejsと ect では変数にアクセスする書き方が違うので注意する。
<h1><%= message %></h1>
<h1><%= @message %></h1>
※ @（アットマーク）が付くか付かないかの違い。
デフォルトで作成済の view ファイルの拡張子を全て ect に変更する。
error.ejs は使用していないから後で修正しようと思っていたらエラーを表示するのに使っており違うエラーが発生していて原因が特定できなかった。
まとめ
- ここまでは難しくない。
- 次は jquery、bootstrap を組込んでみる。
- その次に MongoDB へ接続をやってみる。
以上