常連

node.js,MongoDB,Javascript,HTMLを用いてシングルページのウェブアプリケーションを作成中です。
nodeを起動し、jsファイルからhtmlファイルを読み込ませています。
その中でhtmlファイルのコード（スクリプト部分）が長くなってきたので他の外部ファイル（js）に移動しようとしたら
「Uncaught SyntaxError: Unexpected token < ファイル名.js:1」
といったエラーが出てきてしまいました。
検索してもよくわからないのでここで質問させていただきました。
初歩的な質問で申し訳ありませんが、ご存知の方がいらっしゃったらご教授お願いいたします。
html部分は以下のようにし、jsを読み込んでいます。

```lang-html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset= "utf-8">
</head>
<body>
・・・・・・・・・・・

<script type="text/javascript" src="../script.js"></script>
</body>
</html>
```

補足です。
html内に

<script>
jsのファイルの中身
</script>

を記述したときには何もエラーが出ず、
jsファイルの１行目も
var number = 0;
と記述をしており、「<」といった記述がないため困っています。

Unexpected token <　のエラーについて

### 実現したいこと
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が返ってきてしまいます

### 実現したいこと
現在、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スタックでのアーキテクチャのデザインパターンについて

## テーマ、知りたいこと

**要件定義までされていて、そこから先は挑戦してみてね！みたいなテーマ置き場？のようなサイトってありますか？**

機械学習で言うならKaggleが近いのですが・・・
https://www.codexa.net/what-is-kaggle/

もしくは、
**こんなテーマでWebアプリを作成してみては？
というアイディアとかも書き込んでくれればうれしいです！**

※投稿時からの変更点
1. 番号リストKaggleの例を追加
1. 用語を「システム」から「Webアプリ」と変更しました。


## 背景、状況

私は現在、エンジニアに近い？と思われる業務をしています。
たいてい、こんな感じのことです。
- お客さんが、システム開発によって解決したい課題を整理する（コンサルティング）
- 具体的なシステムの企画・提案・マネジメント
- 要件定義 / ドキュメントの作成

そして、最近はこちらに近いスキルを高める必要が出てきました。
- 開発（ プログラミング ）

調べてみたところ、スキルを身に着けるには、システムを自分で開発してみることがいいと一般的に言われているようでした。
しかし、自分でどんなシステム開発しようかと考えてみると。。。
思い浮かばないものです；；

プログラムの問題を解くだけならpaizaにそんなのがありますが、それでは少し実用性に欠けていると考えています。

そこで、再度になりますが
**要件定義までされていて、そこから先は挑戦してみてね！みたいなテーマ置き場？のようなサイトってありますか？**

機械学習で言うならKaggleが近いのですが・・・
https://www.codexa.net/what-is-kaggle/

また、
> もしくは、
> **こんなテーマでシステム作成してみては？
> というアイディアとかも書き込んでくれればうれしいです！**
と言っているので、自分について軽く。。。
経験言語：SQL, JS, Python, Perl, Java（Android Studioを軽くいじった程度）
経験DB：Oracle. MongoDB
です。


【意見交換】Webアプリのテーマ（要件定義）がたくさんある置き場のようなサイトってありますか？

サーバの勉強をし始め、データを管理するにはMongoDBやMySQLのような組み込みの機能を使うのが一般的だと最近知ったのですが、これらを商用で利用する場合のライセンスはどうなっているのでしょうか

いくつかサイトを見てみたのですが、これって黙って商用に使っていいのでしょうか・・・


http://anond.hatelabo.jp/20140722001658
http://www.mongodb.jp/mongo/licence

補足：
function(){
//MongoDB内を検索する処理
}
とゆうMongoDBのファイルに関与する関数が有るとします。

例えばアプリケーション（クライアント所有アプリ）から、サーバ内のMongoDBを呼び出す際に
サーバ側に上の関数を配置するのはOKだけど、
クライアントアプリ内に直接上記関数を入れるのはNG

とゆう解釈でしょうか？

データベースのライセンスについて

### 前提

mongoDBのクライアントサービスの起動コマンドである「mongo」が使用できません。

・初学者です。pythonをメインに触っています。
・環境：windows
・mongoDB(enterprise・6.0)のDL・インストールは完了
・パスも通している
・サーバー起動の「mongod」は使える
・DLしたファイルの中のbinをみると mongod はあるが mongo.exe がない（mongoで起動する = mongo.exeがどこかにあるはずという認識です）

### 実現したいこと

mongo のコマンドを使えるようにしたいです。

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

```
'mongo' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```


ご回答お待ちしております。よろしくお願いします。




コマンド「mongo」が使えない　（「mongod」は使える）

JavaScript 初心者です。

下記エラーが表示されていますが、
エラー対応をググりましたが、初心者なためどこが根本的原因なのか分かりませんでした。
確認すべき箇所をご指摘頂けますと幸いです。

[出力されているエラー]
throw er; // Unhandled 'error' event
TypeError: Cannot set property 'products' of undefined
エラーの該当行
>          res.locals.data.products = foundProducts

TypeErrorとなっているファイル↓

