ejsの構文
今回はNode.jsのテンプレートエンジン「EJS」で使いやすい便利な構文をまとめました。
・数、文字列、配列やオブジェクトの宣言と処理（JavaScriptと同じ）
・MTHLへ値の展開
・ループや条件分岐
・外部ファイルの読み込みやパラメータの引渡し
などを行うことができます。
早速書いてみましょう。
・<%= %>
ejsファイル内に
上記のように記述します。
「hello world」が大文字になって出力されています。
<%= %>の中に記述されたものは全てJavaScriptとして認識されます。
また後で詳しく触れると思いますが、他にも
・<% %>
このタグの内側はJavaScriptワールドになり、HTMLとしては出力されません。
・<%- %>
タグの中にあるJavaScriptの値をエスケープなしで展開します。
・<%#- %>
タグ内がコメントとなり、HTMLの出力結果に影響しないものになります。
ではここでテンプレートにデータを渡してみましょう。
まず、1〜10の間でランダムに数字が出力されるように記述します。
const path = require('path');
const express = require('express');
const app = express();
//Express での静的ファイルの提供・・・複数可能
// app.use(express.static('public'));
app.use(express.static(path.join(__dirname, 'public')));
//下記を記述しておくことで階層が異なっても、viewsのディレクトリ設定ができる
app.set('views', path.join(__dirname, 'views'));
//ejsを使えるように宣言
app.set('view engine', 'ejs');
app.get('/rand', (req, res) => {
const num = Math.floor(Math.random() * 10) + 1
res.render('random', { rand: num });
// renderの第二引数にオブジェクトとして渡すことが可能
// ejsファイルで参照できるようになります。
//{ rand: num } キー → 値 変数とキーを同一にすることも可能
})
app.listen(3000, () => {
console.log('ポート3000で待ち受け');
})
新しくejsファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random</title>
</head>
<body>
<h1>ランダムな値：<%= rand %></h1>
</body>
</html>
ejsファイルで「rand」が宣言されたかのように値を参照できます。
とこのようにejsの構文を使用することができます。
