常連

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
https://reffect.co.jp/node-js/express-js-connect-mysql
上のサイトでmodemonをインストールし、express.jsからMySQLへの接続をしていました。
npx modemon app.js　ターミナルで左のコマンドを実行したら以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

```
//ターミナル
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 3306,
  fatal: true
```

### 該当のソースコード

```ここに言語名を入力
//app.js
const express = require('express')
const app = express()
const port = 3000;

const mysql = require('mysql');

const con = mysql.createConnection({
	host: 'localhost',
	user: 'root',
	password: '',
});

con.connect(function(err) {
	if (err) throw err;
	console.log('Connected');
});


app.get('/', (req,res) =>{
  res.send('hello world')
})

app.listen(port, () => console.log(`exaple app listening on port ${port}`))


```

### 試したこと

npm installをしてみましたがどう解決するのかわかりません。
教えて下さいお願いいたします

express.jsからMySQLへの接続でError: connect ECONNREFUSED 127.0.0.1:3306がわかないです

### 実現したいこと
JavaScriptでimport文を実行させたい。

### 発生している問題・分からないこと
JavaScriptでimportを試そうと、[MDN import](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import)を参考に実行しようとしていますがうまくいきません。
importがうまくできていないようです。

WebサーバはExpress.jsです。

プロジェクトは下記のコマンドで生成しています。

```
express --view=ejs ex-gen-app
cd ex-gen-app
npm install
```

実行すると
Firefoxブラウザで表示した場合は、consoleに
```
Loading module from "http://localhost:3000/modules/getPrimes.js" was blocked because of a disalloed MIME type("text/html").
```
と表示され、

chromiumブラウザで表示した場合は、consoleに
```
GET http://localhost:3000/modules/getPrimes.js 
net::ERR_ABORTED 404 (Not Found)
```
と表示されます。



### 該当のソースコード

ex-gen-app/package.json

```
{
  "name": "ex-gen-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  }
}
```
ex-gen-app/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', '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);

// 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;
```

ex-gen-app/routes/index.js

```
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;
```

```ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>

    <script type="module">

        import { getPrimes } from "./modules/getPrimes.js";

        console.log(getPrimes(10)); // [2, 3, 5, 7]

    </script>
  </body>
</html>
```

```JavaScript
// ./views/modules/getPrimes.js
/**
 * `max` より小さな素数のリストを返す。
 */
