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

getdocs

2年前

序章

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

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

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

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

前提条件

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

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

注： GitHubで完全なデモコードのgitリポジトリを見つけることができます。

このチュートリアルはもともと express v4.17.1および ejs v3.1.5。 Nodev16.0.0で検証されています。 npm v7.11.1、 express v4.17.1、および ejs v3.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 ビューのフォルダ。したがって、定義する必要があるのは pages/index フルパスは views/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>

このコードには、 head HTMLドキュメントの場合。 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

あなたが訪問した場合 http://localhost:8080/ Webブラウザでは、インデックスページを確認できます。

次に、新しいを作成します 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

あなたが訪問した場合 http://localhost:8080/about Webブラウザーでは、サイドバーを使用して[バージョン情報]ページを確認できます。

これで、ノードアプリケーションからビューにデータを渡すために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

あなたが訪問した場合 http://localhost:8080/ Webブラウザでは、インデックスページを観察できます。 mascots:

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

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

次のように、include構文で変数を定義して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などを参照してください。

序章

前提条件

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

ステップ1—で構成する server.js

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

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

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

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

EJSでデータをループする

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

結論

ステップ1—で構成する `server.js`