Twitter

Category

もっと見る

Tag

もっと見る

バックエンド開発

【Node.js】ejsを使ってページを表示する

【Node.js】ejsを使ってページを表示する

目次

  1. fs.readFile()でHTMLファイルを返す
  2. ejsとは？
  3. fs.readFileSync()でHTMLファイルを返す
  4. まとめ

今回は、Node.jsについて、ejsファイルを読み込んで、ページを表示してみようと思います。

ejsファイルはNode側で指定した変数の値などを入れ込んで表示させたりできます。

なお、データについてですが、今回も前回に引き続き同じものを使っていきたいと思います。

下記、前回の記事です。

【Node.js】アクセスされたURLの取得と処理の振り分け
https://www.dailyupblog.com/backend_development/944/

それでは早速いきましょう。

fs.readFile()でHTMLファイルを返す

ejsファイル読み込みの前にHTMLファイルの読み込みをやってみましょう。

まず、server.jsと同階層に「public_html」フォルダを作成してください。

この中にhello.htmlファイルを作成しましょう。

そしてこのファイルの中には以下のように記述してください。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>Hello world</title>
</head>

<body>
	<h1>Hello world</h1>
</body>

</html>

その次に、server.jsを開いてHTMLファイルを返す処理を書きましょう。

server.jsを開いて下記のように記述してください。

const http = require("http"),
	fs = require("fs");

const settings = require('./settings.js');
const server = http.createServer();

server.on("request", function (req, res) {
  fs.readFile(`${__dirname}/public_html/test.html`, "utf-8", function ( err, data ) {
    if (err) {
      res.writeHead(404, { "Content-Type": "text/plain" });
      res.write("not found");
      res.end();
    }
    res.writeHead(200, { "Content-Type": "text/html" });
    res.write(data);
    res.end();
  });
});

server.listen(settings.port, settings.host);
console.log("server listen...");

まず、ファイルの呼び出しにはfsモジュールを利用するので、fsをrequireしておきます。

fs = require("fs")

そして、ファイルを呼び出す際には、fsモジュールの「readFile()」メソッドを使います。

第一引数には、呼び出すファイルのパスを入れます。

「__dirname」は現在のディレクトリ名を取ることができます。

第二引数には文字コードを入れてあげます。「UTF-8」を入れました。

そして、第三引数にはコールバック関数を入れて、処理を書きます。

fs.readFile(`${__dirname}/public_html/test.html`, "utf-8", function ( err, data ) {
  //処理...
}

この中にはエラー時の処理と呼び出したファイルの内容をwriteする処理を書きました。

htmlファイルを呼び出す場合には「Content-Type」が「text/html」になることに注意しましょう。

    if (err) {
      res.writeHead(404, { "Content-Type": "text/plain" });
      res.write("not found");
      res.end();
    }
    res.writeHead(200, { "Content-Type": "text/html" });
    res.write(data);
    res.end();

これでserver.jsを実行して、ブラウザでページを表示してみてください。

下記のようにtest.htmlの内容が表示されていると思います。

ejsとは？

まず、そもそもejsとは何かを解説したいと思います。

ejsとはJavaScriptで利用するシンプルなテンプレートエンジンです。

テンプレートエンジンとは、HTMLを生成するための型のようなものであり、同じテンプレートにnode.jsで用意したデータを入れ込んだりできます。

HTMLを再利用できるため、動的なWebページを作ることができます。

ejsの拡張子は「.ejs」であり、ビルドでHTMLを書き出します。

ejs公式サイト
https://ejs.co/

fs.readFileSync()でHTMLファイルを返す

それでは、node.jsにてejsファイルを返して表示する方法をご紹介します。

まず、「public_html」フォルダにhello.ejsファイルを作成してください。

その中には以下のように記述してください。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<h1><%= title %></h1>
	<p><%- content %></p>
</body>

</html>

上記の「<%= title %>」と「<%- content %>」の箇所にそれぞれnode.jsで定義したデータが入ります。

ちなみにこの「<%=」と「<%-」の違いは、「<%=」は中にある変数をエスケープを含めて展開することができ、「<%-」は変数をエスケープせずに展開します。ですので、htmlタグをそのまま出力したい場合には「<%-」で記述してください。

続いて、server.jsを開いて以下のように記述してください。

const http = require("http"),
  fs = require("fs"),
  ejs = require("ejs");

const settings = require("./settings.js");

const server = http.createServer();

const template = fs.readFileSync(`${__dirname}/public_html/hello.ejs`, "utf-8");

server.on("request", function (req, res) {
  const data = ejs.render(template, {
    title: "Hello World",
    content: "<strong>Well Come!!!</strong>",
  });
  res.writeHead(200, { "Content-Type": "text/html" });
  res.write(data);
  res.end();
});

server.listen(settings.port, settings.host);
console.log("server listen...");

まず、ejsを利用する場合に必要なモジュールをインポートします。

ejs = require("ejs");

続いて、「fs.readFileSync」を使ってejsファイルの読み込みを行います。

この書き方は前述した「fs.readFile」と異なり、ブロッキングな書き方になります。

ですが、これは「server.on」される前、つまり、サーバーが起動する前に読み込まれているため特に問題ありません。

const template = fs.readFileSync(`${__dirname}/public_html/hello.ejs`, "utf-8");

最後にejsテンプレートに表示するデータを設定します。

以下のように「ejs.render()」を用いて、第一引数に読み込むテンプレートを記述し、第二引数にデータを記述します。

  const data = ejs.render(template, {
    title: "Hello World",
    content: "<strong>Well Come!!!</strong>",
  });

前述の通り、ejsにおいてhtmlタグをそのまま出力する場合には「<%-」で記述しますので、今回は「content」には<strong>タグ付きで書きました。

これで、サーバーを起動し、ブラウザでページを確認してみましょう。

下記のようにejsファイルが呼び出されていると思います。

まとめ

いかがだったでしょうか。

今回はnode.jsでhtmlとejsファイルを返して、表示する方法についてまとめました。

ejsはnode.jsで制御できるテンプレートエンジンであり、幅広く使われていますので、ぜひ覚えておきたいところです。

それでは今回はここまで！

お疲れ様でした。

関連記事

関連記事