EJS入門
EJS・・・
EJSとは主にJavaScriptで使用されるテンプレートエンジンです。
EJSを利用することでHTMLをヘッダーやフッターで分割して管理することやHTML内で
ループ処理を書いて簡単に記述できるなどを実現できます。
また、「JavaScriptで使用される」ということなので、JavaScriptの構文が使えます。新たに構文を覚える必要がありません。
※テンプレートを使うことで、WEBページに「パターン」を定義し、中身を動的に変更することができます。
もう一つ、ExpressにEJSを設定する方法も紹介します。
・プロジェクトの初期化をして、package.jsonを作成
npm init
・Expressのインストールし、ファイルを一つ作成
npm i express
touch index.js
・作成したファイルには、下記のようにインストールしたexpressの読み込みとローカルサーバーの設定を行います。
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('home');
})
app.listen(3000, () => {
console.log('ポート3000で待ち受け');
})
ここまで完了したら、EJSのインストールです。
npm i ejs
インストール完了後はまずviewsディレクトリを作成します。
理由は、Express側でテンプレート(ejsファイルなど)を使用する際はviewsディレクトリに該当ファイルを配置する必要があるからです。
viewsディレクトリを作成したら、その中にejsファイルを作成していきます。今回は
「home.ejs」のファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ホーム</title>
</head>
<body>
Quas fugit,
laboriosam ad eos dolor cum quidem omnis illo dignissimos laudantium
non dolores esse voluptate tempore eligendi quia fugiat porro nulla!
</p>
</body>
</html>
最後にejsファイルをexpressを使用しているindex.jsに読み込み、レスポンスでejsファイルを返すように設定します。
const express = require('express');
const app = express();
//ejsを使えるように宣言
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
// renderの中にejsのテンプレートを返すように設定
// 今回はhome.ejsなので'home'
res.render('home');
})
app.listen(3000, () => {
console.log('ポート3000で待ち受け');
})
ちゃんとテンプレートが返ってきているのが確認取れます。
