EJSを使用してノードアプリケーションをテンプレート化する方法
序章
ノードアプリケーションをすばやく作成する場合、アプリケーションをテンプレート化するための高速な方法が必要になる場合があります。
JadeはExpressのデフォルトテンプレートエンジンとして提供されますが、Jade構文は多くのユースケースで非常に複雑になる可能性があります。
埋め込みJavaScriptテンプレート(EJS)は、代替テンプレートエンジンとして使用できます。
この記事では、EJSをExpressアプリケーションに適用する方法、サイトの繰り返し可能な部分を含める方法、およびデータをビューに渡す方法を学習します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
このチュートリアルは、もともとexpress
v4.17.1およびejs
v3.1.5用に作成されました。 ノードv16.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 [email protected]
次に、ejs
パッケージをインストールします。
npm install [email protected]
この時点で、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">© 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/
にアクセスすると、インデックスページを確認できます。
次に、新しい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
にアクセスすると、サイドバーのある[バージョン情報]ページを確認できます。
これで、ノードアプリケーションからビューにデータを渡すために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
のインデックスページを確認できます。
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などを参照してください。