こんにちは。フロントエンドエンジニアの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に記述されている依存関係にあるモジュールをインストールします。
cd my_app && npm install
npm startで起動できます。
npm start
http://localhost:3000にアクセスしてみましょう。
Express Welcome to Expressと表示されていれると思います。
まとめ
Express.jsを使うと、前回のnode.jsのみで作成するアプリより簡単に作成できたと思います。 次回はより複雑なアプリケーション作成を通じてExpress.jsについて説明します。
アスタミューゼでは、エンジニア・デザイナーを募集中です。ご興味のある方は遠慮なく採用サイトからご応募ください。お待ちしています。
