読者です 読者をやめる 読者になる 読者になる

astamuse Lab

astamuse Labとは、アスタミューゼのエンジニアとデザイナーのブログです。アスタミューゼの事業・サービスを支えている知識と舞台裏の今を発信しています。

はじめての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メソッドでアクセスしたのときの処理です。第1引数にアドレスを記述し、第2引数に関数を設定しています。この関数の引数にそれぞれrequestとresponseが渡されています。
sendはExpress.jsのメソッドで、HTMLの文字列やJSON、ステータスコードなどを送信できます。
そして、listenでアプリケーションサーバーにバインドして待ち受け状態にして、第1引数に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は、第1引数で渡した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に記述されている依存関係にあるモジュールをインストールします。

cd my_app && npm install

npm startで起動できます。

npm start

http://localhost:3000にアクセスしてみましょう。
Express Welcome to Expressと表示されていれると思います。 f:id:astamuse:20160906143054p:plain

まとめ

Express.jsを使うと、前回のnode.jsのみで作成するアプリより簡単に作成できたと思います。 次回はより複雑なアプリケーション作成を通じてExpress.jsについて説明します。

アスタミューゼでは、エンジニア・デザイナーを募集中です。ご興味のある方は遠慮なく採用サイトからご応募ください。お待ちしています。

Copyright © astamuse company, ltd. all rights reserved.