ローカルサーバによってブラウザ上でファイルを読み込み可能にする

Question

実現したいこと

fetchを使用してサーバサイドのエンドポイント/getMelodyから，melody.txtの内容を非同期で取得したいと考えております．
fetchを使用してサーバサイドのエンドポイント/docsから，melody.txtの内容を非同期で取得したいと考えております．
サーバサイドのコードをserver.jsに記述しています．
ひとまずはページ上のRunボタンを押下した際に，この取得を行い，デベロッパツールのコンソールにmelody.txtの内容を出力しようと考えております．

https://github.com/snym-yt/VisualPMusic
このリポジトリでファイル構成，およびファイルの内容が確認することが可能です．
(質問本文での情報過多を防ぐためにこのような形にさせていただいております．ご了承ください)
index.html, script.js, server.js, docs/melody.txtの4ファイルが本質問に関係していると考えております．

環境

• MacBool Air
• Google Chrome

現状

:8080/getMelody:1     Failed to load resource: the server responded with a status of 404 (Not Found)
script.js:121 Melody: 

VisualPMusic % http-server

Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://192.168.0.16:8080
Hit CTRL-C to stop the server

このようなエラー，状態が出ております．

確認したこと/お聞きしたいこと

• パスの確認

index.htmlから見ても，server.jsから見ても，docs/melody.txtの相対パスは問題ないと考えております．

• エンドポイントの確認

Expressを使用して齟齬なく設定されていると考えております．

• ローカルサーバの再起動
• キャッシュの削除

他にどのようなことを確認すればよろしいでしょうか，
また他に効率的なファイルの読み取り方法はあったりしますでしょうか．

追記1

"/getMelody"のとき

"/docs"のとき

追記2

express install 前

VisualPMusic % npm --version
10.1.0
VisualPMusic % express --version
zsh: command not found: express
VisualPMusic % npm ls | grep express
VisualPMusic % npm ls -g | grep express
VisualPMusic % node server.js
node:internal/modules/cjs/loader:1051
  throw err;
  ^

Error: Cannot find module 'express'
Require stack:
- VisualPMusic/server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (VisualPMusic/server.js:1:17)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'VisualPMusic/server.js' ]
}

Node.js v20.8.0

nodeのバージョン確認

VisualPMusic % Node --version
v20.8.0

npm install express　結果

VisualPMusic % npm install express

added 62 packages in 996ms

11 packages are looking for funding
  run `npm fund` for details

npm init　結果

VisualPMusic % npm init 
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (visualpmusic) 
version: (1.0.0) 
entry point: (script.js) 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /VisualPMusic/package.json:

{
  "dependencies": {
    "express": "^4.18.2"
  },
  "scripts": {
    "start": "node server.js"
  },
  "name": "visualpmusic",
  "description": "## Purpose PMusicをビジュアルプログラミングにする．",
  "version": "1.0.0",
  "main": "script.js",
  "directories": {
    "doc": "docs"
  },
  "devDependencies": {},
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) 
VisualPMusic % express --version
4.16.1

express install 後

VisualPMusic % express --version
4.16.1
VisualPMusic % npm ls | grep express
└── express@4.18.2
VisualPMusic % npm ls -g | grep express
├── express-generator@4.16.1
VisualPMusic % node server.js
Server is running on http://localhost:8080

https://kinsta.com/jp/knowledgebase/install-express/
この記事を見て，npm install -g express-generatorを行ったので-gのものも反応してしまっているかもしれません
これは不都合でしょうか？
node server.jsを行った後http-serverを実行しましたが，エラーは同じものが出力されました．
/getMelodyを/docs/melody.txtに変更したところ，404エラーはなくなりました．
しかし，melody.txtの中身の出力を期待しているのに対して，異なったものが出力されてしまいました．

getMelodyを変更した後のコンソール(冒頭のみ抜粋)

Melody: <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Index of /docs/</title>
    <style type="text/css">i.icon { display: block; height: 16px; width: 16px; }
