Expressを導入しよう (7/7)
作成:2015-08-13 10:42
更新:2015-08-13 10:42
更新:2015-08-13 10:42
■テンプレート利用の処理を作る
では、Node.jsのスクリプトを作成しましょう。app.jsを下のリストのように書き換えて下さい。
再び「node app.js」でサーバーを起動し、localhost:3000にアクセスしてみましょう。テンプレートをレンダリングした表示が現れますよ。
これで、EJSを使ったテンプレート機能がExpressでもちゃんと使えるようになりました。では修正点をチェックしましょう。
・EJSのロード
・テンプレートエンジンの設定
・GETのコールバック関数の用意
コールバック関数内で行なっているのは、EJSテンプレートを使ったページの表示です。responseのrenderメソッドを呼び出していますね。
注意して欲しいのは、テンプレートファイル名です。これは「views」フォルダ内に配置されている必要があります。ただし、'views/test.ejs'なんて具合にviewsフォルダ内のパスを書く必要はありません。ただ、'test.ejs'とファイル名だけを指定すればOKです。
Expressでは自動的に「views」フォルダ内からファイルを検索するようになっているのです。逆に、「views」フォルダでなく、アプリケーションのフォルダ内にファイルがあったりすると、見つからずにエラーになりますので気をつけて下さい。
――さあ、これでとりあえず、Expressを使ったアプリケーションの基本はわかりました。使い方さえわかれば、Node.js単体で使うよりも全体が整理されてわかりやすいですね!
再び「node app.js」でサーバーを起動し、localhost:3000にアクセスしてみましょう。テンプレートをレンダリングした表示が現れますよ。
テンプレート利用のポイント
これで、EJSを使ったテンプレート機能がExpressでもちゃんと使えるようになりました。では修正点をチェックしましょう。
・EJSのロード
var ejs = require("ejs");まず、最初にrequireでEJSをロードしておきます。これは既にお馴染みの作業ですからわかりますね。
・テンプレートエンジンの設定
app.engine('ejs',ejs.renderFile);テンプレートエンジンの設定を行います。これはApplicationオブジェクトの「engine」メソッドを使って設定します。第1引数にはテンプレートファイルの拡張子を、第2引数にはテンプレートエンジンのコールバック関数を設定します。このコールバック関数には、ejsオブジェクトのrenderFileプロパティを設定します。これでテンプレートエンジンの設定が完了しました。
・GETのコールバック関数の用意
コールバック関数内で行なっているのは、EJSテンプレートを使ったページの表示です。responseのrenderメソッドを呼び出していますね。
res.render( テンプレートファイル , オブジェクト );第1引数には使用するテンプレートファイル名、第2引数にはテンプレート側に渡す変数名をキーとして値を連想配列としてまとめたものを指定します。これでページがレンダリングされます。
注意して欲しいのは、テンプレートファイル名です。これは「views」フォルダ内に配置されている必要があります。ただし、'views/test.ejs'なんて具合にviewsフォルダ内のパスを書く必要はありません。ただ、'test.ejs'とファイル名だけを指定すればOKです。
Expressでは自動的に「views」フォルダ内からファイルを検索するようになっているのです。逆に、「views」フォルダでなく、アプリケーションのフォルダ内にファイルがあったりすると、見つからずにエラーになりますので気をつけて下さい。
――さあ、これでとりあえず、Expressを使ったアプリケーションの基本はわかりました。使い方さえわかれば、Node.js単体で使うよりも全体が整理されてわかりやすいですね!
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
var express = require('express'); var ejs = require("ejs"); var app = express(); app.engine('ejs',ejs.renderFile); app.get("/", function(req, res){ res.render('test.ejs', {title: 'Test Page' , content: 'this is test.'}); }); var server = app.listen(3000, function(){ console.log('Server is running!'); })
※関連コンテンツ