Waplusテックチームブログ

よく参照するのをわかりやすくまとめよう！

Waplusテックチームブログ

node.jsでejsというview engineを使ってみる

by · 2019年4月8日

expressを使ってプロジェクトを作成していることを前提として話しを進めます。
expressのインストールと利用に関しては前回の記事「node.jsのexpressはとても便利。」を参照してください

はじめに

expressをアプリケーションを生成するとjadeというview engineが入っています。
jadeはpythonのような記述でHTMLを書くことになります。
それ自体は悪いことではないのですが、デザイナーやコーダーが作成したHTMLをそのまま利用することが出来ません。(正確には出来るのですが記述が統一されずオススメしません)
なのでWebサービス系ならPHPにちょっと似たejsが良いのではないでしょうか。
もっと良いテンプレートがある場合は教えてください！

ぱっと見で理解出来るコーダーやデザイナーは少ないと思います(^_^;

後からejsを入れてみる

最初はjadeになっていますから。それを後でejsを指定することができます。
とりあえずやってみましょう。

$ npm install ejs --save
+ ejs@2.6.1
updated 1 package and audited 195 packages in 1.556s
found 3 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

アプリケーションのpackage.jsonがある場所で行ってくださいね

--saveのオプションはpackage.jsonにejsってライブラリ使ってますよ！って書き込むという意味です。

これが無いと後で誰かとプロジェクトを共有したときにその人がnpm installしたときにejsがインストールされずエラーになってしまいます。

ejsの使用を設定する

app.jsを開いてみてください。

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

いろいろとつらつら〜っと書いていますが触るところは一カ所だけです。

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

view engineについて記載されているのはこの2行だけです。

app.set(‘views’, path.join(__dirname, ‘views’));は表示されるView Engineがどこのフォルダに入っているのかを設定しています。

app.set(‘view engine’, ‘jade’);これがどのview engineを使うのかを設定しています。
つまりここをejsに書きかえるだけです

app.set('view engine', 'ejs');

ブラウザで表示して見てみましょう。

http://localhost:3000/

なんか怒られました(^_^

そりゃそうですよね。viewの中にあるファイルの拡張子がjadeのままです。

これじゃあ駄目です。拡張子を変更してあげましょう。

あとはejsの中身は好きにHTMLを書くだけです。

ejs独自の書き方に関してはコチラ(EJSの基本的な書き方)のサイトなどがわかりやすいかも。

最初っからejsを指定する

てか最初っからjadeじゃなくてejsで使いたいんですけど？
と思う人が大半だと思います。もちろん出来ます

$ express myapp02 --view=ejs
 create : myapp02/
    create : myapp02/public/
    create : myapp02/public/javascripts/
    create : myapp02/public/images/
    create : myapp02/public/stylesheets/
    create : myapp02/public/stylesheets/style.css
    create : myapp02/routes/
    create : myapp02/routes/index.js
    create : myapp02/routes/users.js
    create : myapp02/views/
    create : myapp02/views/error.ejs
    create : myapp02/views/index.ejs
    create : myapp02/app.js
    create : myapp02/package.json
    create : myapp02/bin/
    create : myapp02/bin/www
 change directory:
      $ cd myapp02
 install dependencies:
      $ npm install
 run the app:
      $ DEBUG=myapp02:* npm start

expressでアプリケーションを生成するときに–view=ejsとオプションで指定するだけです。

あとはディレクトリを移動してnpm installしてみてください。

$ cd myapp02/

$ npm install
 npm notice created a lockfile as package-lock.json. You should commit this file.
 added 53 packages from 38 contributors and audited 141 packages in 11.652s
 found 0 vulnerabilities

最初からejsがview engineとして設定されています。とても簡単ですね。

タグ:

おすすめ