Node.js 0.12.13
 nodist 0.7.2
 npm 3.5.2
 forever 0.15.1
 express-generator 4.13.1

■Express Prev Top Next
関連ページ:

今回はNode.jsのパッケージの一つであるExpressを使用します。Expressを使用するとMVCベースで開発が可能となります。
とりあえずExpressのGitHubのリンクを張っておきます。expressコマンドのオプションの一覧がのってますので必要に応じて参照してください。
expressjs/generator


まずは、コマンドプロンプト上で下記のコマンドを実行して、Expressパッケージをインストールします。
> npm install -g express-generator

他のサイトでは npm install -g express で紹介しているところがありますが、これでは動きません。どうもバージョンUpに伴って使用するパッケージが変わったようです。


次にWebサイトのひな型を作成します。-e オプションを指定すると、HTMLのテンプレートエンジンが選択できます。
ここではASP.NETっぽいコーディングができる EJS を指定します。
GitHubのコマンドリファレンスによると Jade がデフォルトで、他には Handlebars が指定できるようです。

また -c オプションを指定して、スタイルシートも指定します。
Sass( インデント記法 )と Stylus と Compass と LESS が指定できるようです。
ここでは JavaScript ベースの LESS を指定します。

コマンドプロンプト上でWebサイトを作成するディレクトリに移動してから、下記のコマンドを実行してください。ここではSample03というフォルダ内に作成します。
> express -e ejs -c less Sample03


コマンドプロンプト上でSample03に移動してから依存関係にあるモジュールをインストールします。
> npm install


Webサービスをforeverを使用してデーモン化して起動します。下記のコマンドを実行してください。
> forever start ./bin/www

指定するjavascriptはapp.jsではないことに注意してください。


最後にブラウザを起動して http://localhost:3000 とurlに入力して実行してください。
ブラウザ上でWelcom to Express と表示さればOKです。

※正しく表示できない場合は、タスクマネージャーからnode.exeを強制的に停止してから再度Webサービスを起動してみてください。


最後に生成されたExpressモジュールの構成について簡単に説明します。

1.bin フォルダ
このフォルダ内にはwwwというファイルが存在します。このファイルはWebサーバーを起動させるためのファイルです。
ファイルの中身をテキストエディッタで開いてみると、http.createServer()によるサーバーオブジェクトの生成、ポート番号を指定、エラーイベント、リスナー起動なんかやっています。
forever コマンドでWebサーバーを起動するために指定するファイルとなります。

2.node_modules フォルダ
このフォルダ内にはnode.jsの各種モジュールが格納されているだけなので説明は不要でしょう。

3.public フォルダ
このフォルダはWebサイト全体で共有するファイルをおくフォルダです。初期状態ではすっからかんですが、フォルダ名見ると画像ファイル、JavaScript、StyleSheetを置くフォルダであることがわかります。

4.routes フォルダ
このフォルダ内には文字通りルーティング、つまりurlごとに処理を振り分けるJavaScriptファイルを置きます。
ためしに下記のように変更してWebサーバーを再起動してみてください。

router.get('/', function(req, res, next) {
 ↓
router.get('/test', function(req, res, next) {
http://localhost:3000 でアクセスすると404エラーとなって正しく表示できないことが確認できると思います。
代わりに http://localhost:3000/test でアクセスすると正しく表示できるのが確認できると思います。

index.js をルートパスと指定しているところは app.js の

var routes = require('./routes/index');

app.use('/', routes);

です。/ つまりurl上でルートパスを指定するとroutesオブジェクトが呼び出されるが、その実際のパスは相対パスで ./routes/index.js を示すということです。( 拡張子は省略される )
ためしにindexをusersに変更して、http://localhost:3000 でアクセスすると respond with a resource と表示されることが確認できます。

なお、おそらくですが MVC パターンの Controller に相当するロジックもここで実装するものと思われます。

5.views フォルダ
ここにViewに相当するファイルをおきます。
HTMLのテンプレートエンジンにejsを使用しているため拡張子が.ejsとなっています。
ファイルを開いてみるとASP.NET でサーバーサイドの記述を行う際に指定する <% %> を使用して Controller 側で指定した モデル( というか JSON )の値を表示しているのがわかると思います。

ためしに routes/inde.js を開いて下記のように修正してWebサーバーを再起動してください。

  res.render('index', { title: 'Express' });
 ↓
  res.render('index', { title: 'Foo' });
http://localhost:3000 でアクセスすると Express が Foo に変わることが確認できると思います。


Prev Top Next
inserted by FC2 system