こんにちは。
最近になってNode.jsの勉強を始めたのですが、開幕早々躓いた点がありましたので備忘録として残しておきます。
ちなみに私はNode.jsのことを少し前までJavaScriptのライブラリの一種みたいに考えていた人間です……。
（だって……「～.js」みたいな表記してるから！）
もし何か間違っている箇所などありましたらご教授頂けますとありがたいです。
▼今回導入や実行に辺り参考にさせて頂いた記事です。ありがとうございます。
さて、Node.js、Expressを導入してローカルサーバーを立ち上げる所までは順調に進んでおりました。
（Hello World!を表示させる定番のアレですね）
そして自分が制作していたWebページを表示させてみようと思い、
先程の記事を参考にHTMLを読み込ませる記述を書いてみました。
// 静的ファイルの提供とキャッシュの有効化
app.use(express.static('/', { maxAge: 86400000 }));
// HTMLリクエスト
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, './index.html'));
});
// 中略
// 今回ポート番号は5000に設定してみました
app.listen(5000, ()=> {
console.log('Server listening on port 5000');
});
いざローカルサーバーに接続！ ……してみると、確かにindex.htmlが読み込まれました！
ですが、CSSファイルが読み込まれておらず骨組みだけの状態になってしまっておりました。
そこでChromeの開発者ツールにて確認してみると、consoleタブに以下のエラーが吐かれておりました。
Refused to apply style from 'http://localhost:5000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
え、全然見たことのないエラーだ……と不安になり一旦Google先生へ翻訳を依頼。
直訳が以下です。
MIME タイプ (「text/html」) がサポートされているスタイルシート MIME タイプではなく、厳密な MIME チェックが有効になっているため、「http://localhost:5000/css/style.css」からのスタイルの適用を拒否しました。
MIMEタイプって何だ。ということで調べてみます。
▼今回参考にさせて頂いたサイト様です。
調べてみるとサーバーとブラウザ間のやり取りで扱われる「各ファイルの種類を判別するためのデータ」だそう。
こちらのエラーの解決方法として色々探したところ、以下の方法が紹介されておりました。
CSSを読み込むlinkタグ内のtype属性をきちんと指定する（今回の場合は「text/css」）
なるほど、いつも何気なく書いたり書かなかったりしていたtype属性にはそんな重要な役割があったのか！ と思いheadタグ内を修正したのが下記です。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>●●●</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
しかし上記を試すも解決には至らず……悪戦苦闘した結果、ちゃんとCSSを読み込めた方法が以下になります。
// 静的ファイルの提供とキャッシュの有効化
app.use(express.static('public', { maxAge: 86400000 }));
// HTMLリクエスト
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
Node.js用のJS（index.js）とポートフォリオ用のindex.htmlを別階層に分けました！
どうやらHTMLリクエストの上で書いている「express.static」が鍵になっていたそうです……そっちか！
こちらはミドルウェア関数と呼ばれる関数だそうで、下記のサイトでは以下の注意点が記載されておりました。
express.static関数に指定するパスは、nodeプロセスを起動するディレクトリーに対して相対的です。
▼ちなみにミドルウェア関数についての説明がされているのはこちらです。
つまり、きちんとディレクトリー（フォルダ）を作って指定する必要があった、ということでしょうか。
（色々疑問点が浮かび上がったのですが、この辺りはまだまだ理解が追いついていないので勉強頑張ります……！）
まとめ
HTMLのtype属性がサーバーとブラウザ間で重要な役割を担っていたのは全然知りませんでしたので、
今回逆にエラーが吐かれて良かったのかなと思いました（怪我の功名……？）
今後はなるべく意識して指定していこうかなと思います。
そして、お試しとはいえ一気にごちゃごちゃと同じ階層内にファイルを置かない・作らないも気をつけねばならないと感じました……。
もし学習を始めたばかりの人で同じような状況に置かれてしまった人がおりましたら、手助けになれば幸いです。