連載
» 2015年05月11日 05時00分 UPDATE

MEANスタックで始めるWebアプリ開発入門(4):Node.jsのMVCフレームワーク「Express」における静的ファイル、ルーティング定義、セッション管理、エラー処理 (1/2)

MEANスタックを用いたWebアプリの開発方法について紹介していく連載。今回は、Expressを使ったWebアプリ開発に必要な4つの機能として、HTMLやCSS、JavaScriptなどの静的ファイルの使い方、HTTPメソッドや正規表現を使ったルーティング定義、MemoryStoreやRedisを使ったセッション管理、エラーハンドリングを紹介する。

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

Expressを使ったWebアプリ開発に必要な4つの機能

「MEANスタックで始めるWebアプリ開発入門」のインデックス

連載目次

 前回の記事、『Node.jsのMVCフレームワーク「Express」の基礎知識とインストール』では、Node.js上で動作するMVCフレームワーク、「Express」の概要から基本的な使い方について紹介しました。今回は引き続き、Expressの機能について解説していきます。サンプルアプリを通じて、Webアプリ開発で必要になるであろう、Expressの機能4つについて確認していきます。

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

Expressの動作確認用アプリのひな型を作成

 まずは、動作確認用アプリのひな型を作成しましょう。「express-sample」という名前でディレクトリを作成し、npmでexpressモジュールをインストールします。

% mkdir express-sample && cd express-sample
% npm install express

 「express-sample」ディレクトリに、下記の内容で「app.js」を作成してください。

//express-sample/app.js
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/');

 「app.js」が記述できたらnodeコマンド(node app.js)でアプリを起動し、「http://localhost:3000」にアクセスできることを確認してください。

 この後のサンプルは、いま作成したアプリに対して実装をしていきます。

【1】HTMLやCSS、JavaScriptなどの静的ファイルを使用する

 Expressでは当然のことながら静的ファイルを扱うことも可能です。その際、staticミドルウエアを使用してHTMLやCSS、JavaScriptなどの静的ファイルを簡単に使えます。

 staticミドルウエアは下記のように使用できます。

express.static(path[, option])

 pathには静的ファイルを公開したいディレクトリパスを指定します。また、optionには以下のプロパティを指定できます。

  • hidden:hiddenファイルの転送を許可する。デフォルトは「false」
  • index:デフォルトのファイル名。デフォルトは「index.html」
  • maxAge:ブラウザーキャッシュをミリ秒で指定できる。デフォルトは「0」
  • redirect:パスの最後に「/」があるときにリダイレクトする。デフォルトは「true」

 では静的ファイルを配置してアクセスしてみましょう。

 まずは「express-sample」ディレクトリに「public/images」ディレクトリを作成し、そこに適当な画像ファイル(img1.png)を配置します。

 先ほどのapp.jsにstaticミドルウエア設定を追加します。

//express-sample/app.js
var express = require('express');
var app = express();
//static ミドルウエア設定を追加
app.use(express.static('public'));
//ルーティング設定
app.get('/', function (req, res) {
  res.send('Hello World');
});
app.listen(3000);
console.log('Server running at http://localhost:3000/');

 app.jsの修正が完了したら、nodeコマンドでアプリを起動し、「http://localhost:3000/images/img1.png」にアクセスします。ブラウザーに画像が表示されましたね。このように、staticモジュールを使用すれば静的ファイルを使用できます。

【2】HTTPメソッドや正規表現を使ったルーティング定義

 Expressでは、さまざまな方法でルーティングを設定できます。

HTTPメソッドに応じた定義

 サンプルアプリでは、「/」(http://localhost:3000/)にGETメソッドでアクセスすると、文字列が表示されました。その定義は下記の通りです。

app.get('/', function (req, res) {
  res.send('Hello World');
});

 ここで次の定義をapp.jsに追加してみましょう。post関数を使用すれば、POSTメソッドに対応したルーティングを定義できます。

app.post('/post', function (req, res) {
  res.send('POST request!')
});

 また、特定のパスに対して全てのメソッドのルーティングを定義したい場合は、all関数を使用してください。

app.all('/all', function (req, res, next) {
  console.log('All Request!')
  next();
})

正規表現を使用した定義

 ルーティングに指定できるパス情報は、正規表現を使用することもできます。ここでは、「?」「+」「*」を使ってみましょう。

 URLに「?」を使用した場合、その直前の文字の0回または1回の繰り返しを意味します。下記サンプルの場合、URLは「/abcd」か「/acd」がマッチします。

app.get('/ab?cd', function(req, res) {
  res.send('ab?cd or acd');
});

 「+」の場合は直前文字を1回以上繰り返したものがマッチするので、下記サンプルでは「/abcd」「/abbcd」「/abb……cd」がマッチします。

app.get('/ab+cd', function(req, res) {
  res.send('ab+cd');
});

 「*」を使用することも可能です。下記サンプルは「/abcd」や「/ab{任意の文字列}cd」にマッチします。

app.get('/ab*cd', function(req, res) {
  res.send('ab*cd');
});

 正規表現リテラルを使用してルーティングを定義するケースもよくあります。下記ケースでは「/aaa」以下どんなパスでもマッチします。

app.get(/aaa/, function(req, res) {
  res.send('/aaa/*');
});

 以上のように、Expressのルーティング定義はシンプルかつ柔軟に使用可能です。下記ドキュメントも参考にしてみてください。

       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

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

メールマガジン登録

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