質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1637閲覧

node.jsからhtmlを読み込むと、htmlに記述したjavascriptが動かなくなる

kisiaaaa

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/05/15 07:58

node.jsでhtmlを表示させて、そのhtmlにリンクとしてコードの記載しているjavascriptファイルを実行したいのですが、エラーが出てうまくいきません。
解決方法がわかる人がいたら教えてください。
コードが見にくくてすみません。

node.jsでhtmlを表示しているところ(文字数の関係で、htmlを表示する部分だけを記入しています)

javascript

1app.get("/game",(req,res)=>{ 2 res.sendFile("/node_apps/node_app_5/views/game.html"); 3})

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src="/route/index.js"></script>///////ここのリンクで示したコード。 9</head> 10<body> 11 <h1>game</h1> 12 <script src="/socket.io/socket.io.js"></script> 13 <script> 14 let socket = io(); 15 let user_id = ""; 16 let room_id = null; 17 let global_user = null; 18 socket.on("user_data",(data)=>{ 19 if (user_id = ""){ 20 user_id = data[0]; 21 } 22 if (room_id == null){ 23 room_id = data[1]; 24 } 25 }) 26 socket.on("user_name",(name)=>{ 27 console.log("1"+global_user); 28 if (global_user == null){ 29 global_user = name; 30 console.log("2"+global_user); 31 } 32 }) 33 console.log(user_id); 34 </script> 35 36</body> 37</html>

index.js

javascript

1console.log("test");

エラー
イメージ説明

環境

windows10 64bit
ブラウザ edge
node.js v16.13.2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kisiaaaa

2022/05/15 11:22

やってみたらうまくいきました!ありがとうございます。
guest

回答2

0

ベストアンサー

app.getが何なのか説明が無いので推測になりますが、
恐らくExpress.jsなどで作られたエンドポイントでしょう。

Webブラウザは受け取ったHTMLを解析してロードしていきますが、
scriptlinkimgタグを見つけた時は「追加のHTTPリクエストを送信して別のデータを受け取ろうとする」挙動を行います。
その/routes/index.jsファイルを渡す記述をapp.getなどで宣言してやらねばなりません。

js

1app.get("/route/index.js", (req,res)=>{ 2 res.sendFile("/pathToDirectory/route/index.js"); 3})

【おまけ】もしExpress.jsなら

公式ドキュメントの上メニュー「解説→静的ファイル」にこの目的に合致したやり方が載っています。
参考サイト: Express での静的ファイルの提供

投稿2022/05/16 03:15

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

エラーメッセージのとおりです。ブラウザから/route/index.jsにアクセスできるようにする必要があります。

投稿2022/05/15 10:47

maisumakun

総合スコア145184

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kisiaaaa

2022/05/15 10:59

どのようにしてブラウザから/route/index.jsにアクセスするのか教えていただけないでしょうか
kisiaaaa

2022/05/15 11:22

わかりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問