EJSを使用してノードアプリケーションをテンプレート化する方法

投稿日: 2022-04-20 2022-04-20
タグ: javascript, Node.js

序章

ノードアプリケーションをすばやく作成する場合、アプリケーションをテンプレート化するための高速な方法が必要になる場合があります。

JadeはExpressのデフォルトテンプレートエンジンとして提供されますが、Jade構文は多くのユースケースで非常に複雑になる可能性があります。

埋め込みJavaScriptテンプレート（EJS）は、代替テンプレートエンジンとして使用できます。

この記事では、EJSをExpressアプリケーションに適用する方法、サイトの繰り返し可能な部分を含める方法、およびデータをビューに渡す方法を学習します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。

ノート： 完全なデモコードのgitリポジトリはGitHubにあります.

このチュートリアルは、もともとexpressv4.17.1およびejsv3.1.5用に作成されました。ノードv16.0.0、npm v7.11.1、express v4.17.1、およびejsv3.1.6で検証されています。

ステップ1—プロジェクトの設定

まず、ターミナルウィンドウを開き、新しいプロジェクトディレクトリを作成します。

mkdir ejs-demo

次に、新しく作成されたディレクトリに移動します。

cd ejs-demo

この時点で、新しいnpmプロジェクトを初期化できます。

npm init -y

次に、expressパッケージをインストールする必要があります。

npm install express@4.17.1

次に、ejsパッケージをインストールします。

npm install ejs@3.1.6

この時点で、ExpressとEJSを使用する準備ができた新しいプロジェクトができました。

手順1—`server.js`を使用した構成

すべての依存関係をインストールしたら、EJSを使用するようにアプリケーションを構成し、[インデックス]ページと[バージョン情報]ページのルートを設定しましょう。

新しいserver.jsファイルを作成し、コードエディターで開いて、次のコード行を追加します。

server.js

var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
app.get('/', function(req, res) {
  res.render('pages/index');
});

// about page
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

このコードはアプリケーションを定義し、ポート8080でリッスンします。

このコードは、次を使用してEJSをExpressアプリケーションのビューエンジンとして設定します。

`app.set('view engine', 'ejs');`

コードがres.render()を使用してビューをユーザーに送信する方法に注目してください。 res.render()はviewsフォルダーでビューを検索することに注意してください。したがって、フルパスはviews/pages/indexであるため、pages/indexを定義するだけで済みます。

次に、EJSを使用してビューを作成します。

ステップ2—EJSパーシャルの作成

作成する多くのアプリケーションと同様に、再利用されるコードもたくさんあります。これらは部分と見なされます。この例では、[インデックス]ページと[バージョン情報]ページで再利用される3つのパーシャルがあります：head.ejs、header.ejs、およびfooter.ejs。これらのファイルを作成しましょう。

新しいviewsディレクトリを作成します。

mkdir views

次に、新しいpartialsサブディレクトリを作成します。

mkdir views/partials

このディレクトリに、新しいhead.ejsファイルを作成し、コードエディタで開きます。次のコード行を追加します。

ビュー/partials/head.ejs

<meta charset="UTF-8">
<title>EJS Is Fun</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
  body { padding-top:50px; }
</style>

このコードには、HTMLドキュメントのheadのメタデータが含まれています。 Bootstrapスタイルも含まれています。

次に、新しいheader.ejsファイルを作成し、コードエディタで開きます。次のコード行を追加します。

ビュー/partials/header.ejs

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">EJS Is Fun</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
  </ul>
</nav>

このコードには、HTMLドキュメントのナビゲーションが含まれており、スタイリングにBootstrapのいくつかのクラスを使用しています。

次に、新しいfooter.ejsファイルを作成し、コードエディタで開きます。次のコード行を追加します。

ビュー/partials/footer.ejs

<p class="text-center text-muted">&copy; Copyright 2020 The Awesome People</p>

このコードには著作権情報が含まれており、スタイリングにBootstrapのいくつかのクラスを使用しています。

次に、これらのパーシャルをindex..ejsとabout.ejsで使用します。

ステップ3—ビューへのEJSパーシャルの追加

3つのパーシャルが定義されています。これで、ビューでそれらをincludeできます。

<%- include('RELATIVE/PATH/TO/FILE') %>を使用して、EJSパーシャルを別のファイルに埋め込みます。

<%の代わりにハイフン<%-を使用してEJSに生のHTMLをレンダリングするように指示します。
パーシャルへのパスは、現在のファイルからの相対パスです。

次に、新しいpagesサブディレクトリを作成します。

mkdir views/pages

このディレクトリに、新しいindex.ejsファイルを作成し、コードエディタで開きます。次のコード行を追加します。

views / pages / index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

