Node.js | Expressフレームワーク

Node.jsで効率的なWebアプリケーションを開発するなら、そのためのフレームワークを導入するのが最もよい。ここではNode.jsの代表的なWebアプリケーションフレームワークであるExpressをインストールして利用してみる。
Tags:

フレームワークの利点とExpress

これまでWebアプリケーションの基本的な機能に対する処理方法について説明してきた。だが正直に言えば、「思ったより面倒だ」と感じたかもしれない。

フレームワークの必要性

何をするにしても、すべてを細かく自分で処理として書かなければならない。EJSを導入してテンプレートを使えるようにはなったが、テンプレートファイルを事前にロードして、それをレンダリングする処理を自分で書く必要がある。複数ページを用意するなら、URLベースのルーティング処理も自分で作っておかなければならない。POSTされたデータはイベントを使ってすべて取り出し、それをデコードして必要な値を使えるようにする処理も自分で書かなければならない。これでは多数のページを持つ複雑なWebアプリケーションを作ろうという意欲が失われるだろう。

これらの作業の多くは、「Webアプリケーションなら必ず必要なもの」でもある。であれば、Webアプリケーションが使う機能をあらかじめすべて実装し、Webアプリケーションとしての基本システムを用意しておけば、より簡単に開発できるようになるはずである。

このような考えから生まれたものが、一般に「Webアプリケーションフレームワーク」と呼ばれるものである。単に機能を集めたライブラリではなく、Webアプリケーションとしての基本システムそのものを提供するプログラムである。

Expressフレームワーク

Node.jsにも、このWebアプリケーションフレームワークは用意されている。その中でも最も広く使われているのが「Express」である。

ExpressはEJSと同じくNode.jsパッケージとして提供されている。npmで簡単にインストールでき、これを組み込んだサーバープログラムを作成できる。また、テンプレートエンジンにEJSを利用できるため、これまで作成したEJSテンプレートをそのまま再利用できる。

ExpressにはWebアプリケーションのための基本システムが構築されており、そこに必要な処理を追加していく。Node.jsだけで実装する場合と同様に、イベント処理を組み込んでいくという基本的な開発スタイルは変わらないが、用意されているさまざまなオブジェクトを利用して、必要な処理をとても簡単に組み合わせられる。

Expressのサイトは次のとおりである。ここにはドキュメントなども公開されている。ただしnpmを利用するため、ここからライブラリファイルなどをダウンロードする必要はない。

http://expressjs.com/

Expressを利用したWebアプリケーション作成

それでは実際にExpressを利用してみよう。Expressを使うには、まずnpmを使用してインストールする。まずコマンドプロンプト、Mac OS Xならターミナルを起動する。

Expressをインストールする場合に考えるべきことは、「Expressをどこにインストールするか」である。これには次の2つがある。

Node.jsモジュールとしてインストール

Node.js本体のモジュールとして保存する。こうすれば、どのWebアプリケーションでも使用できる。しかし、アプリケーションをサーバーに配置するとき、そのサーバーにExpressがなければ動作しない。

Node.jsモジュールとしてインストールするのは簡単である。EJSと同じように、コマンドプロンプトで次のように実行すればよい。

$ npm install express

Webアプリケーションフォルダにインストール

この方式は、アプリケーションを作るたびに毎回インストールしなければならない。ただし、アプリケーションにすべてのファイルが含まれるため、サーバーへ配置したとき、そのサーバーにExpressがなくても問題なく動作する。

実際に作成したアプリケーションを配布することを考えるなら、アプリケーションに必要なモジュールをすべてインストールするのがよい。ここではその方式で簡単なアプリケーションを作ってみよう。次の手順で作業を進める。

1. アプリケーションフォルダを用意する

まずアプリケーションを作るフォルダを用意する。ここではデスクトップにexpressappというフォルダを用意することにする。

コマンドプロンプトを起動する場合は、cdで適当なインストールしたいフォルダへ移動し、次のように実行するとフォルダが作成される。

mkdir expressapp

2. コマンドプロンプトでフォルダへ移動

コマンドプロンプト、Mac OS Xならターミナルを起動する。そしてcdコマンドでexpressappフォルダへ移動する。

3. npmを初期化

npmを初期化する。これは次のように実行する。

npm init

実行すると、名前、バージョン、説明文、エントリーポイント、テストコマンド、Gitリポジトリ、キーワード、作者、ライセンスなどを順番に聞かれる。よく分からない場合はすべてそのままEnterキーを押す。これでpackage.jsonファイルが生成される。

4. Expressをインストール

Expressをインストールする。これは次のように実行する。

npm install express --save

これでアプリケーションのexpressappにnode_modulesというフォルダが作られ、その中にexpressというフォルダが保存される。これがExpressファイルが保存されるフォルダである。

5. EJSをインストール

続いて、Expressでテンプレートエンジンとして使用するEJSをインストールする。やはりnpmを使って次のように実行する。

npm install ejs

これでnode_modulesフォルダにejsフォルダが作られ、そこにファイルが保存される。

 

これでWebアプリケーション作成の準備ができた。以後はここにスクリプトやテンプレートなどの具体的なコードを追加し、アプリケーションを構築していけばよい。

Expressを利用した基本スクリプト

ではExpressを利用したアプリケーションのスクリプトを作成する。まずExpressを使う最も基本的なスクリプトを考えてみる。

基本スクリプトの作成

テキストエディタを使って、次のスクリプトを作成する。そして先ほどのexpressappフォルダにapp.jsという名前で保存する。

var express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
})
 
var server = app.listen(3000, function(){
    console.log('Server is running!');
})

保存したら、コマンドプロンプトでこのapp.jsがあるフォルダ、つまりexpressappフォルダへ移動し、次のように実行する。

node app.js

