express: ejsの基本

プログラミング
スポンサーリンク




こんにちは、おみです。

今回は、expressでejsを使って簡単なWebページを表示する方法について解説していきます。

 

スポンサーリンク

ejsとは

Expressでクライアント開発をする際、HTML出力を実装するために使用できるテンプレートエンジンのひとつです。

特徴として

  • テンプレートの拡張子は”.ejs”
  • HTMLと同じ表記方法で記述できる
  • Javascriptのif文やfor文がHTML内で使用できる

などが挙げられ、HTMLとJavascriptさえわかれば簡単に習得できるため、学習コストが低いです。

 

基本

構文: 開始タグ

  • <% … スクリプトタグ
    • javascriptの記述を行う
    • 画面には出力されない
  • <%= … 出力タグ
    • 変数をエスケープして画面に出力する
  • <%- … 出力タグ
    • 変数をエスケープせず画面に出力する
  • <%# … コメントタグ
    • ejsファイルにコメントする
    • 画面に出力されない

 

構文: 終了タグ

  • %>

 

ejsファイル内で別のejsファイルを読み込む

  • include(“ファイルパス”[, 別ファイルに受け渡すパラメータ]);

 

その他

  • テンプレートファイル(ejsファイル)は、ルートディレクトリ直下に”views”フォルダを作成し、その中に格納する形で管理します。

 

下準備

※Node.jsのインストール方法は割愛します

Expressのインストール

  • Expressをインストールしていない場合、下記リンク先の”下準備”を参考にインストールしてください
Node.js: expressを使ってサーバを立てる
こんにちは、おみです。 サーバぐらい立てれないと夏鈴ちゃんにばかにされてしまうので、今回はNode.jsでexpressを使ってサーバを立ててみようと思います。 下準備 ※Node.jsの環境構築はわかりやすいページがたく...

 

ejsのインストール

  • ejsをインストールしていない場合、ターミナルで下記コマンドを入力してインストールしてください
npm install ejs

 

記述してみる

今回は、私の推しメンの苗字を箇条書きで表示するWebページを作成します。

URL: http://localhost:3000

Webページ

 

 

ルートディレクトリ

|—example_3.js

|—views

|      |—index.ejs

|      |—body.ejs

|

 

ソースコード

  • example_3.js
// expressを読み込み
var express = require("express");
var app = express();

// view_engineにejsを設定
app.set("view_engine", "ejs");

// getメソッドの処理を記述
app.get("/", function (req, res) {
  var data = {
    items: [
      { name: "藤吉" },
      { name: "増本" },
      { name: "森田" },
      { name: "田村" },
    ]
  };
  res.render("index.ejs", {data: data, filename: "./index.ejs"});
});

app.listen(3000);

 

  • index.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <%- include('./body.ejs', {items: data.items}); %>
  </body>
</html>
  • body.ejs
<ul>
  <% for (let item of items) { %>
    <li>
      <%= item.name %>
    </li>
  <% } %>
</ul>
    タイトルとURLをコピーしました