このファイルへの変更を保存してから、アプリケーションを実行します。

node server.js

Webブラウザでhttp://localhost:8080/にアクセスすると、インデックスページを確認できます。

Screenshot of the index page with head, header, and footer partials rendered

次に、新しいabout.ejsファイルを作成し、コードエディタで開きます。次のコード行を追加します。

ビュー/ページ/about.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
<div class="row">
  <div class="col-sm-8">
    <div class="jumbotron">
      <h1>This is great</h1>
      <p>Welcome to templating using EJS</p>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="well">
      <h3>Look I'm A Sidebar!</h3>
    </div>
  </div>
</div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

このコードは、ブートストラップサイドバーを追加して、パーシャルを構造化してさまざまなテンプレートやページで再利用する方法を示します。

このファイルへの変更を保存してから、アプリケーションを実行します。

node server.js

Webブラウザでhttp://localhost:8080/aboutにアクセスすると、サイドバーのある[バージョン情報]ページを確認できます。

Screenshot of the About page with head, header, and footer partials rendered and sidebar displayed.

これで、ノードアプリケーションからビューにデータを渡すためにEJSの使用を開始できます。

ステップ4—ビューとパーシャルにデータを渡す

いくつかの基本的な変数と、インデックスページに渡すリストを定義しましょう。

コードエディタでserver.jsに再度アクセスし、app.get('/')ルート内に次のコード行を追加します。

server.js

var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
app.get('/', function(req, res) {
  var mascots = [
    { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
    { name: 'Tux', organization: "Linux", birth_year: 1996},
    { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
  ];
  var tagline = "No programming concept is complete without a cute animal mascot.";

  res.render('pages/index', {
    mascots: mascots,
    tagline: tagline
  });
});

// about page
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

このコードは、mascotsという配列とtaglineという文字列を定義します。次に、index.ejsで使用してみましょう。

EJSでの単一変数のレンダリング

単一の変数をエコーするには、<%= tagline %>を使用できます。

コードエディタでindex.ejsに戻り、次のコード行を追加します。

views / pages / index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

このコードは、インデックスページにtaglineの値を表示します。

EJSでデータをループする

データをループするには、.forEachを使用できます。

コードエディタでindex.ejsに戻り、次のコード行を追加します。

views / pages / index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>

    <ul>
      <% mascots.forEach(function(mascot) { %>
        <li>
          <strong><%= mascot.name %></strong>
          representing <%= mascot.organization %>,
          born <%= mascot.birth_year %>
        </li>
      <% }); %>
    </ul>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

このファイルへの変更を保存してから、アプリケーションを実行します。

node server.js

Webブラウザでhttp://localhost:8080/にアクセスすると、mascotsのインデックスページを確認できます。

Screenshot of the list of mascots rendered.

EJSのパーシャルへのデータの受け渡し

EJSパーシャルは、親ビューと同じデータすべてにアクセスできます。ただし、注意してください。パーシャルで変数を参照している場合は、パーシャルを使用するすべてのビューで定義する必要があります。そうしないと、エラーがスローされます。

次のようなインクルード構文で、変数を定義してEJSパーシャルに渡すこともできます。

ビュー/ページ/about.ejs

...
<header>
  <%- include('../partials/header', {variant: 'compact'}); %>
</header>
...

ただし、変数が定義されていると想定する場合は、再度注意する必要があります。

常に定義されているとは限らないパーシャル内の変数を参照し、それにデフォルト値を指定する場合は、次のように行うことができます。

ビュー/partials/header.ejs

...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

上記の行で、EJSコードは、定義されている場合はvariantの値をレンダリングし、定義されていない場合はdefaultの値をレンダリングしています。

結論

この記事では、EJSをExpressアプリケーションに適用する方法、サイトの繰り返し可能な部分を含める方法、およびデータをビューに渡す方法を学習しました。

EJSを使用すると、複雑さを増す必要がない場合にアプリケーションを構築できます。パーシャルを使用し、変数をビューに簡単に渡す機能を使用することで、優れたアプリケーションをすばやく構築できます。

機能と構文の詳細については、EJSドキュメントを参照してください。さまざまなビューエンジンの長所と短所を理解するには、 JavaScriptテンプレートエンジンの比較：Jade、Mustache、Dustなどを参照してください。

getdocs

8684

序章

前提条件

ステップ1—プロジェクトの設定

手順1—server.jsを使用した構成

ステップ2—EJSパーシャルの作成

ステップ3—ビューへのEJSパーシャルの追加

ステップ4—ビューとパーシャルにデータを渡す

EJSでの単一変数のレンダリング

EJSでデータをループする

EJSのパーシャルへのデータの受け渡し

結論

getdocs

手順1—`server.js`を使用した構成