基礎から学ぶNode.js

第3回 Express.jsを使ったWebアプリケーションを構築

この記事を読むのに必要な時間:およそ 3 分

はじめに

前回までは,Node.jsについての基礎的な説明からnpmによるパッケージ管理まで,紹介してきました。今回から,いよいよNode.jsを使ったWebアプリケーションを実装していきます。前々回に単純なHTTPサーバの実装についてコードとともに紹介しました。あれをみるとわかるとおり,nodeが提供するHTTPサーバの機能はプロトコルに沿ったローレベルなものになっています。例えば,リクエストが来たら,そのURLパスに従った処理を実行するために,リクエストURIの解析から実装していかなくてはなりません。そういったことが簡単に定義して処理を書けるWebアプリケーションフレームワークがnodeにも存在します。本連載では,その代表格のExpressを使って実装してみたいと思います。

Expressのインストール

Express(Express.jsと表記されることが多い)は,非常に手軽にnodeを使ったWebアプリケーションを作成できます。まずインストールからです。npmを使ってこちらも簡単に行えます。生成ツールとしてその名の通りのコマンドexpressも提供するのでグローバルオプション付きで行ったほうが良いでしょう。

npm install -g express

expressはそれ自体が有用なライブラリを組み合わせて構成されています。HTMLやCSSのテンプレートエンジンは,選択することができます。Expressのバージョンは,執筆時点で最新の安定版である2.5.9を使用します。

ExpressでWebアプリの雛形を生成

HTMLテンプレートエンジンはJade,EJSやHaml.jsなどを,CSSテンプレートエンジンはStylusなどを選べます。今回は,HTMLのテンプレートエンジンにJSPやPHPと同じように使えるEJS(Embedded JavaScript)を,CSSのテンプレートエンジンはとくに今回は使わないので指定しません。

express -t ejs firstapp

とコマンドラインから実行するとカレントディレクトリにfirstappというディレクトリが作成されその中に一通りのファイルが生成されます。

このままだと依存するモジュールファイルがないので,

cd firstapp
npm install -d

として利用するモジュールをインストールします。

この時点で,

node app.js

とすることで,ポート3000番でnodeによるWebサーバが起動します。

ブラウザから「http://localhost:3000/」にアクセスすると,Welcome to Express のページが表示されることが確認できます。

では,app.jsの中身をみていきましょう。

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes');

var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes
app.get('/', routes.index);

app.listen(3000, function(){
  console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
});

先頭のModule dependencies項では,第1回で説明したとおり,モジュールのロードになります。expressモジュールをまずロードし,次にroutes/index.jsをロードします。拡張子.js自体が省略可能で,さらにindexも省略されています。これは紛らわしいので,ファイル名を「routes/main.js」にリネームして,requireの引数も./routes/mainと変更します。

続く処理は,expressのサーバ生成メソッドでappという変数にWebサーバの機能を参照するインスタンスをセットしています。

さらにConfigurationの項で,app.configureメソッドのコールバックで呼ばれる無名関数の中で,基本的な設定が行われています。この時点で確認しておきたいのは,viewsとしてテンプレートエンジンのファイルが置かれるディレクトリが,app.jsのある場所をカレントディレクトリとしてその中のviewsであること,静的ファイルが置かれるのは,publicであることです。画像ファイルやクライアント側のJavaScriptファイルといったものは,このpublicに置きます。そうすると,nodeのHTTPサーバからpublicをドキュメントルートとして参照できます。

その次のconfigureメソッドでは開発環境(development)とリリース環境(production)それぞれに限定した設定を定義します。初期定義では例外発生時のスタックトレースを開発環境でのみ出力するようにしています。諸々のビューキャッシュ機構などはproduction時のみ有効になります。これは,開発時はnodeの再起動無しにviews/内のテンプレートを編集してもそのまま反映される,ということを意味します。

Routesの項では,appのHTTPメソッド名と同様のメソッドget, post, put, delメソッド(DELETEに相当)を使ってそれぞれのHTTPメソッドと第1引数のリクエストパスに対して,第2引数の関数を呼び出すように紐付けします。

app.get('/', routes.index)は,先ほどリネームしたroutes/main.jsのexports.indexとして定義した関数を,「GET /」にバインドしています。

著者プロフィール

高橋俊光(たかはしとしみつ)

ティルフィン合同会社 代表。

メーカー企業でパッケージソフト開発などに携わった後,ティルフィン合同会社を設立しフリーエンジニアとして,RIAやスマートモバイルアプリとサーバーサイドと広い分野で開発に従事。iOSアプリ トレンドトピック,Newstrushをリリースしている。

コメント

コメントの記入