export function getPrimes(max) {
  const isPrime = Array.from({ length: max }, () => true);
  isPrime[0] = isPrime[1] = false;
  isPrime[2] = true;
  for (let i = 2; i * i < max; i++) {
    if (isPrime[i]) {
      for (let j = i ** 2; j < max; j += i) {
        isPrime[j] = false;
      }
    }
  }
  return [...isPrime.entries()]
    .filter(([, isPrime]) => isPrime)
    .map(([number]) => number);
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
googleやterarailで「javascript import」で検索しましたが、解決には至っていません。
googleで「Loading module was blocked because of a disalloed MIME type("text/html")」で検索してみましたが、解決には至っていません。

### 補足
Webサーバ:Express.js（localhost）
実行PC（サーバー）：VirtualBox（ArchLinux）

よろしくお願いします。

JavaScriptでimport文を試したいが、実行できない

Express.js(TypeScript)のプロジェクトでrouterがうまく動かなくて困っています。

express-generatorで作成した、Express.jsプロジェクトをTypeScriptに変換して、
./src/index.tsを作成し、
ts-nodeで実行できるところまで確認しています。

この2つはjsonが返ってきますが、
http://localhost:3000
http://localhost:3000/api

./src/api/employeeApiController.tsを用意し、このControllerにアクセスさせようとして、
アドレスを入力してもアクセスできなくフリーズしています。
http://localhost:3000/api/employees

わかるかたいらっしゃればお願いします。

■./src/index.ts
```TypeScript
import express, { Request, Response, NextFunction } from "express";
import createError from "http-errors";
import path from "path";
import cookieParser from "cookie-parser";
import logger from "morgan";

const app = express();

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

// ルーターのマウント
import { employeeApiController } from "./api/employeeApiController";
app.use("/api/employees", employeeApiController);

// APIアクセス用のルートハンドラ
app.get("/api", (req: Request, res: Response, next: NextFunction) => {
  res.json({ message: "200 OK" });
});

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

// error handler
app.use(function (err: Error, req: Request, res: Response, next: NextFunction) {
  // 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
  const httpStatusCode = (err as any).status || 500;
  res.status(httpStatusCode).json({ message: httpStatusCode + " " + err.message });
});

// ポート指定
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

module.exports = app;
```

■./src/api/employeeApiController.ts
```TypeScript
import express, { Request, Response, NextFunction } from "express";

export const employeeApiController = () => {
  const router = express.Router();

  // GET /api/employees
  router.get(
    "/",
    (request: Request, response: Response, next: NextFunction) => {
      async () => {
        response.json({ message: "done" });
      };
    }
  );

  return router;
};
```

■ tsconfig.json
```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true
  },
  "include": ["./src/**/*.ts"],
  "exclude": ["node_modules"]
}
```

■ package.json
```json
{
  "name": "backend",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "ts-node ./src/index.ts",
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "@types/cookie-parser": "^1.4.7",
    "@types/debug": "^4.1.12",
    "@types/express": "^4.17.21",
    "@types/http-errors": "^2.0.4",
    "@types/morgan": "^1.9.9",
    "@types/node": "^16.11.10",
    "ts-node": "10.9.1",
    "ts-node-dev": "^2.0.0",
    "typescript": "4.5.2"
  }
}

```

Express.js(TypeScript)のプロジェクトでrouterがうまく動かなくて困っています

現在、expressを用いて簡単なファイルアップロード機能の実装をしております。複数のファイルをformDataを用いて送信し、node.jsのmulterで受信するというものです。

```ここに言語を入力
var upload = multer({ dest: 'uploaded/' });
router.post('/', upload.array('files[]'), function(req, res){
  var filepath = req.body.filepath;
  var files = req.files;
  
  for(var i=0; i<filepath.length; i++){
    console.log(filepath[i]);
    console.log(files[i]);
  }
  
  res.send("ok");
});
```

このlengthに対して「Cannot read property 'length' of undefined」がブラウザで表示されます。しかしサーバサイドではファイル数であるlengthが数字として確認できており正常に動いております。

なぜブラウザ側ではエラー表示されてしまうのでしょうか？
わかる方よろしくお願いします。

なぜ「Cannot read property 'length' of undefined」が表示されるかわからない

### 前提

reactでtodoリストを作ろうとしています。
そこでhtmlないでのscriptのurlが見つからないというエラーメッセージが発生しました。

### 実現したいこと


net::ERR_ABORTED 404 (Not Found)というエラー文章を解決し、コンポーネントをレンダリングできる状態にしたい
### 発生している問題・エラーメッセージ

```
net::ERR_ABORTED 404 (Not Found)が解決できない

```

### 該当のソースコード

```html
<html>
<head>
    <meta charset="UTF-8">

    <title>Todo</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
</head>
<body>
    <h1>こんにちは</h1>
    <div id="root"></div>
    
    <script type="module" src="../../dest/index.js"></script>
    
    

</body>
</html>
```
```js
const express= require("express");
const app = express();
const PORT = 3000;

// const userRouter =require("./routes/user");




app.use(express.static("public/js"))
app.get("/",(req,res) =>{
    res.send("ユーザーです");
});
// app.get('*', (req, res) => res.send('ページは存在しません。'));

// app.use("/user",userRouter); ///user共通で使う　それ以外userrouterに任せる

app.listen(PORT, ()=> console.log("かいし"))
```
```js
'use strict';
import 'core-js/stable';
import 'regenerator-runtime/runtime';



require('core-js/stable');

require('regenerator-runtime/runtime');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _App = require('./App.js');

var _App2 = _interopRequireDefault(_App);

var _client = require('react-dom/client');

var ReactDOM = _interopRequireWildcard(_client);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log('test');


var root = ReactDOM.createRoot(document.getElementById("root"));

root.render(_react2.default.createElement(_App2.default, null));
```
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-31/16cecb69-7399-48c1-b40b-97cb4fe5fffb.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-31/32c30684-e16f-4c62-bb48-cb935722d8e3.png)

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-31/20b16a40-61a5-4c34-bb62-4310fc5307c5.png)
### 試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

