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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

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

Q&A

2回答

1917閲覧

nodeでcssとjsを読み込めない

Izumo1101

総合スコア49

Node.js

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

0グッド

0クリップ

投稿2020/04/04 07:17

編集2022/01/12 10:55

ある程度動作確認を済ませた状況で、htmlにBootstrapを使用してjsとcssを読み込む設定にしました。

html

1 <!-- BootstrapのCSS読み込み --> 2 <link href="css/bootstrap.min.css" rel="stylesheet"> 3 <!-- jQuery読み込み --> 4 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 5 <!-- BootstrapのJS読み込み --> 6 <script src="js/bootstrap.min.js"></script> 7  <!-- node関係のjs読み込み --> 8  <script src="/socket.io/socket.io.js"></script> 9  <script src="//code.jquery.com/jquery-1.11.1.js"></script>

index.html
css
|_bootstrap.min.css
is
|_bootstrap.min.js

サーバーで動かすとどうもjsもcssも読み込んでいないように思います。どこを修正すればよいか教えてください。

node

1var app = require('express')();//expressを使うため 2var http = require('http').Server(app);//expressを使って通信を扱う 3var io = require('socket.io')(http);//socketを使うため 4var POST = 1234;//localhost:3000 5var fs = require('fs');//メッセージ格納json 6var database = fs.readFileSync('database.json' , 'utf-8'); 7var obj = JSON.parse(database); 8var items = obj.items; 9//名簿格納json 10var fs2 = require('fs'); 11var meibo = fs2.readFileSync('meibo.json' , 'utf-8'); 12var obj2 = JSON.parse(meibo); 13var items2 = obj2.items; 14var i; 15var item; 16var id; 17var ms; 18 19 20//ルートディレクトリにアクセスした時に動く処理 21app.get('/', function(req, res) { 22 //index.htmlにリダイレクトする 23 res.sendFile(__dirname + '/index.html'); 24}); 25 26//socket.ioに接続された時に動く処理 27io.on('connection', function(socket) { 28 29 30 socket.on('setUserName', function (userName) { 31 if(!userName) userName = '匿名'; 32 //投稿者判定 33 for (i in items2) { 34 item = items2[i]; 35 id = item.id; 36 name = item.name; 37 if(id == userName){ 38 socket.userName = name ; 39 //io.emit('message', socket.userName + 'さんようこそ!', '管理者'); 40 break; 41 } 42 } 43 //メッセージを表示するループ 44 for (i in items) { 45 item = items[i]; 46 id = item.id; 47 ms = item.message; 48 //if(id==socket.userName){ 49 io.emit('message', ms, id); 50 //} 51 52 } 53 io.emit('message', socket.userName + 'さんようこそ!', '管理者'); 54 }); 55 56 console.log('入室したユーザー : %s', socket.userName); 57 58 59 60 //接続時に振られた一意のIDをコンソールに表示 61 console.log('入室したID : %s', socket.id); 62 //接続時に全員にIDを表示(messageというイベントでクライアント側とやりとりする) 63 64 65 66 //messageイベントで動く 67 //全員に取得したメッセージとIDを表示 68 socket.on('message', function(msj) { 69 io.emit('message', msj, socket.userName); 70 obj.items.push({id: socket.userName,message: msj}); 71   fs.writeFileSync('database.json', JSON.stringify(obj)); 72   //console.log(obj); 73 }); 74 75 //接続が切れた時に動く 76 //接続が切れたIDを全員に表示 77 socket.on('disconnect', function(e) { 78 console.log('接続が切れたID : %s', socket.userName); 79 }); 80}); 81 82//接続待ち状態になる 83http.listen(POST, function() { 84 console.log('接続開始', POST); 85 console.log(http); 86}); 87 88

ひとまずこの事象については

node

1app.get('/css/bootstrap.min.css', function (req, res) { 2 res.sendfile(__dirname + '/css/bootstrap.min.css'); 3}); 4app.get('/js/bootstrap.min.js', function (req, res) { 5 res.sendfile(__dirname + 'js/bootstrap.min.js'); 6});

で解決しましたが、読み込みたいファイルが多くなればなるほどapp.use(express.static(__dirname));というような表記が必要になるだろうと思いますので、引き続きこの件についてアドバイスがあればお願いします。

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

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

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

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

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

guest

回答2

0

app.use(express.static(__dirname));というような表記が必要になるだろう

express.static の機能は指定のディレクトリに置いた 静的なファイルを適切に応答するものです。

teratail express.staticの使用方法

引き続きこの件についてアドバイス

socket.io を使って凝ったシステムを組む前に、html, jpeg, png, css, js の順でスタティックファイルを応答できるようにするべきです。

NodeJS は既成のサーバーアプリケーションとは異なり、必要な機能を自ら実装しなければなりません。

この実装作業をミドルウェアという概念で簡単に実装できるようにするフレームワークが express です。
一度、コードを追いかけて、ミドルウェア実装の仕組みを確認されたほうが良いと思います。

投稿2020/04/04 13:17

AkitoshiManabe

総合スコア5432

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

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

0

Expressでは、CSSや画像ファイルなどの静的ファイルへのルーティングはstaticの指定が必要です。

たとえば静的ファイルを格納するフォルダがあったとして

public  +- img  +- javascripts  +- stylesheets

以下のように指定します。
app.use(express.static('public'));

投稿2020/04/04 07:36

technocore

総合スコア7200

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

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

Izumo1101

2020/04/04 07:55

親フォルダはNewChatという名前を付けています。 var app = require('express')();//expressを使うため var http = require('http').Server(app);//expressを使って通信を扱う var io = require('socket.io')(http);//socketを使うため var POST = 1234;//localhost:1234 var app2 = app(); app2.use(app.static('NewChat')); ということかと思いましたがコンソールで C:\Users\annji\Desktop\NewChat\node_modules\finalhandler\index.js:256 return typeof res.headersSent !== 'boolean' ^ TypeError: Cannot read property 'headersSent' of undefined at headersSent (C:\Users\annji\Desktop\NewChat\node_modules\finalhandler\index.js:256:21) at C:\Users\annji\Desktop\NewChat\node_modules\finalhandler\index.js:92:17 at Function.handle (C:\Users\annji\Desktop\NewChat\node_modules\express\lib\application.js:170:5) at app (C:\Users\annji\Desktop\NewChat\node_modules\express\lib\express.js:39:9) at Object.<anonymous> (C:\Users\annji\Desktop\NewChat\chat.js:6:12) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) と言われます。 なにか根本的に間違っていますでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問