table tr { white-space: nowrap; }
td.perms {}
td.file-size { text-align: right; padding-left: 1em; }
td.display-name { padding-left: 1em; }
i.icon-_blank {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWBJREFUeNqEUj1LxEAQnd1MVA4lyIEWx6UIKEGUExGsbC3tLfwJ/hT/g7VlCnubqxXBwg/Q4hQP/LhKL5nZuBsvuGfW5MGyuzM7jzdvVuR5DgYnZ+f99ai7Vt5t9K9unu4HLweI3qWYxI6PDosdy0fhcntxO44CcOBzPA7mfEyuHwf7ntQk4jcnywOxIlfxOCNYaLVgb6cXbkTdhJXq2SIlNMC0xIqhHczDbi8OVzpLSUa0WebRfmigLHqj1EcPZnwf7gbDIrYVRyEinurj6jTBHyI7pqVrFQqEbt6TEmZ9v1NRAJNC1xTYxIQh/MmRUlmFQE3qWOW1nqB2TWk1/3tgJV0waVvkFIEeZbHq4ElyKzAmEXOx6gnEVJuWBzmkRJBRPYGZBDsVaOlpSgVJE2yVaAe/0kx/3azBRO0VsbMFZE3CDSZKweZfYIVg+DZ6v7h9GDVOwZPw/PoxKu/fAgwALbDAXf7DdQkAAAAASUVORK5CYII=");
}