```JavaScript
const Product = require('../models/product')
const dataController = {
  index(req, res, next){
      Product.find({}, (err, foundProducts) => {
        if(err){
          res.status(404).send({
            msg: err.message
          })
        } else {
          res.locals.data.products = foundProducts
          next()
        }
      })
  },
  show(req, res, next){
    Product.findById(req.params.id, (err, foundProduct) => {
      if(err){
        res.status(404).send({
          msg: err.message
        })
      } else {
        res.locals.data.product = foundProduct;
        next();
      }
    })
  },
  create(req, res, next){
    Product.create(req.body, (err, createdProduct) => {
      if(err){
        res.status(404).send({
          msg: err.message
        })
      } else {
        res.locals.data.product = createdProduct;
        next();
      }
    })
  },
  buy(req, res, next){
      Product.findByIdAndUpdate(req.params.id, { $inc: {qty: -1} }, (err, updatedQty)=>{
        if(err){
          res.status(404).send({
            msg: err.message
          })
        } else {
          res.locals.data.qty = updatedQty;
          next()
        }
      })
    },
  destroy(req, res, next){
    Product.findByIdAndDelete(req.params.id, (err, deletedProduct) => {
      if(err){
        res.status(404).send({
          msg: err.message
        })
      } else {
        res.locals.data.product = deletedProduct;
        next();
      }
    })
  },
  update(req, res, next){
    Product.findByIdAndUpdate(req.params.id, req.body, { new: true}, (err, updateProduct) => {
      if(err){
        res.status(404).send({
          msg: err.message
        })
      } else {
        res.locals.data.product = updateProduct;
        next();
      }
    })
  }
}

module.exports = dataController;


```

[JavaScript] TypeError: Cannot set property '~~~' of undefined とは

jqueryのajaxを利用してjava側でリクエストを受け取ろうとしておりますが下記のエラーが表示されます。

エラー内容
com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of `com.ransu.lastperiodweb.entity.UnitEntity$Board`: non-static inner classes like this can only by instantiated using default, no-argument constructor
 at [Source: (PushbackInputStream); line: 1, column: 331] (through reference chain: com.ransu.lastperiodweb.entity.UnitEntity["boards"]->java.util.ArrayList[0])

以下に記述するソースのように受け取ったリクエストは
**UnitEntity** にマッピングしてもらい使用する予定なのですがこのマッピングがうまくいっていないようです

こちら試しに**UnitEntity**内にある**Board**オブジェクト部分を空の配列でリクエストを送ってあげると
mongodbへの登録まで無事完了できることが確認できております。
(mongoに登録されるBordは想定通り空の配列で、その他の値も送信したパラメーターに沿って登録されているのを確認)
なのでマッピング対象にオブジェクトが含まれる場合はマッピングする際に特別な記述が必要なのではないかと思っておりますが
そこが掴めずにいる状態になります。

呼び出し先のコントローラー
```java
@RequestMapping(value="/unitCreateAndUpdate", method=RequestMethod.POST)
public JsonResult<UnitDTO> unitCreate(@RequestBody UnitEntity unit) {
	unit = unitService.save(unit);
	return new JsonResult<UnitDTO>(Constants.successCode, Constants.successMsg, new UnitDTO(unit));
}
```

リクエストパラメーターのマッピング先
```java
package com.ransu.lastperiodweb.entity;

import java.util.List;

import org.bson.types.ObjectId;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;

import lombok.Data;

@Data
@Document(collection = "units")
public class UnitEntity {

	@Id
	private ObjectId id;

	private String name;

	private ObjectId sex;

	private List<Board> boards;

	@Data
	public class Board {

		private ObjectId boardId;

		private int quantity;
	}
}

```

UnitService
```java
package com.ransu.lastperiodweb.service;

import org.bson.types.ObjectId;

import com.ransu.lastperiodweb.entity.UnitEntity;

public interface UnitService {

	UnitEntity getUnitById(ObjectId id);

	UnitEntity save(UnitEntity units);

	Boolean delete(UnitEntity units);
}
```

UnitServiceImp
```java
package com.ransu.lastperiodweb.service.imp;

import org.bson.types.ObjectId;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.ransu.lastperiodweb.entity.UnitEntity;
import com.ransu.lastperiodweb.repository.UnitRepository;
import com.ransu.lastperiodweb.service.UnitService;

@Service
public class UnitServiceImp implements UnitService {

	@Autowired
	private UnitRepository repository;

	@Override
	public UnitEntity getUnitById(ObjectId id) {
		return repository.findById(id);
	}

	@Override
	public UnitEntity save(UnitEntity units) {
		return repository.save(units);
	}

	@Override
	public Boolean delete(UnitEntity units) {
		Boolean result = true;
		try {
			repository.delete(units);
		} catch (Exception e) {
			result = false;
		}
		return result;
	}
}

```

UnitRepository
```java
package com.ransu.lastperiodweb.repository;

import org.bson.types.ObjectId;
import org.springframework.data.mongodb.repository.MongoRepository;
import org.springframework.stereotype.Repository;

import com.ransu.lastperiodweb.entity.UnitEntity;

@Repository
public interface UnitRepository extends MongoRepository<UnitEntity, String> {

	UnitEntity findById(ObjectId id);
}

```
こちらぜひ、何かヒントでもわかる方がいましたらご助力をお願いいたします。
また、原因究明の際に何か足りない情報がございましたご指摘をお願いいたします。