はじめてのExpress.js　〜導入編(2)〜

こんにちは。フロントエンドエンジニアのkitoです。
前回、Node.jsで簡単なアプリを作成しました。今回からExpress.jsに触れていきたいと思います。

簡単なアプリケーションをつくる

任意のディレクトリを作成して下記コマンドを実行してください。

npm init
npm install express --save

念のためExpress.jsがインストールできてるか確認しましょう。バージョンを表した数字が表示されればインストールされています。

express -V

それではExpress.jsで最小限のアプリケーションをつくります。 app.jsというファイルを作成して以下のコードを記述してください。

var express = require('express');
var app = express();

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

app.listen(3000, function () {
  console.log('listening on port 3000');
});

以下コマンドで起動させます。

node app

ブラウザをひらいてhttp://localhost:3000 にアクセスしてみましょう。 Hello World!と表示されていると思います。
app.jsのコードを説明すると、require('express')で先ほどインストールしたExpress.jsのnpmモジュールを読み込んでいます。

var express = require('express');

次にアプリケーションの元となるオブジェクトを作成します。

var app = express();

特定のアドレスにアクセスしたときの処理、いわゆるルーティングを記述します。

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

これはルート直下にgetメソッドでアクセスしたのときの処理です。第１引数にアドレスを記述し、第２引数に関数を設定しています。この関数の引数にそれぞれrequestとresponseが渡されています。
sendはExpress.jsのメソッドで、HTMLの文字列やJSON、ステータスコードなどを送信できます。
そして、listenでアプリケーションサーバーにバインドして待ち受け状態にして、第１引数にport番号を記入します。

middleware

次にディレクトリを設定していきましょう。ディレクトリは自由に設定できますが、下記のような設定がオススメです。

├── app.js
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
├── routes
│   └── index.js
│  
└── views
    └── index.ejs

app.jsとpackage.jsonは既に作成したのでそのままにします。画像やcssなどのリソースの置き場所となるのがpublicディレクトリです。さらに後ほど補足するroutesディレクトリとviewsディレクトリを作成しておきましょう。ディレクトリ構造を変更するのに伴ってapp.jsの変更が必要になります。

var express = require('express');
var path = require('path');
var routes = require('./routes/index');
var bodyParser = require('body-parser');
var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);

app.listen(3000, function () {
  console.log('listening on port 3000');
});

require('path')で、Node.jsに組み込まれている標準モジュールのpathモジュールを読み込みます、これはファイルパスを扱う際に必要になります。さらに、middlewareと呼ばれるタイプのnpmモジュールをインストールする必要があります。
Express.jsは最小限のフレームワークなので、頻繁に使われる機能だったとしてもmiddlewareとして分離されています。
実際、上記のbody-parserは、レスポンスボディを解析する際に必要になる機能ですがmiddlewareとして分離されているので、別途npmでインストールする必要があります。

npm install body-parser --save

viewディレクトリのパスをセットします。
またejsというテンプレートエンジンを使えるように設定します。これを使うとhtmlのなかで変数やfor文を使えるようになります。こちらもnpmでインストールしてください。 (テンプレートエンジンは他にjade,ectなど複数あり、好みに応じて変更可能です。ここではejsを使用します。)

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

npm install ejs --save

viewsディレクトリのなかにindex.ejsを作成して、以下を記述してください。 <%= title %>は、app.jsから渡される変数が展開されて表示されます。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

publicディレクトリは画像などのリソースを配置するためのディレクトリです。express.staticという標準搭載されているmiddlewareで設定します。

app.use(express.static(path.join(__dirname, 'public')));

ルーティングをroutesディレクトリに移動します。 routesディレクトリのなかにindex.jsを作成して以下を記述します。

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Hello World!' });
});

module.exports = router;

app.jsでルーティングを読み込みます。

var routes = require('./routes/index');

res.renderは、第１引数で渡したviewを描画するメソッドです。
ここではviews/index.ejsのtitle変数に「Hello World!」という文字列を渡しています。
<%= title %>が、「Hello World!」と展開されて表示されます。

これでミニマムなExpress.jsのアプリケーションは完成です。

generator

Express.jsには、アプリケーションの雛形を作成するgeneratorという便利な機能があります。
下記のコマンドを実行してgeneratorをインストールしてください。

npm install express-generator -g

下記のようにexpress [アプリ名]を実行すると、アプリのスケルトンが作成されます。

express my_app

create : my_app
create : my_app/package.json
create : my_app/app.js
create : my_app/public
create : my_app/routes
create : my_app/routes/index.js
create : my_app/routes/users.js
create : my_app/public/javascripts
create : my_app/views
create : my_app/views/index.jade
create : my_app/views/layout.jade
create : my_app/views/error.jade
create : my_app/public/images
create : my_app/public/stylesheets
create : my_app/public/stylesheets/style.css
create : my_app/bin
create : my_app/bin/www

先ほど手動で作成していたファイルが自動で生成されているのがわかると思います。
標準のテンプレートエンジンはjadeなのでejsを使いたければ引数 -eを加えます。

express -e myapp

create : my_app
create : my_app/package.json
create : my_app/app.js
create : my_app/public
create : my_app/routes
create : my_app/routes/index.js
create : my_app/routes/users.js
create : my_app/public/javascripts
create : my_app/views
create : my_app/views/index.ejs
create : my_app/views/error.ejs
create : my_app/public/images
create : my_app/public/stylesheets
create : my_app/public/stylesheets/style.css
create : my_app/bin
create : my_app/bin/www

npm installでpacake.jsonに記述されている依存関係にあるモジュールをインストールします。