EJSテンプレートエンジンの使い方メモ2 実装してみる。

SAGA.TXT > 学習メモ > node.js > EJSテンプレートエンジンの使い方メモ2 実装してみる。

EJSテンプレートエンジンの使い方メモ2 実装してみる。

2016-02-11

node01

こんにちは。さがっとです！

WEBアプリを作成できる！
を目標にnode.jsについて学習したことをメモしていきたいと思います。

2016/02/10学習分です。

EJSのテンプレートファイル

テンプレートファイルは、通常、「.ejs」という拡張子で作成する。
ここでは、HTMLに以下のタグを埋め込んであります。

<%=title %>
<%-content %>

■index.ejs

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><%=title %></title>
</head>

<body>

<div class="js-accordion">
	<ul>
		<li><span class="title top">タイトル</span><span class="text top">本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
	</ul>
	<a href="#" class="btn_accordion open">▼　もっとみる</a>
</div>

//★ここと
<h1><%=title %></h1>
//★ここに表示する
<p><%-content %></p>

</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

<ul>

<li><span class="title top">タイトル</span><span class="text top">本文本文本文本文本文本文本文本文本文本文本文</span>

<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>

</ul>

<a href="#" class="btn_accordion open">▼　もっとみる</a>

</div>

//★ここと

//★ここに表示する

</body>

</html>

「class=”js-accordion」のdivで囲まれている箇所は後でcssとjQueryでアコーディオンを作成しようとしている箇所。
重要なのは、<%= %>タグで囲まれている箇所をサーバーサイドのスクリプトファイルで動的に書き換えられるかどうか。

Node.jsのスクリプトファイル

以下のスクリプトをテンプレートファイルと同じディレクトリに用意しテンプレートファイルを読み込んでWebページを表示させる。

//httpモジュールをロード
var http = require('http');
var fs =require('fs');
//★１ejsオブジェクトの取得
var ejs = require('ejs');
//★２テンプレートファイルの読み込み(同期処理)
var index = fs.readFileSync('./index.ejs', 'utf8');

//「createServer」メソッドを呼び出してhttp.Serverオブジェクトを作成
var server = http.createServer();
//onメソッドでserverオブジェクトのrequestイベントにdoRequestという関数を割り当て
server.on('request', doRequest);
//server待ち受け
server.listen(3000);
console.log('Server running!');
 
// リクエストの処理
//第１引数は、「request」オブジェクト:クライアントからのリクエストに関する機能
//第２引数は「response」オブジェクト:サーバーからクライアントへ戻されるレスポンスに関する機能
function doRequest(req, res) {
	//★３読み込んだファイルのレンダリング
	var indexdata = ejs.render(index, {
		title:"タイトル",
		content:"タグで記載した部分を出力します。",
   　　 });
	//★４ヘッダー情報の書き出しresponseオブジェクトの「writeHead」メソッド
	res.writeHead(200, {'Content-Type': 'text/html'});
	//★５コンテンツの書き出しresponseオブジェクトの「write」メソッド
	res.write(indexdata);
	//コンテンツの完了responseの「end」
	res.end();
}

//httpモジュールをロード

var http = require('http');

var fs =require('fs');

//★１ejsオブジェクトの取得

var ejs = require('ejs');

//★２テンプレートファイルの読み込み(同期処理)

var index = fs.readFileSync('./index.ejs', 'utf8');

//「createServer」メソッドを呼び出してhttp.Serverオブジェクトを作成

var server = http.createServer();

//onメソッドでserverオブジェクトのrequestイベントにdoRequestという関数を割り当て

server.on('request', doRequest);

//server待ち受け

server.listen(3000);

console.log('Server running!');

// リクエストの処理

//第１引数は、「request」オブジェクト:クライアントからのリクエストに関する機能

//第２引数は「response」オブジェクト:サーバーからクライアントへ戻されるレスポンスに関する機能

function doRequest(req, res) {

//★３読み込んだファイルのレンダリング

var indexdata = ejs.render(index, {

title:"タイトル",

content:"タグで記載した部分を出力します。",

　　 });

//★４ヘッダー情報の書き出しresponseオブジェクトの「writeHead」メソッド

res.writeHead(200, {'Content-Type': 'text/html'});

//★５コンテンツの書き出しresponseオブジェクトの「write」メソッド

res.write(indexdata);

//コンテンツの完了responseの「end」

res.end();

}

★１

最初にrequire関数で「ejs」を引数に指定し、EJSのライブラリを読み込みます。

★２

先ほど作成したテンプレートファイルを「readFileSync」メソッドで読み込む。

ブラウザからのリクエストが来る前にテンプレートファイルを読み込んでおいた方が良いので最初からグローバル変数に読み込んでおいて利用する。

★3

ejsオブジェクトの「render」メソッドで読み込んだファイルのレンダリングを行う。

「render」メソッドの使用方法

ejs.render( テンプレートデータ , オプション );

1	ejs.render( テンプレートデータ , オプション );

第１引数にレンダリングする対象データ（★２で読み込んだテンプレートファイルデータ）を指定し、第２引数にテンプレートに渡す変数などの情報を連想配列で記載する。

★４

ヘッダー情報の書き出し。Content-Typeに「text/html」を設定することで、レスポンスに書き出される内容がHTMLであることがわかる。

★5

「write」メソッドで★３でレンダリングしたデータを書き出す。

動かしてみる

コマンドプロンプトでスクリプトファイルを起動。

node serverapp.js

1	node serverapp.js

http://localhost:3000へアクセス。

EJS

でた！相当楽だなぁ。

この記事がお役に立てたら、是非シェアをお願いします^^

SAGA.TXT

EJSテンプレートエンジンの使い方メモ2 実装してみる。

EJSのテンプレートファイル

Node.jsのスクリプトファイル

動かしてみる

■さがっと

最近の投稿

アーカイブ