i.icon-_page {

play(60, 0.500000)

Comments

[maisumakun]

> index.htmlから見ても，server.jsから見ても，docs/melody.txtの相対パスは問題ないと考えております．

こちらはブラウザ検証ツールのNetworkタブを見れば、どのようなリクエストが飛んでいるか確認できます。「リクエストのURL間違い」か「サーバが返せていない」のか、まずは切り分けてください。

[think49]

@aaaa____ さん
> :8080/getMelody:1 Failed to load resource: the server responded with a status of 404 (Not Found)

通信リクエスト先は "getMelody" なのですか？

> index.htmlから見ても，server.jsから見ても，docs/melody.txtの相対パスは問題ないと考えております．

"melody.txt" にすべきではないですか？

[shinoharat]

【１】以下のコマンドの結果を教えてください。

$ npm --version
$ express --version
$ npm ls | grep express
$ npm ls -g | grep express

【２】以下のコマンドを実行し、

$ node server.js

その後 /getMelody にアクセスしても、同様に404になりますか？

[aaaa____]

@maisumakun 様
Networkタブを開いてみたのですが，「リクエストのURL間違い」か「サーバが返せていない」のかを切り分ける材料等はどこにあるのか伺ってもよろしいでしょうか．

[aaaa____]

@think49様
私の理解が間違っていましたら申し訳ないのですが，`fetch`する先の/getMelodyは自分で定義したからになるのではないでしょうか．
また，相対パスの話については，melody.txtはdocsフォルダに格納されているためmelody.txtだけにしてしまうと存在しないパスになってしまうのではないでしょうか．

[aaaa____]

@shiroharat様
お伝えいただいたコマンドの結果を，質問本文に追記させていただきました．
【1】下二つは結果が出力されなかったので，expressがinstallされていないのが原因のようですね．
【2】については，この後に行ってみても404が出てしまいました，おそらくこちらもexpressがないことが原因かもしれません．

[maisumakun]

> Networkタブを開いてみたのですが，「リクエストのURL間違い」か「サーバが返せていない」のかを切り分ける材料等はどこにあるのか伺ってもよろしいでしょうか．

「All」あるいは「Fetch/XHR」に切り替えてください。「JS」は「JavaScriptファイル自体」に関する情報であって、「JavaScriptから起こした通信」を意味するものではありません。

[aaaa____]

@maisumakun様
「Fetch/XHR」に切り替えたものにキャプチャを差し替えました．
ご確認宜しくお願いいたします．

[maisumakun]

アクセスした「/getMelody」というパスは、意図通りですか？

[think49]

@aaaa____ さん
> 私の理解が間違っていましたら申し訳ないのですが，`fetch`する先の/getMelodyは自分で定義したからになるのではないでしょうか．

・「追記1」の [Request URL] に記載されているURLをブラウザで開いた場合、期待通りの表示になりますか。
・"getMelody" というファイルがルートディレクトリに存在していますか。

> また，相対パスの話については，melody.txtはdocsフォルダに格納されているためmelody.txtだけにしてしまうと存在しないパスになってしまうのではないでしょうか．

"melody.txt" が非公開ディレクトリにあるのならその通りです。
公開ディレクトリ内にあるであろう "getMelody" が "melody.txt" の内容を読み込み、出力する必要があります。

[aaaa____]

@maisumakun様
私が勘違いをしていたかもしれません．
/getMelodyは命名のような形で考えていたのですが，/docsに変更をしたところ，404エラーは解消されました．
変更した後のデベロッパツールのキャプチャを質問本文に追記させていただきます．

[aaaa____]

@think49様
"getMelody"というファイル，フォルダはルートディレクトリに存在していないので変更し，"/docs"や"docs/melody.txt"に変更してみたところ，404エラーはでませんでした．
しかし期待していた出力結果ではありませんでした．期待しているものは，txtファイルの中身をそのまま出力するものです．

[think49]

@aaaa____ さん
"melody.txt" の中身はJavaScriptコードに見えますが、Fetch APIでJavaScriptコードを読み込まなければならない事情があるのでしょうか。

特別な事情がないのであれば、ファイル名を melody.js にでもして、script要素で読み込むのが適切だと思います。
Fetch APIでJavaScriptコードを読み込んだとしても、eval() や new Function で評価しない限りはJavaScriptコードとして実行されません。
実行速度に難があり、意図しない動きも簡単にできてしまうことから eval() や new Function の使用には慎重であるべきと思いますが、どのような意図でこの設計になっているのでしょうか。

[aaaa____]

@thinjk49様
"melody.txt"の内容が分かりにくいものになってしまっていてもうしわけございません．
しかしこのテキストファイルの中身はjsコードではなく，あくまでただのテキストとなります．

意図としましては，他のプログラムによって"melody.txt"を書き換え，その内容によってWebAudioAPIの挙動を制御しようとしています．
ですので，eval()等で評価することは考えておりません．

追記
現在実行してみたところ，想定通りにテキストファイルの内容をコンソールに出力することができていました．
キャッシュか何かでおかしくなっていたのかもしれません，解決いたしました．
ご協力いただきありがとうございました．

Answer 1

追記ありがとうございます。

既にお気づきかと思いますが、express がインストールされていないため、サーバー側の app.get('/getMelody', ...) が有効になっていないものと思われます。
なので、クライアントからこの url にリクエストしても当然 404 となります。

以下のドキュメントを参考にインストールを行ってみてください。
https://expressjs.com/ja/starter/installing.html

Comments

[aaaa____]

やはりそうですよね，インストールが必要なものだとは考えが及んでいませんでした．
調査不足で申し訳ございません．
参考サイトまでご記載いただきありがとうございます．
しかし，私の行い方が悪いのか，サイトの通りにやってみたつもりではあるのですが，expressのインストールを確認できはしたものの，いまだ404エラーが続いてしまっています．
バージョン情報やコマンドの結果などは改めて質問本文に追記させていただきました．
どこか違和感のある場所や，他に確認すべき場所などがあればご指摘いただけると幸いです．
お手数おかけしますが何卒宜しくお願いいたします．

追記
"/getMelody"としていたところを"/docs"，または"/docs/melody.txt"としたところ，404エラーは出なくなりましたが，melody.txtの内容そのままの出力を期待していたのですが，メタデータのようなものが出力されており，なぜそのようなことになったのかをお聞かせ願えれば幸いです．
結果は質問本文に追記させていただきます．

追記2
キャッシュか何かの影響でメタデータのようなものが出てしまっていたのか，今しがた実行してみたところテキストファイルの内容を想定通り出力することができていました．
ご協力ありがとうございました．