back

ExpressでWebアプリケーションを自動生成する (5/6)

■「routes」のスクリプトとテンプレート

続いて、表示するWebページの処理を見ていきましょう。Webページは、「routes」内にスクリプトを、「views」内にテンプレートを用意し、両者の組み合わせで作成されます。ここでは、/indexで表示されるページを構成するroutes内の「index.js」と、views内の「index.ejs」の中身を見てみましょう。（下のリストを参照）

・expressライブラリのロード
var express = require('express');
ここで必要となるexpressライブラリをロードします。これはapp.jsのところでも登場しましたね。Expressのオブジェクトです。

・Routerオブジェクトの用意
var router = express.Router();
expressの「Router」メソッドを呼び出します。これでルーティング（URLと、それで呼び出される処理とを関連付け得るためのもの）に関するオブジェクトを作成します。

・GETでルート情報を設定する
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
Routerにも、app.jsのexpressオブジェクトと同じようにgetメソッドが用意されています。これでURLのパスに関数を設定します。これで、指定したアドレスにアクセスがあったら設定した関数を呼び出し実行するようになります。

ここではrenderメソッドを呼び出してindexのテンプレートをレンダリングしています。

・exportsにrouterを設定
module.exports = router;
最後に、module.exportsにrouterオブジェクトを設定して作業完了です。app.jsで、最後にmodule.exports = app;を実行していたのと同じですね。

以上、整理すると「Routerの作成」「getによるルートの設定」「module.exportsにrouterの設定」という流れでルーティングが行われていました。ここではindexについて調べましたが、基本的にはどれも同じような形でルーティングを設定します。ルーティングのためのスクリプトは、自分で新たにページを追加すると用意しないといけなくなりますから、書き方の基本はしっかり覚えておきましょう。



(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;


※views/index.ejs
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.