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

MEANスタックを用いたWebアプリの開発方法について紹介していく連載。今回は、サーバーサイドJavaScriptのNode.js用MVCフレームワーク「Express」についての概要、インストールとひな型作成の方法を紹介します。次世代フレームワーク「Koa」の紹介も。

[中村修太，クラスメソッド株式会社]

今回の主な内容

• MVCフレーワーク「Express」とは
• MEANスタックにおけるExpress
• Expressの主な機能【1】ルーティング
• Expressの主な機能【2】テンプレートエンジン
  • 「Haml」の影響を受けたJavaScript製テンプレートエンジン「jade」
  • 「ejs」に似た記述が可能なテンプレートエンジン「ect」
• Expressの主な機能【3】アプリのひな型を自動生成
• Expressのインストール
• express-generatorでひな型生成
  • package.json
  • app.js
  • index.jade
• テンプレートの実行確認
• 補足：Express開発チームによる次世代フレームワーク「Koa」とは
• 次回は、Expressの機能やミドルウエアについての詳細

連載目次

　前回の「いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール」において、サーバーサイドJavaScript実行環境であるNode.jsについて基本的な説明を行いました。また、その周辺ツールであるnpm、Gulpを含めた環境のセッティングも行い、Node.jsを用いてMEANスタックアプリ開発ができる状態になったと思います。

　本記事では上記環境を用いて説明していくので、実際にサンプルを動かしたい場合には前回の記事を読んで環境を作成しておきましょう。

　今回はサーバー側のMVCフレームワーク、「Express」について解説します。

MVCフレーワーク「Express」とは

　「Express」とは、Node.js上で動作するWebアプリのフレームワークです。

Express

　Webアプリを構成する上で必要な機能がそろっており、ルーティングやビューヘルパー、セッション管理の機能もデフォルトで提供しています（※永続的なセッション管理には「Redis」などのデータストアが必要な場合もある）。

　また、ミドルウエアとしての機能を使用し、Expressの機能を独自に拡張することもできます。

　2015年現在、バージョン4が主流となっており、Node.jsでMVCフレームワークといえば一番に名前が挙がるほどメジャーなフレームワークです。

MEANスタックにおけるExpress

　MEANスタックアプリにおけるExpressは、次の図にあるようにNode.js上で動作するMVCフレームワークとして、クライアント（AngularJS経由）からリクエストを受け取り、ロジックを処理して（場合によってはデータストアにアクセスする）レスポンスを返す役割を持っています。

　では次に、Expressの持つ基本的な機能について解説していきます。

Expressの主な機能【1】ルーティング

　前回のNode.jsの動作確認時に、Webサーバーのサンプルを動かしたことを覚えているでしょうか。あのときは標準のhttpモジュールを使用し、createServer関数を使ってレスポンスを記述しました。

//httpモジュールをインポート
var http = require('http');
 
//Webサーバーの設定
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(3000);
 
console.log('Server running at http://localhost:3000/');

　上記サンプルでは、「http://localhost:3000」にアクセスすると、画面に「Hello World」と表示します（※コンテキストパス以下は何でもOK）。

　この程度のサンプルであればいいのですが、実際のWebアプリケーションではHTTPメソッドやパスに応じて、さまざまな処理をする必要があります。先ほどと同じ処理をExpressで記述した場合、以下のようになります。

//expressモジュールをインポート
var express = require('express');
var app = express();
 
//ルーティング設定
app.get('/', function (req, res) {
  res.send('Hello World');
});
 
//以下、ルーティング情報があればここに追記していく
 
app.listen(3000);
console.log('Server running at http://localhost:3000/');

　Express用モジュールをrequireして初期化した後、getメソッドを使用し、処理を記述しています。このように、パス（HTTPメソッドも含む）と処理を簡単に関連付けることができます。

　また、パス部分に正規表現を使用することもできます。

//localhost:3000/<数値>の場合に実行されるルート
app.get(/^\/[0-9]+$/, function(req, res) {
  res.send('regexp');
});

　さらに、パス名で「:｛名前｝」と記述された場合には、paramsを使用して取得することが可能です。

app.get('/user/:userId/item/:itemId', function(req, res) {
  res.send('userId:' + req.params.userId + ",itemId:" + req.params.itemId);
});