検索
連載

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

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

[中村修太，クラスメソッド株式会社] PC用表示 関連情報
Share
Tweet
LINE
Hatena

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のルーティング定義はシンプルかつ柔軟に使用可能です。下記ドキュメントも参考にしてみてください。

Copyright © ITmedia, Inc. All Rights Reserved.

　　　　　　 | 次のページへ
ページトップに戻る