常連

WebpackとEJSを使って、共通テンプレートを利用したweb制作環境を構築しています。
(JSの圧縮、SASS→CSSの圧縮も同時に行っています)

HTMLの出力は「html-webpack-plugin」というモジュールを使用していますが、
デフォルトでは"index.html"しか出力されないので、必要な分だけ別途追記していく必要があります。

```
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = ( env, argv ) => ({
  plugins: [
    //トップページ
    new HtmlWebpackPlugin({
      hash: true,
      filename: "index.html",
      template: "./src/index.ejs"
    }),
    //サブページ
    new HtmlWebpackPlugin({
      hash: true,
      filename: "./dir/subpage.html",
      template: "./src/dir/subpage.ejs"
    }),
  ]
});
```
ページ数が少なければ良いのですが、多くなってくると非効率なので改善したいのです。
有用な対策法はありますでしょうか？

また、イレギュラーなパターンとして、一部ファイルだけhtmlではなくphpである場合もあります。

webpackで複数のHTMLを出力する際の設定について

### 前提・実現したいこと

node.jsを使いsqlを取得し表示したいと思っています。
ejsでforEachを使おうとしたらCannot read property 'forEach' of undefinedというエラーが出ました。

### 発生している問題・エラーメッセージ

```
Cannot read property 'forEach' of undefined
```

### 該当のソースコード

```ejs
<ul class="table-body">
    <% characters.forEach ((character) => { %>
      <li>
        <div class="item-data">
	        <span class="name-column"><%= character.name %></span>
	        <span class="nickName-column"><%= character.nickName %></span>
          <span class="gender-column"><%= character.gender.gender %></span>
          <span class="height-column"><%= character.height %></span>
          <span class="episode-column"><%= character.episode %></span>
          <span class="fruit-column"><%= character.characters.fruit %></span>
          <span class="fruitType-column"><%= character.fruit.fruit %></span>
          <span class="haki-column"><%= character.haki.haki %></span>
          <span class="race-column"><%= character.race %></span>
          <span class="ship-column"><%= character.ship %></span>
          <span class="belongA-column"><%= character.belongA %></span>
          <span class="belongB-column"><%= character.belongB %></span>
          <span class="belongC-column"><%= character.belongC %></span>
          <span class="belongD-column"><%= character.belongD %></span>
          <span class="birthM-column"><%= character.birthM %></span>
          <span class="birthD-column"><%= character.birthD %></span>
          <span class="blood-column"><%= character.blood.blood %></span>
          <span class="home-column"><%= character.home %></span>
          <span class="sea-column"><%= character.sea.sea %></span>
          <span class="love-column"><%= character.love %></span>
          <span class="hate-column"><%= character.hate %></span>
          <span class="price-column"><%= character.price %></span>
          <span class="measurementsB-column"><%= character.measurementsB %></span>
          <span class="measurementsW-column"><%= character.measurementsW %></span>
          <span class="measurementsH-column"><%= character.measurementsH %></span>
          <span class="marineClass-column"><%= character.marineClass.marineClass %></span>


        </div>
      </li>
     <% }) %>
   </ul>
```

### 試したこと

ejsの書き方の見本をみながら;をつけたりと試してみました。

### 補足情報（FW/ツールのバージョンなど）

Cannot read property 'forEach' of undefinedと出ます

```ejs
    <script type="text/javascript">
      var board= "<%= board %>";
      alert(board);
      alert(board.x);
    </script>
```
レンダリングする時に定義したboardの中身にはclassが入っており、これは自身の変数xを持っているのですが、一つ目のアラートでは「object object」と表示されるのですが
二つ目のアラートではundefinedとなってしまいます。 
ちなみに下記のようにやるとうまくいきます
```ejs
    <script type="text/javascript">
    alert("<%= board.x %>")
    </script>
```

違いがわかりません。教えていただけると助かります。

javascriptとejsの変数の受け渡しについて

