連載
» 2015年03月04日 18時00分 公開

MEANスタックで始めるWebアプリ開発入門(3):Node.jsのMVCフレームワーク「Express」の基礎知識とインストール (3/3)

[中村修太,クラスメソッド株式会社]
前のページへ 1|2|3       

express-generatorでひな型生成

 先ほども少し出てきましたが、「express-generator」というモジュールを使用することで、アプリのひな型を生成できます。expressコマンドでひな型が生成可能になっており、オプションを付けることで、ビューテンプレートを「ejs」「jade」「handlebars」「hogan」から選択することもできます(※デフォルトは「jade」)。

 ではexpress-generatorを使ってみましょう。まずはexpress-generatorをグローバルインストールします。

% npm install -g express-generator

 expressコマンドでひな型を生成します。ここでは、「express4gen」という名前のアプリを生成しています。

% express express4gen
   create : express4gen
   create : express4gen/package.json
   create : express4gen/app.js
・
・
% cd express4gen && npm install #アプリのモジュールをインストール
・
・
%npm start #ひな型アプリの起動

 それでは、express-generatorで生成されたソースを少し見ていきましょう。

package.json

 package.json(npmで使用するパッケージ管理のための設定ファイル)を見ると、scriptsフィールドにアプリ起動時(npm start)のコマンドが記述してあります。

  "scripts": {
    "start": "node ./bin/www"
  },

 「bin/www」ファイルを実行していますね。このファイルがアプリのエンドポイントになっています。

 wwwファイルでは主にエラーハンドリング処理やサーバーの起動をしています。実際にルーティング情報やテンプレートエンジンの指定は、wwwファイルで読み込んでいるapp.jsに記述してあります。

app.js

 次に、app.jsを見てみましょう。app.jsではサーバーで使用する各種ミドルウエアを読み込んだり、ルーティング情報の設定を行ったりしています。

 app.jsの25行目付近にある、次のコードを見てください。

・
・
//ルーティング情報の設定
app.use('/', routes);
app.use('/users', users);
・
・

 「app.use('/', routes);」と書いてあるコードがあります。これがルーティング情報の設定になり、このコードでは「/」以下のルーティング設定を行います。

 その下にある「app.use('/users'〜」というコードは、「/users」以下のルーティング設定です。routes変数は、routes/index.jsでルーティング情報を定義しているRouterオブジェクトです。

 「routes/index.js」の中身を見てみましょう。「/」以下のパスにアクセスされた際の具体的なルーティング情報を定義しています。

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

 「/」(http://localhost:3000/)へリクエストしたとき、render関数を呼び出してビューのレンダリングを指示しています。ここで呼び出されるビューはviews/index.jadeです。

index.jade

 画面に表示されるindex.jadeは下記のように記述されています。

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

 先頭に「extends layout」と記述してありますが、これはjadeの「テンプレート継承」と呼ばれる機能です。extendsを使用すると、指定したファイル(ここでは「views/layout.jade」)を継承して使用できます。

 ここではlayout.jadeの「block content」と記述してある部分が、index.jadeのblock content部分に置き換わります(blockには任意の名前を付けることが可能)。また、「#{title}」と書いてある部分は、routes/index.jsでrenderの第2引数に渡されたオブジェクトです。

テンプレートの実行確認

 では「http://localhost:3000/」にブラウザーでアクセスしてみましょう。先ほど解説したように、ルーティングの定義に従ってjadeファイルがレンダリングされ、下記画面が表示されます。

実行結果

 以上がExpressの基本的な動作です。

補足:Express開発チームによる次世代フレームワーク「Koa」とは

 「Koa」とは、Expressの開発者であるTJ Holowaychuk氏も含めたExpress開発チームによって現在開発中のフレームワークです。

 Node.jsの次期バージョン(安定版はv0.12)から使用できるgenerator/yieldの機能を用いて処理を記述でき、callbackを極力減らすことができます。

 Koaは、本連載で使用しているNode.js v0.10系では動作しません。実際に動かしたい場合、Node.js v0.11系(開発版〜をインストールして「--harmony」オプションを付けて実行するか、「io.js」を使いましょう。

 Koaはnpmモジュールなので、他のものと同じくnpmでインストールできます。

% npm install koa

 実際のKoaのコードは次のようになります。

var koa = require('koa');
var app = koa();
 
// logging
app.use(function *logging(next) {
  console.log("start date:" + new Date());
  yield next;
  console.log("end date:" + new Date());
});
 
// http response
app.use(function *resp() {
  this.body = 'hello koa!'
});
 
app.listen(3000);

 このサンプルでは、リクエストが来ると「hello koa!」文字列をbodyに設定し、3000番ポートでサーバーを起動します。app.useを使用すると、expressと同じようにミドルウエアを組み込むことができます。

 「function *」という記述がgenerator関数の定義で、yieldを使うことで戻り値を返すことができます。yieldは通常のreturnと違い、関数を中断して続きから処理を再開可能にします。Koaでは、この仕組みを利用し、app.useを呼び出した順番に処理を適用できます。

 ちなみに、先ほどExpressで使ったようなルーティングの定義はデフォルトで用意されていないので、「koa-route」というミドルウエアを別途インストールして使用します。


次回は、Expressの機能やミドルウエアについての詳細

 今回はサーバー側のMVCフレームワーク、「Express」の基本的な使い方について解説しました。ExpressはWebアプリに必要な機能に加え、便利なルーティング機能やひな型の生成機能も持っているので、インストールすればすぐにWebアプリが実装できます。

 次回は、本記事で紹介できなかったExpressの機能やミドルウエアについて詳しく紹介する予定です。

著者紹介

中村修太(なかむら しゅうた)

中村修太

クラスメソッド勤務の新しもの好きプログラマーです。数年前に東京から山口県に引っ越し、現在もリモート勤務しています。最近の趣味は空手とぬか漬け作り。


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。