expressで`Error: Failed to lookup view`となり表示できません。

前提・実現したいこと

「JavaScriptエンジニアのためのNode.js入門」を写経しつつNodeを学習しています。
ですが、expressを扱う章から実行でエラーが起きるようになりました。

エラーメッセージを表示させず、ブラウザに出力されるはずのhtmlを出力させたいです。

発生している問題・エラーメッセージ

node/にはejs,express,body-parserをnpm installしています。
ブラウザでlocalhost:1234にアクセスし、更新をすると下記のエラーメッセージが出力されます。

console
1$ node express-bk_02.js
2サーバを起動したぜ
3
4// ブラウザ更新後に以下が出力
5
6Error: Failed to lookup view "express-bk_02.ejs" in views directory "/Applications/MAMP/htdocs/node/views"
7    at Function.render (/Applications/MAMP/htdocs/node/node_modules/express/lib/application.js:580:17)
8    at ServerResponse.render (/Applications/MAMP/htdocs/node/node_modules/express/lib/response.js:1012:7)
9    at app.get (/Applications/MAMP/htdocs/node/express-bk_02.js:8:7)
10    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/layer.js:95:5)
11    at next (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/route.js:137:13)
12    at Route.dispatch (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/route.js:112:3)
13    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/layer.js:95:5)
14    at /Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:281:22
15    at Function.process_params (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:335:12)
16    at next (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:275:10)

browser
1Error: Failed to lookup view "express-bk_02.ejs" in views directory "/Applications/MAMP/htdocs/node/views"
2    at Function.render (/Applications/MAMP/htdocs/node/node_modules/express/lib/application.js:580:17)
3    at ServerResponse.render (/Applications/MAMP/htdocs/node/node_modules/express/lib/response.js:1012:7)
4    at app.get (/Applications/MAMP/htdocs/node/express-bk_02.js:8:7)
5    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/layer.js:95:5)
6    at next (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/route.js:137:13)
7    at Route.dispatch (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/route.js:112:3)
8    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/layer.js:95:5)
9    at /Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:281:22
10    at Function.process_params (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:335:12)
11    at next (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:275:10)

該当のソースコード

express-bk_02.js

js
1var express = require('express');
2var ejs = require("ejs");
3var app = express();
4
5app.engine('ejs', ejs.renderFile);
6
7app.get('/', (req, res) => {
8  res.render('express-bk_02.ejs', {
9    contents: '<p>hogehoge</p>'
10  });
11});
12
13var server = app.listen(1234, () => {
14  console.log('サーバを起動したぜ');
15});

express-bk_02.ejs

ejs
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6</head>
7<body>
8  <%- contents %>
9</body>
10</html>

package.json

{
  "name": "ejstest",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "ejs": "^3.0.1",
    "express": "^4.17.1"
  },
  "devDependencies": {},
  "description": ""
}

試したこと

前提としてexpressが起動できるのかの確認のためにtest.jsを起動したところ問題なく表示できました。
ですのでタイポかもしれないと思っているのですが、問題箇所がわかりません。

js
1var express = require('express');
2var app = express();
3app.get('/', function (req, res) {
4  res.send('Hello World!');
5});
6app.listen(3000, () => {
7  console.log('サーバ起動したよ。。。')
8});

補足情報（FW/ツールのバージョンなど）

JavaScriptエンジニアのためのNode.js入門/天田士郎著

行動規範の内容に同意します

回答2件

ベストアンサー

私の作った以下のフォルダ構成で試してみましたが、
あなたのソースコードで正しくhogehogeが表示されます。

ejstest/
　　node_modules/
　　views/
　　　　express-bk_02.ejs
　　express-bk_02.js
　　package-lock.json
　　package.json

投稿2020/01/19 14:54

technocore

総合スコア7225

makoto-n

2020/01/20 01:50

ありがとうございます！回答のフォルダ構成にしたところ、エラーもなくhogehogeが表示されました。レンダリングするさいにviews/が必要だったのですね！

行動規範の内容に同意します

Error: Failed to lookup view "express-bk_02.ejs" in views directory

viewsディレクトリに、express-bk_02.ejsが見つかりません
というエラーです。

投稿2020/01/19 14:10

technocore

総合スコア7225

makoto-n

2020/01/19 14:34

ありがとうございます。同じディレクトリに置いていますが、上記エラーメッセージが表示されてしまいます。。 res.render('./express-bk_02.ejs'　としても表示できませんでした。。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！