### 前提・実現したいこと
「JavaScriptエンジニアのためのNode.js入門」を写経しつつNodeを学習しています。
ですが、expressを扱う章から実行でエラーが起きるようになりました。

エラーメッセージを表示させず、ブラウザに出力されるはずのhtmlを出力させたいです。

### 発生している問題・エラーメッセージ

node/にはejs,express,body-parserをnpm installしています。
ブラウザでlocalhost:1234にアクセスし、更新をすると下記のエラーメッセージが出力されます。

```console
$ node express-bk_02.js
サーバを起動したぜ

// ブラウザ更新後に以下が出力

Error: Failed to lookup view "express-bk_02.ejs" in views directory "/Applications/MAMP/htdocs/node/views"
    at Function.render (/Applications/MAMP/htdocs/node/node_modules/express/lib/application.js:580:17)
    at ServerResponse.render (/Applications/MAMP/htdocs/node/node_modules/express/lib/response.js:1012:7)
    at app.get (/Applications/MAMP/htdocs/node/express-bk_02.js:8:7)
    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/layer.js:95:5)
    at next (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/layer.js:95:5)
    at /Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:335:12)
    at next (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:275:10)
```

```browser
Error: Failed to lookup view "express-bk_02.ejs" in views directory "/Applications/MAMP/htdocs/node/views"
    at Function.render (/Applications/MAMP/htdocs/node/node_modules/express/lib/application.js:580:17)
    at ServerResponse.render (/Applications/MAMP/htdocs/node/node_modules/express/lib/response.js:1012:7)
    at app.get (/Applications/MAMP/htdocs/node/express-bk_02.js:8:7)
    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/layer.js:95:5)
    at next (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/layer.js:95:5)
    at /Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:335:12)
    at next (/Applications/MAMP/htdocs/node/node_modules/express/lib/router/index.js:275:10)
```

### 該当のソースコード

express-bk_02.js
```js
var express = require('express');
var ejs = require("ejs");
var app = express();

app.engine('ejs', ejs.renderFile);

app.get('/', (req, res) => {
  res.render('express-bk_02.ejs', {
    contents: '<p>hogehoge</p>'
  });
});

var server = app.listen(1234, () => {
  console.log('サーバを起動したぜ');
});
```
express-bk_02.ejs
```ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <%- contents %>
</body>
</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
var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello World!');
});
app.listen(3000, () => {
  console.log('サーバ起動したよ。。。')
});
```

### 補足情報（FW/ツールのバージョンなど）
JavaScriptエンジニアのためのNode.js入門/天田士郎著

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

VSCodeでejsファイルを保存するとHTML(Angular)として認識され、Prettierのフォーマッターが動作してしまいます。
ejsファイルの時はフォーマッターを動かしたくないのですが、HTMLファイルの時は動かしたいのですがどうしたら実現できるでしょうか？

ドキュメントを見るとHTML単位で動作するしないは設定できそうですが、ejs拡張子のときみたいな指定はできないのでしょうか？
https://github.com/prettier/prettier-vscode#default-formatter


VSCodeでファイル保存時、特定の拡張子の時にPrettierを止めたい

下記画像index.html上のように index.ejs上でも
divと入力すると予測変換が出て、 →　 <div></div>　となるようにしたい。

index.html上でdivと打ち、予測変換すると　<div></div> に勝手に変換されるのですが、

index.ejs上でdivと打っても何も変換されません。

![イメージ説明](465c390d1e5280f67423ff802f26edfb.png)

---
**試したこと**

setting.jsonにて下記を設定しましたがダメでした。
![イメージ説明](cf7f64444c130f823bae1e9ef59afc60.png)


考えられる原因何かありますでしょうか？

vscodeでindex.ejs上のコードを書くときに予測変換を出したい settings.json

