One place for hosting & domains

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

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


      はじめに

      ノードアプリケーションを即急に作成する際、アプリケーションを手軽にテンプレート化する必要が時としてあります。

      Jadeは、Expressがデフォルトとして使用するビューエンジンですが、Jade構文は多くのユースケースにとってあまりに複雑です。EJSはその代用としてよく機能し、セットアップが非常に簡単です。簡単なアプリケーションを作成し、EJSを使用してサイトの繰り返し部分(パーシャル)をインクルードし、データをビューに渡す方法を見てみましょう。

      デモアプリのセットアップ

      アプリケーション用に2ページ作成します。1ページはfull width、もう1ページはsidebarにします。

      コードを取得:GitHubに、完全なデモコードのgit repoがあります。

      ファイル構造

      アプリケーションに必要なファイルは以下のとおりです。viewsフォルダ内でテンプレートを作成します。その他はごく標準的なノードのフォルダです。

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.jsonにはノードアプリケーション情報と必要な依存関係(expressとEJS)が、 server.jsにはExpressサーバーのセットアップと設定が保持されています。ここでは、ページへのルートを定義します。

      ノードのセットアップ

      package.jsonファイルを見て、プロジェクトをセットアップしましょう。

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      必要なのはExpressとEJSだけです。ここで、定義したばかりの依存関係をインストールします。先に進み実行します。

      すべての依存関係がインストールされたので、EJSを使用するようにアプリケーションを設定し、必要な2ページ、つまりindexページ(full width)とaboutページ(sidebar)へのルートをセットアップします。これらをすべてserver.jsファイルで行います。

      server.js

      // load the things we need
      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("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      ここではアプリケーションを定義し、ポート8080で表示するように設定します。また、app.set('view engine', 'ejs');を使用して、EJSをExpressアプリケーションのビューエンジンとしてセットアップします。res.render()をどのように使用してビューをユーザーに送信するかに注目してください。注目すべき点として、ビューを求めてres.render()はviewsフォルダを検索します。したがって、フルパスがviews/pages/indexなので、pages/indexとだけ定義します。

      サーバー起動

      先に進み、次を入力してサーバーを起動します。

      これで、アプリケーションがブラウザ上のhttp://localhost:8080http://localhost:8080/aboutで表示されます。アプリケーションがセットアップされたので、ビューファイルを定義し、EJSがどのように機能するか確認します。

      EJSパーシャルの作成

      多くのアプリケーションと同様に、構築時に再利用されるコードがたくさんあります。これらのコードをパーシャルと呼び、サイト全体で使用する3ファイル、head.ejsheader.ejsfooter.ejsを定義します。早速これらのファイルを作成しましょう。

      views/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>
      

      views/partials/header.ejs

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

      views/partials/footer.ejs

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

      EJSパーシャルをビューに追加する

      ここにパーシャルが定義されました。あとはビューに追加するだけです。index.ejsabout.ejsに移動し、include構文を使用してパーシャルを追加します。

      EJSパーシャルをインクルードする構文

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

      • 単に<%ではなくハイフンを付けて<%-とするのは、EJSに生のHTMLをレンダリングするように指示するためです。
      • パーシャルへのパスは、現在のファイルからの相対パスで示します。

      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>
      

      これで、定義されたビューをブラウザのhttp://localhost:8080で見ることができます。node-ejs-templating-index

      aboutページにはブートストラップサイドバーも追加し、パーシャルがどのように構築され、さまざまなテンプレートやページで再利用されるのかを見ていきます。 

      views/pages/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>
      

      http://localhost:8080/aboutを表示すると、サイドバー付きのaboutページが確認できます。node-ejs-templating-about

      これで、EJSを使用してノードアプリケーションからビューにデータを渡せます。

      ビューとパーシャルにデータを渡す

      基本的な変数と一覧を定義してホームページに渡しましょう。server.jsファイルに戻り、app.get("https://www.digitalocean.com/")ルート内に次を追加します。

      server.js

      // index page
      app.get("https://www.digitalocean.com/", 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
          });
      });
      

      mascotという一覧とtaglineという簡単な文字列を作成しました。index.ejsファイルに移動してこれらを使ってみましょう。

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

      変数を1つだけechoするために使うのは、<%= tagline %>だけです。これをindex.ejsファイルに追加しましょう。

      views/pages/index.ejs

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

      EJSでデータをループさせる

      データをループさせるには、.forEachを使用します。これをビューファイルに追加しましょう。

      views/pages/index.ejs

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

      追加した新しい情報がブラウザで表示されています。

      node-ejs-templating-rendered

      データをEJSのパーシャルに渡す

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

      次のようなinclude構文でもEJSパーシャルに変数を定義したり渡したりできます。

      views/pages/about.ejs

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

      しかしここでも、変数が定義されたと仮定することには注意が必要です。

      必ずしも定義されていないかもしれないパーシャルの変数を参照し、初期値を付与したい場合、次のように入力します。

      views/partials/header.ejs

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

      上記では、EJSコードは、変数が定義されていればその値を、定義されていなければデフォルト値をレンダリングします。

      まとめ

      EJSは、そこまで複雑なものでなければ、アプリケーションのスピード開発に役立ちます。パーシャルを使用して変数を簡単にビューに渡せるので、大きなアプリケーションでも手軽に構築できます。

      EJSの詳細については、公式ドキュメントを参照してください。



      Source link