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

Question

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

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

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

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

var app = require('express')();//expressを使うため
var http = require('http').Server(app);//expressを使って通信を扱う
var io = require('socket.io')(http);//socketを使うため
var POST = 1234;//localhost:3000
var fs = require('fs');//メッセージ格納json
var database = fs.readFileSync('database.json' , 'utf-8');
var obj = JSON.parse(database);
var items = obj.items;
//名簿格納json
var fs2 = require('fs');
var meibo = fs2.readFileSync('meibo.json' , 'utf-8');
var obj2 = JSON.parse(meibo);
var items2 = obj2.items;
var i;
var item;
var id;
var ms;


//ルートディレクトリにアクセスした時に動く処理
app.get('/', function(req, res) {
  //index.htmlにリダイレクトする
  res.sendFile(__dirname + '/index.html');
});

//socket.ioに接続された時に動く処理
io.on('connection', function(socket) {


	socket.on('setUserName', function (userName) {
		if(!userName) userName = '匿名';
		//投稿者判定
		for (i in items2) { 
        item = items2[i];
		id = item.id;
		name = item.name;
		if(id == userName){
			socket.userName = name ;
			//io.emit('message', socket.userName  + 'さんようこそ！', '管理者');
			break;
		}
    }
		//メッセージを表示するループ
		for (i in items) { 
        item = items[i];
        id = item.id;
		ms = item.message;
		//if(id==socket.userName){
			io.emit('message', ms, id);
		//}
		
    }
	io.emit('message', socket.userName  + 'さんようこそ！', '管理者');
	});

  console.log('入室したユーザー : %s', socket.userName);
  
  
  
  //接続時に振られた一意のIDをコンソールに表示
  console.log('入室したID : %s', socket.id);
  //接続時に全員にIDを表示（messageというイベントでクライアント側とやりとりする）
  
  
  
  //messageイベントで動く
  //全員に取得したメッセージとIDを表示
  socket.on('message', function(msj) {
      io.emit('message', msj, socket.userName);
	  obj.items.push({id: socket.userName,message: msj});
	　　fs.writeFileSync('database.json', JSON.stringify(obj));
	　　//console.log(obj);
  });

  //接続が切れた時に動く
  //接続が切れたIDを全員に表示
  socket.on('disconnect', function(e) {
    console.log('接続が切れたID : %s', socket.userName);
  });
});

//接続待ち状態になる
http.listen(POST, function() {
  console.log('接続開始', POST);
  console.log(http);
});

---

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

app.get('/css/bootstrap.min.css', function (req, res) {
    res.sendfile(__dirname + '/css/bootstrap.min.css');
});
app.get('/js/bootstrap.min.js', function (req, res) {
    res.sendfile(__dirname + 'js/bootstrap.min.js');
});

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

Answer 1

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

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

teratail express.staticの使用方法

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

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

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

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

Answer 2

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

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

public
　+- img
　+- javascripts
　+- stylesheets

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

Comments

[Izumo1101]

親フォルダは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)
と言われます。
なにか根本的に間違っていますでしょうか。