LogoMark.png

Node.js/TemplateEngine の変更点


#author("2019-10-21T19:19:20+09:00;2019-10-15T17:43:48+09:00","default:inoue.ko","inoue.ko")
*Node.js|TemplateEngine
~

**テンプレートエンジンとは
テンプレートエンジンとは、テンプレートファイルと呼ばれる HTMLの雛形に、<% %> や {{ }} などのスクリプトデリミタ((スクリプトデリミタ(script delimiter)とはスクリプトにおける開始と終了の合図を使って具体的なデータを埋め込むための仕組みです。))を使って書かれた変数部分にデータを埋め込んでHTMLを生成する仕組みです。テンプレートファイルは、サーバーにリクエストがある都度必要なデータを読み込んで HTMLに変換・応答します。Node.js で利用できるテンプレートエンジンには以下のようなものがあります。テンプレート特有の表現があるので、それぞれ、学習コストがかかります。

-''EJS'':http://ejs.co/ Apache License, Version 2.0
-Hogan.js:http://twitter.github.io/hogan.js/ Apache License, Version 2.0
-Mustache:http://mustache.github.io/ MIT License
-Handlebars:http://handlebarsjs.com/ MIT License
-Swig:http://paularmstrong.github.io/swig/ 独自ライセンス

~
~

**EJS で体験

***EJS の概要
-EJS は Node.js では定番のテンプレートエンジンです。Node.js に標準で同梱されるものではないので、[[パッケージマネージャ>Node.js/npm]]を使ってインストールすることが必要です。

-テンプレートファイルの拡張子は ''.ejs'' です。

-スクリプトデリミタは、以下のようなパターンで、任意の値を埋め込むことができます。
--<%= キー名 %>
サーバーサイドでキー名に指定した値を書き出します。
HTMLタグが含まれていた場合はエスケープされます。
--<%- キー名 %>
サーバーサイドでキー名に指定した値を書き出します。
HTMLタグが含まれていた場合もエスケープされません。
--<% 処理 %>

以下、実際に簡単なプロジェクトを作ってみましょう。
~

***プロジェクトの準備
-適当な場所に myProject フォルダを作って下さい(どこでも可)
-ターミナルでそこへ移動します。
 $ cd /Users/XXXX/myProject
~

***プロジェクトの初期化(package.json の生成)

-プロジェクトの初期化作業を行います。以下のコマンドは、当該ディレクトリをプロジェクトの現場にするのに必須の作業です。
 $ npm init

-タイトルのみ入力して(ここでは sample_site)、その他はそのままエンターで構いません。ディレクトリー内には、''package.json'' という名称のファイル が出来上がります。
 {
   "name": "sample_site",
   "version": "1.0.0",
   "description": "sample",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "koichi inoue",
   "license": "ISC"
 }

package.json はパッケージのバージョン情報を保持した[[JSON]]形式のデータで、この存在によってフロントエンドで使用するパッケージのバージョン管理を一元化することができます。
~

***EJS のインストール
 $ npm install ejs
-node_modules フォルダ内に ejs フォルダができ、そこに ejs パッケージがインストールされます。

-package.json にはインストール情報が蓄積される仕組みになっていて、このタイミングで、以下のコードが追加されています。
 "dependencies": {
    "ejs": "^2.6.2"
 }
~

***.ejsファイルの作成
myProject フォルダに以下のコードを ''template.ejs'' として保存します。
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset='utf-8'>
   <title><%= title %></title>
 </head>
 <body>
   <%- heading %>
   <ul>
     <% arr.forEach(function(val) { %>
     <li><%= val %></li>
     <% }) %>
   </ul>
 </body>
 </html>
~

***index.js (サーバー)の作成
myProject フォルダに以下を ''index.js'' として保存して下さい。
index.js は、 package.json に記載された  "main": "index.js", のことです。
Node.js で実行させるファイルになります。
 var http = require('http');
 var fs = require('fs');
 var ejs = require('ejs');
 
 var temp = fs.readFileSync('./template.ejs', 'utf-8');
 
 var server = http.createServer(function(req, res) {
   // 第一引数:テンプレート、第二引数:値
   var data = ejs.render(temp, {
     title: 'SampleSite',
     heading: '<h1>EJS Sample</h1>',
     arr:['美術', 'デザイン', '写真']
   });
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.write(data);
   res.end();
 });
 
 //Localhost の 8000 ポートで待機
 server.listen(8000);
 console.log('Server running at http://127.0.0.1:8000. QUIT > [CTRL + C]');
~

***起動と動作確認
起動するには、node コマンドを使う方法と、package.json に起動コードを書いて npm コマンドを使う方法があります。

-1. node コマンドで、index.js を起動
 $ node index.js
 Server running at http://127.0.0.1:8000. QUIT > [CTRL + C]

-2. npm コマンドで起動
package.json に、以下のように起動コードを追加すると、npmコマンドからの起動ができます。
  :
   "scripts": {
     "start":"node index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
  :
起動は以下のコマンドです。
 $ npm start 
 Server running at http://127.0.0.1:8000. QUIT > [CTRL + C]

-ブラウザでローカルサーバーにアクセスしてみます
 http://localhost:8000

-以下のように表示されるはずです
 EJS Sample
 
    1. 美術
    2. デザイン
    3. 写真
~

***参考:package.json のプロパティー
-name:モジュールの名前(必須)
npmモジュール は name と versionで一意となる前提なので、他のライブラリと名前が重複してはいけません。
-version:モジュールのバージョン(必須)
-private:true になっていると非公開
-description:モジュールの説明
-main:モジュールの中で最初に呼ばれるファイルを指定 > index.js
-scripts:任意の shell script を実行するエイリアスコマンドの定義
-repository:ソースコードが管理されている場所
-author:作者名。一般に以下のように記載
 { "author": "Koichi Inoue <xxxx@gmail.com> (https://github.com/koichi-inoue/)" }
-license:ライセンス情報
-dependencies:依存するモジュールとバージョンを記述
-devDependencies:npmに公開するモジュールを開発するときに定義
~
~