常連

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
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がわかないです

現在、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」が表示されるかわからない

### パッケージをインストールしたい
現在、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 をするとパッケージによってエラーがでる

### 実現したいこと
現在、Node.jsの学習の延長でMERNスタック（MongoDB, Express, React, Node.js）を勉強中です。
MERNスタックを使用してアプリケーションを構築する際に、一般的なデザインパターン（全体設計やアーキテクチャ）がどのようなものになるのかを知りたいです。

ここで知りたいデザインパターンは、
Factory パターンやSingleton パターンなどではなく、MVCやMVP、MVVMなどのアーキテクチャに関するパターンです。



### 発生している問題・分からないこと
例えば、以下の点についてアドバイスをいただけると助かります

MERNスタックを利用する場合、採用されることが多いデザインパターン（例: MVCパターンなど）はありますか？
あるいは要件に応じて柔軟に選ぶべきでしょうか？

経験者の方からの具体例も教えていただけると幸いです。

よろしくお願いいたします。




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

```
特になし
```

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

##### 上記の詳細・結果
私の調べた範囲では以下のような感じかなと思いました。
・MERNスタックで実装すれば自然と基本的にMVCパターンになる
・そのため小規模アプリではMVCパターンを採用する
・大規模アプリでは、MVVMやMVP、Clean Architectureなどを採用する事もある


### 補足
特になし

MERNスタックでのアーキテクチャのデザインパターンについて

### 前提

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)が解決できない

### 実現したいこと
getリクエストでHTMLが返却されてしまいます(apiに到達できていないと思います。)
前提：Viteでプロジェクトを作成しています。
タイトルの件につきまして、どれだけ確認しても解決策が分からない為ご教授頂けますと幸いです。

### 発生している問題・分からないこと
APIがうまく到達していないように思えます。

### エラーメッセージ
```error
エラーではありませんが、
{data: '<!doctype html>\n<html lang="en">\n  <head>\n    <scr….jsx?t=1739837589140">\x3C/script>\n  </body>\n</html>', status: 200, statusText: 'OK', headers: AxiosHeaders, config: {…}, …}
config
: 
{transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
data
: 
"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <script type=\"module\">\nimport RefreshRuntime from \"/@react-refresh\"\nRefreshRuntime.injectIntoGlobalHook(window)\nwindow.$RefreshReg$ = () => {}\nwindow.$RefreshSig$ = () => (type) => type\nwindow.__vite_plugin_react_preamble_installed__ = true\n</script>\n\n    <script type=\"module\" src=\"/@vite/client\"></script>\n\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n    <link rel=\"stylesheet\" href=\"/src/styles.css\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite + React</title>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"/src/main.jsx?t=1739837589140\"></script>\n  </body>\n</html>"
headers
: 
AxiosHeaders {cache-control: 'no-cache', content-length: '742', content-type: 'text/html', date: 'Tue, 18 Feb 2025 00:13:12 GMT', etag: 'W/"2e6-sFtc7NHEO0UE8RiyMUChkYL2xjU"', …}
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status
: 
200
statusText
: 
"OK"
[[Prototype]]
: 
Object
```

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

```posts.js
router.get("/timeline/:userId", async (req, res) => {

      conso.log("API到達テスト")

      try {

        // 自分の投稿

        const currentUser = await User.findById(req.params.userId);

        const userPosts = await Post.find({ userId: currentUser._id });

        // フォロー中の投稿

        const friendPosts = await Promise.all(

          currentUser.followings.map((friendId) => {

            return Post.find({ userId: friendId })

          })

        );

        // return res.status(200).json(userPosts.concat(...friendPosts));

        return res.send("API成功テスト")

      } catch (err) {

        // return res.status(500).json(err);

        return res.send("API失敗テスト")

      }

    });

→このファイルで記述しているconsoleは何も表示されていませんので、そもそもこのapiまで到達できていないと思っています。
```

```server.js
const PORT = 5001;

mongoose.connect(process.env.MONGOURL).then(()=> {
  console.log("接続完了")
}).catch((err)=> {
  console.log(err)
});
app.use(express.json());
app.use("/api/posts", postsRoute)
app.get('/', (req, res) => {
  res.send("hello express");
});
app.listen(PORT, () => {
  console.log("listenテスト")
})

→コマンドラインにconsole内容("接続完了"/"listenテスト")が表示されますので問題なく接続はできていると思います。
```

```package.json(フロントエンド)
"proxy": "http://localhost:5001/api"

→5000は使用済みでしたので、5001を指定、server.jsでのPORTも5001にしているので、問題ないかと思います。
```

```TimeLine.jsx
const TimeLine = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
    const response = await axios.get("/posts/timeline/67a6a4066276f88fa966ca65")
    console.log(response);
    setPosts(response.data)
    };
    fetchPosts();
  },[]);
  return (
    <div className="timeline">
      <div className="timelineWrapper">
        <Share />
      </div>
    </div>
  )
}

→userのidとパス指定も上記までのproxyやミドルウェアのルートを踏まえて間違い無いように思えます。
```

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

##### 上記の詳細・結果
解決できませんでした

### 補足
特になし

MERNスタックの実装でリクエストするとhtmlが返ってきてしまいます

##前提・実現したいこと
ドットインストールの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()でそこで処理が終わるという認識なのですが、処理は完全に終わっていないのでしょうか？
コード内のエラーハンドリングで、問題があるかと思いますが、アドバイス頂けないでしょうか。
宜しくお願い致します。