ejsでの条件文やループ文 - 駆け出しのエンジニア日記

今回は、ejsでの「if文」や「for文」の書き方についてまとめていきます。

ejsの宣言等を行います。

const path = require('path');
const express = require('express');
const app = express();
const redditData = require('./data.json');
 
//下記を記述しておくことで階層が異なっても、viewsのディレクトリ設定ができる
app.set('views', path.join(__dirname, 'views'));
//ejsを使えるように宣言
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
 res.render('home');
})
app.get('/rand', (req, res) => {
 const num = Math.floor(Math.random() * 10) + 1
 res.render('random', { rand: num });
})
app.get('/cats', (req, res) => {
 const cats = [
 'タマ', 'トラ', 'モモ', 'ヒコ', 'ジジ'
 ];
 res.render('cats', { cats });
})
app.listen(3000, () => {
 console.log('ポート3000で待ち受け');
})

上記の「rand」のパスを用いて、1〜10の間でランダムに数字が出力され、「偶数」か「奇数」かを出力された数字で分岐させてみます。

・条件分（if文）

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Random</title>
</head>
<body>
 <h1>ランダムな値：<%= rand %></h1>
 <!-- 条件分岐 -->
 <% if (rand % 2===0) { %>
 <h2>偶数です</h2>
 <% } else { %>
 <h2>奇数だよ</h2>
 <% } %>
 <h3><%= rand % 2 === 0 ? '偶数' : '奇数'%></h3>
</body>
</html>

bodyタグの中に注目してください。

記述したい「if文」の部分を「<% %>」で囲みます。

このタグ内はJavaScriptの世界となり、HTMLとしては出力されないものになります。

結果も、下記のように偶数なら偶数と出力されています。

次にループ文（for文）についてです。

上記の「cats」のパスを用いて、配列で定義した猫の名前をループさせてみます。

・ループ文（for文）

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ネコたち</title>
</head>
<body>
 <h1>ネコたち</h1>
 <!-- ループ処理 -->
 <ul>
 <% for (let cat of cats){%>
 <li>
 <%= cat %>
 </li>
 <% } %>
 </ul>
</body>
</html>