そしてブラウザで次を開いてみる。

http://localhost:3000/

画面にHello World!というテキストが表示される。まだテンプレートでもなく、単にテキストを出力しているだけの簡単な例だが、「Expressを使うアプリケーション」の基本スクリプトは完成した。

Express基本処理の整理

この例ではExpressを利用しているため、従来のスクリプトとは書き方が変わった。ポイントを整理する。

Expressをロードする

var express = require('express');

まずExpressライブラリをロードする。これはrequire('express')で行うことができ、ロードされた変数expressを使ってExpressの機能を利用できる。

Express Applicationオブジェクトを作る

var app = express();

最初に実行するのは、アプリケーションのオブジェクトを用意することである。これはexpress関数を呼び出す。この関数はExpressアプリケーションであるApplicationオブジェクトを生成して返す。

GETを登録する

app.get("/", function(req, res){...中略...});

続いてGET登録を行う。これはHTTPのGETによるアクセスを登録する。第1引数にはアクセスするパス、第2引数には実行する関数をそれぞれ指定する。これにより、第1引数のパスにアクセスがあったとき、第2引数の関数が呼び出される。

第2引数のコールバック関数には、requestとresponseオブジェクトがそれぞれ引数として渡される。これはすでによく知っているリクエストとレスポンスのオブジェクトである。

このgetメソッドに、必要なだけアクセスするパスと関数を登録していけば、いくらでもページを追加できる。これで面倒なルーティング処理などが不要になる。

ポートをlistenする

app.listen(3000, function(){...中略...});

最後に、ポート番号を指定してlistenを呼び出す。これで指定したポート番号で待機状態を開始する。コールバック関数で、待機開始後の処理を用意できる。

これでサーバー起動処理が完了する。以後は、どこかから指定されたパスにアクセスがあると、その処理が実行される。

Node.jsだけで作っていたものと比べると、十分にすっきりしたスクリプトになった。Expressを使えば、十分に効率よくWebアプリケーションを作成できる。

Expressでテンプレートを使用する

まず、Expressを利用した基本的な処理の流れはだいたい分かった。続いてテンプレートを利用して表示してみる。テンプレートファイルを用意し、app.jsスクリプトを修正すればよい。

テンプレートの準備

まずテンプレートから作成する。今回はtest.ejsというファイル名で作成する。以下にソースコードを示す。

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title><%=title %></title>
    <style>
    body { font-size:12pt; color:#000066; }
    h1 { font-size:18pt; background-color:#DDDDFF; }
    pre { background-color:#EEEEEE; }
    </style>
    </head>
<body>
    <header>
        <h1><%=title %></h1>
    </header>
    <article>
        <%-content %>
    </article>
</body>
</html>

今回作成したtest.ejsは、Webアプリケーションにそのまま配置するわけではない。Webアプリケーションのフォルダに新しくviewsというフォルダを用意し、このフォルダにtest.ejsを入れておく。

Expressでは、画面表示関連のテンプレートはこのようにviewsフォルダにまとめられる。配置場所やフォルダ名は変更できるが、デフォルトではviewsフォルダになっているため、ここではそのまま作成する。

作成したテンプレートは、基本的に前に使ったEJSテンプレートとほぼ同じである。

ここではヘッダー部分と本文に、<%=title %>というタイトルを出力するタグを用意し、コンテンツを表示するために<%-content %>というタグを用意している。Node.jsのスクリプトでは、これらのタグで出力するtitleやcontentのような変数に値を渡す方式で処理を用意すればよい。

テンプレートを利用した処理

ではNode.jsスクリプトを作成してみよう。app.jsを次のように作成する。

var express = require('express');
var ejs = require("ejs");
  
var app = express();
  
app.engine('ejs', ejs.renderFile);
  
app.get("/", function(req, res){
    res.render('test.ejs',  {title: 'Test Page',  content: 'this is test.'});
});
  
var server = app.listen(3000, function(){
    console.log('Server is running!');
})

再びnode app.jsでサーバーを起動し、localhost:3000にアクセスしてみる。テンプレートをレンダリングした表示が現れるはずである。

テンプレート利用のポイント

これでEJSを使ったテンプレート機能がExpressでも正しく使えるようになった。では修正点を確認してみよう。

EJSのロード

var ejs = require("ejs");

まず最初にrequireでEJSをロードする必要がある。これはすでに慣れた作業だろう。

テンプレートエンジンの設定

app.engine('ejs', ejs.renderFile);

テンプレートエンジンを設定する。これはApplicationオブジェクトのengineメソッドを使って設定する。第1引数はテンプレートファイルの拡張子、第2引数にはテンプレートエンジンのコールバック関数を設定する。このコールバック関数には、ejsオブジェクトのrenderFileプロパティを設定する。これでテンプレートエンジンの設定が完了した。

GETコールバック関数の準備

コールバック関数の中で行っているのは、EJSテンプレートを使ったページ表示である。responseのrenderメソッドを呼び出している。

res.render( テンプレートファイル, オブジェクト );

第1引数には使用するテンプレートファイル名を指定し、第2引数にはテンプレートに渡す変数名をキーとして値を連想配列にまとめて指定する。これでページがレンダリングされる。

注意すべきなのはテンプレートファイル名である。これはviewsフォルダに保存されていなければならない。ここでviews/test.ejsのようにviewsフォルダのパスを書く必要はない。ただtest.ejsというファイル名だけを指定すればよい。

Expressは自動的にviewsフォルダからファイルを検索できるようになっている。逆に、viewsフォルダではなくアプリケーションフォルダ内にファイルがある場合は見つからず、エラーが発生するので注意する。

これで、ひとまずExpressを使ったアプリケーションの基本が分かった。使い方さえ分かれば、Node.js単体で使うより全体が整理され、分かりやすくなる。