net::ERR_ABORTED 404 (Not Found)が解決できない

### パッケージをインストールしたい
現在、node.js、expressを使って学習を進めているなかで新しいパッケージを導入しようとしていました。

```
npm install express-session --save
```
パッケージを導入しようとするのですがエラーがでます。
### 発生している問題・エラーメッセージ

```
npm ERR! code ENOTFOUND
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmjs.org/express-session failed, reason: getaddrinfo ENOTFOUND registry.npmjs.org
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\aero\AppData\Roaming\npm-cache\_logs\2020-03-05T06_19_31_757Z-debug.log
```

### 試したこと

```
npm config set registry http://registry.npmjs.org/
```
下記サイトを参考に上記コマンドを入力しても変化なしでした。。
npmのconfigを触ったらいいのかなとおもっているんですがあまり分かっていないです。。
[npm installで失敗したときの5つの解決方法](https://sugimotonote.com/2017/10/31/npm-install-error/)


### 補足情報（FW/ツールのバージョンなど）

windows10、
nodeのversion:v12.16.1

npm install をするとパッケージによってエラーがでる

##前提・実現したいこと
ドットインストールのExpressコース（2014年に更新終了・アーカイブ済）で、Node.jsのExpressフレームワークを用いたブログの作成をしています。

記事の更新・記事の削除を実装したいのですが、コースのやり方に従うと、
「Cannot POST /posts/0」「404 (Not Found)」というエラーが出てしまいます。

HTTPのフォームで更新・削除の情報を送る時に、POSTメソッドをhidden属性でput(更新)、delete(削除)メソッドに変える処理を行って実装しているのですが、うまくput,deleteととして認識されていないせいでエラーになっているのではないかと思い、解決方法を質問致します。

よろしくお願い致します。


##現在のファイル構成
```bash
├── app.js
├── node_modules
├── package-lock.json
├── package.json
├── routes
│   └── post.js　//全てのルーティング処理
└── views
    ├── partials
    │   ├── footer.ejs
    │   └── header.ejs
    └── posts
        ├── edit.ejs //編集ページ
        ├── index.ejs //記事タイトル一覧ページ（編集・削除ボタン付き）
        ├── new.ejs
        └── show.ejs
```

##現在のコード

・app.js【メイン処理】
```javascript
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const post = require('./routes/post')


app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

//middleware
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}));


//記事一覧ページ
app.get('/',post.index);
//記事詳細ページ
app.get('/posts/:id([0-9]+)',post.show);
//新規作成ページ
app.get('/posts/new',post.new);
//新規作成した記事の投稿
app.post('/posts/create',post.create);
//更新のための編集フォーム表示
app.get('/posts/:id/edit',post.edit);
//更新した記事の投稿【PUTメソッド】
app.put('/posts/:id/',post.update);
//記事の削除【DELETEメソッド】
app.delete('/posts/:id/',post.destroy);


app.listen(3100, () => {
  console.log('server is up on port 3100')
});


```

・post.js【ルーティング処理】
```javascript
var posts = [
  {title: 'title0', body: 'body0'},
  {title: 'title1', body: 'body1'},
  {title: 'title2', body: 'body2'},
]

exports.index = function(req,res){
  res.render('posts/index', {posts: posts});
};
exports.show = function(req,res){
  res.render('posts/show', {post: posts[req.params.id]});
};
exports.new = function(req,res){
  res.render('posts/new');
};
//更新のための編集フォーム表示
exports.edit = function(req,res){
  res.render('posts/edit', {post:posts[req.params.id], id:req.params.id});
};
//更新した記事の投稿【PUTメソッド】
exports.update = function(req,res){
 posts[req.body.id]={
   title: req.body.title,
   body: req.body.body
 }
 res.redirect('/');
};
//記事の削除【DELETEメソッド】
exports.destroy = function(req,res){
 posts.splice(req.body.id, 1);
 res.redirect('/');
};

exports.create = function(req, res){
  var post = {
      title: req.body.title,
      body: req.body.body
  };
  posts.push(post);
  res.redirect('/');
};
```

・index.ejs【記事タイトル一覧＆編集・削除ボタン】
```ejs
<%- include ('../partials/header'); %>
<h1>Posts</h1>
<ul>
<% for (var i=0; i<posts.length; i++){ %>
<li>
    <a href="/posts/<%= i %>"><%= posts[i].title %></a>
    <a href="/posts/<%= i %>/edit">[Edit]</a>

//HTMLにはdeleteメソッドがないため、見せかけのコードで代用
    <form method="post" action="/posts/<%= i %>">
//以下の一文を入れるとdeleteメソッドとして認識されるはず
        <input type="hidden" name="_method" value="delete">

        <input type="hidden" name="id" value="<%= i %>">
        <input type="submit" value="削除">
    </form>
</li>
<% } %>
</ul>
<p><a href="/posts/new">Add new</a></p>
<%- include ('../partials/footer'); %>
```

・edit.ejs【編集ページ】
```ejs
<%- include ('../partials/header'); %>
<h1>Edit</h1>
//HTMLにはputメソッドがないため、見せかけのコードで代用
<form method="post" action="/posts/<%= id %>">
   <input type="text" name="title" value="<%= post.title %>">
   <input type="text" name="body" value="<%= post.body %>">

//以下の一文を入れるとputメソッドとして認識されるはず
   <input type="hidden" name="_method" value="put">

   <input type="hidden" name="id" value="<%= id %>">
   <input type="submit" value="更新">
</form>

<p><a href="/">Back to Top</a></p>
<%- include ('../partials/footer'); %>
```

##問題点
「title0」の「削除」ボタン・「更新」ボタンを押すと、
Cannot POST /posts/0
404 (Not Found)

というエラーが出てしまう

##試したこと
「Cannot POST」と書かれているので、PUT,DELETEとして認識して欲しかったフォームの送信が、POSTとして認識されたままなのではないか？と疑っています。

input type="hidden" name="_method"を使ったPUT,DELETEの実装方法は古くなってしまっているのでしょうか？

2015年の記事[『[html/css] httpのフォームでDELETEやPUTのメソッドを送る方法』](http://portaltan.hatenablog.com/entry/2015/07/22/122031)では有効だったようです。

こちらの記事（[『PUTやDELETEのHTTPリクエストを送信する方法色々』](https://kapiecii.hatenablog.com/entry/2019/11/23/100000)）では、「HTMLのformで”_method”として指定する方法」は実装できず、「ブラウザのバージョンが上がったことにより、動作しなくなったのかもしれません」と書かれていました。

HTMLでPUT, DELETEメソッドを送信する方法

#概要
Expressにて短時間でアクセスエラーが複数回あった場合、「Cannot set headers after they are sent to the client」とログに出力されます。
データを返した後にヘッダーを上書きしたことが原因のようです。
短時間で複数回アクセスエラーがあった時に出力されるので前のエラー処理を追い越してる？または二重に実行しようとしているのが原因かと思います。

#実際のコード
```ここに言語を入力
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
  next()
});

// convert url string param to expected Type
const convertUrlType = (param:any, type:any) => {
  switch(type) {
    case "N":
      return Number.parseInt(param);
    default:
      return param;
  }
}

app.get(path + hashKeyPath, function(req, res) {
  const condition:any = {}
  condition[partitionKeyName] = {
    ComparisonOperator: 'EQ'
  }
  condition[partitionKeyName]['AttributeValueList'] = [ convertUrlType(req.params[partitionKeyName], partitionKeyType) ];
  try {
    condition[partitionKeyName]['AttributeValueList'] = [ convertUrlType(req.params[partitionKeyName], partitionKeyType) ];
  } catch(err) {
    res.statusCode = 500;
    res.json({error: 'Wrong column type ' + err});
  }


  const queryParams = {
    TableName: tableName,
    KeyConditions: condition
  }
  dynamodb.query(queryParams, (err, data) => {
    if (err) {
      res.statusCode = 500;
      res.json({error: 'Could not load items: ' + err});
    } else {
      res.json(data.Items);
    }
  });
});
```

#質問
res.json()でそこで処理が終わるという認識なのですが、処理は完全に終わっていないのでしょうか？
コード内のエラーハンドリングで、問題があるかと思いますが、アドバイス頂けないでしょうか。
宜しくお願い致します。