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


node01

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

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

2016/02/10学習分です。

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

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

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

■index.ejs

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

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

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

★1

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

★2

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

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

★3

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

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

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

★4

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

★5

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

動かしてみる

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

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

EJS

でた!相当楽だなぁ。

 

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