Expressは、Node界隈で人気のWebアプリケーションフレームワークです。早速試してみます。
Expressをインストールします。
$ sudo npm install -g express Password: /usr/local/bin/express -> /usr/local/lib/node_modules/express/bin/express express@2.5.5 /usr/local/lib/node_modules/express ├── mkdirp@0.0.7 ├── mime@1.2.4 ├── qs@0.4.0 └── connect@1.8.5
アプリのひな形を生成します。
$ express example create : example create : example/package.json create : example/app.js create : example/public create : example/routes create : example/routes/index.js create : example/views create : example/views/layout.jade create : example/views/index.jade create : example/public/javascripts create : example/public/images create : example/public/stylesheets create : example/public/stylesheets/style.css dont forget to install dependencies: $ cd example && npm install
メッセージに従ってコマンドを実行します。
$ cd example/ $ npm install express@2.5.5 ./node_modules/express ├── mkdirp@0.0.7 ├── mime@1.2.4 ├── qs@0.4.0 └── connect@1.8.5 jade@0.20.0 ./node_modules/jade ├── mkdirp@0.2.2 └── commander@0.2.1
早速起動してみます。
$ node app.js Express server listening on port 3000 in development mode
ブラウザで http://127.0.0.0:3000/ にアクセスしてみます。
Nodeを止めるにはターミナルで Control+C を押します。
生成したひな形の中身を見てみましょう。
- app.js ... アプリケーションのメインルーチンです。このファイルをnode起動時に指定します。
- node_modules/ ... Nodeのモジュールが入っています。
- package.json ... モジュールの依存関係を示すファイルです。
- public/ ... スタティックにアクセスするファイルが入っています。スタイルシート、JavaScript、Imageなど。
- routes/ ... ルーティングを示すJavaScriptファイルが入っています。
- views/ ... Viewに関連するファイルが入っています。ここではExpressのデフォルトのテンプレートJade形式のファイルが入っています。
基本的な流れです。ブラウザから http://127.0.0.1:3000/ アクセスすると、app.js の以下のイベントハンドラが呼ばれます。
app.js
app.get('/', routes.index);
app.get(アクセスされたURL, 起動する関数)となります。この関数は、routesディレクトリのindex.jsに定義されています。
routes/index.js
exports.index = function(req, res){
res.render('index', { title: 'Express' })
};
reqはリクエスト、resはレスポンスです。res.render でViewをレンダリングして返します。res.render(テンプレート名, テンプレートに与えるオブジェクト) となります。ここでは、indexというテンプレートに対して、プロパティtitleに文字列Expressを設定したオブジェクトを与え、レンダリングします。
renderメソッド内では、viewsディレクトリ内のindex.jade をレンダリングします。index.jadeはJadeテンプレートと呼びます。
h1= title
p Welcome to #{title}
h1= title は <h1>Express</h1> に展開されます。renderメソッドで与えたオブジェクトのtitleプロパティの値が h1 に設定されます。
p Welcome to #{title} は、<p>Welcom to Express</p> に展開されます。#{title} もrenderメソッドで与えたオブジェクトのtitleプロパティの値となります。
ここには書いていないhtmlタグやheadタグ、bodyタグは views/layout.jade に書かれています。index.jade は layout.jadeの body に与えられた部品です。Expressには一部分を全体に統合する機能が備わっています。パーシャル機能とか言います。
これでブラウザに以下のようなHTMLが返ります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Express </title> <link rel="stylesheet" href="/stylesheets/style.css"/> </head><body> <h1>Express</h1> <p>Welcome to Express</p> </body> </html>
これでようやくブラウザに表示されます。
作り方としては、どこからでも良いかと思いますが、私はviews内にjadeテンプレ作成→routes/index.jsにルーティングを追加 → app.jsにルーティング設定の順でやることが多いです。
0 件のコメント:
コメントを投稿