###前提・実現したいこと 
Express.jsを使ってあるフォルダのファイルパス一覧を取得したのですが、その配列データをejsで表示させようとしたら、エラーが発生しました。
ファイルパスを格納するスクリプトは以下のサイトを参考に実装しました。
[リンク内容](https://qiita.com/taka555/items/0e637fd42594b2f9a7af)

利用環境
0. macbook air バージョン11.5.2
0. node.js v16.8.0
0. express@4.17.1
0. express-generator@4.16.
### 実装したスクリプト
先のサイトをに参考し、ファイルパスを取得するスクリプト
- getFilePath.js
```javascript
// 目的のフォルダがあるパス
const root = "/Users/user_name/devid_data/";
const fs = require('fs');

const listFiles = dirPath => {
    const files = [];
    const paths = fs.readdirSync(dirPath);

    for (let name of paths) {
        try {
            const path = `${dirPath}/${name}`;
            const stat = fs.statSync(path);
            switch (true) {
                case stat.isFile():
                    files.push(path);
                    break;

                case stat.isDirectory():
                    files.push(...listFiles(path));
                    break;

                default:
            }
        } catch (err) {
            console.error('error:', err.message);
        }
    }

    return files;;
}

exports.files = listFiles(root);
exports.dir = fs.readdirSync(root);


```
### ExPressで実装したスクリプト
- filePath.js
```js
var express = require("express");
var router = express.Router();
// ファイルパス一覧を取得
var paths = require('../public/javascripts/getFilePath.js');

var files = paths.files;
var dir = paths.dir;

// ディレクトリを表示
router.get('/', function(req, res) { ;
    res.render('index', {dir : dir});
});

module.exports = router;

```
### 取得したディレクトリのデータ
```
[
  'i-4rqsyt4jv9ens16cfi54',
  'i-5e4ulh3jmca7ph7pu6wz',
  'i-8i3x4xg8icngy3wcc54c',
  'i-9pavidstc72v798pj1wc',
  'i-9recr64sazlcbbvxx7vq',
  'i-aounrrql0emnv8af6z1y',
  'i-dbsr1qsuv5zkwmimeoff',
  'i-i5s9c5bdiwntz5w22hna',
  'i-iae78zqdbj175jaq4alg',
  'i-q2ne8j41qxx18dqqst1e',
  'i-szzy0ynmukb0q6xngfgc',
  'i-vmk88y401h30aas4th5k',
  'i-wd1p10p4gnof43shq3we',
  'i-y069sfca7sdozkv9qndo'
]
```
### app.js
```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 pathsRouter = require('./routes/filePath');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

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);

//  ディレクトリを表示させる
app.use('/', pathsRouter);

// 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;

```
### index.ejs
取得した配列データを表示させたいファイル
```ejs
<!DOCTYPE html>
<html>
  <head>
    <title>サンプル</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <div id="file_tree">
    ***エラーになる***
        <%= dir%>
    </div>
  </body>
</html>

```
### エラー内容
エラー表示の場所は上記の <%= dir%>の所で、メッセージは”dir is not defined”となりました。

Express.js（ejs使用）で、配列データ一覧を表示させたい

EJSでCSSを読み込みたいと思っています。

hello.ejsにhead内には、
    <link type="text/css" rel="stylesheet" href="../public/stylesheet/style.css">
を書いており、
bodyの閉じタグの前に
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="../public/javascript/script.js"></script>
を書いていますが、エラーが出てしまいます。

app.jsには
app.use(express.static('public'));
と書いているのですが、他に
app.use(express.static(__dirname+"/public"));
も試してみましたがダメでした。

わかる方、教えていただけると嬉しいです。よろしくお願いいたします！

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-07-30/7ea8e5e7-9926-4960-bfaa-d1bd4d12c48b.png)

![![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-07-30/57a19270-6eb7-4779-9f96-5af39a57b590.png)](https://ddjkaamml8q8x.cloudfront.net/questions/2022-07-30/0923609f-c858-4088-bbcc-9a102f6b6dc1.png)



