Q&A
このjs記述のあるファイルとloadしようとしているファイルの位置関係はどうなっていますか？
結局のところパスが違うだけなので環境は関係ないとは思いますよ
前提・実現したいこと
javascript文をサイトを参考にして書いている際に、それがLinux系を開発環境にしていることが分かりました。よって以下のコードのままではおそらくpathに関するエラーが出てきてしまいます。
何かwindowsのpathに変換したりする方法がございましたら、よろしくお願いいたします。
発生している問題・エラーメッセージ
Failed to load resource: the server responded with a status of 404 (Not Found)
該当のソースコード
javascript
1const server = http.createServer((req, res) => { 2 var filePath; 3 if (req.url == '/') { 4 filePath = '/index.html'; 5 } else { 6 filePath = req.url; 7 } 8 const fullPath = __dirname + filePath; 9 //const fullPath = path.resolve(__dirname, filePath); 10 11 fs.readFile(fullPath, 'utf-8' , (err, data) => { 12 if (err) { 13 res.writeHead(404, {'Content-Type': 'text/plain'}); 14 res.write('not found!'); 15 return res.end(); 16 } 17 res.writeHead(200, {'Content-Type': 'text/html'}); 18 res.write(data); 19 res.end(); 20 }) 21});
html
1<body> 2 <p class="lead"></p> 3 <script src="/socket.io/socket.io.js"></script> 4 <script type="text/javascript" src="/textillate/jquery-3.3.1.js"></script> 5 <script type="text/javascript" src="/textillate/jquery.textillate.js"></script> 6 <script type="text/javascript" src="/textillate/assets/jquery.lettering.js"></script> 7 <link rel="stylesheet" type="text/css" href="/textillate/assets/animate.css"></link>
試したこと
path.resolveでpathを結合すればいいという記述を見かけたので、やってみましたがうまくいきませんでした。
そうなのですか。
実行中のjsファイルがあるディレクトリにそのままhtmlファイルが有り、htmlファイル内で参照されているファイルは、そのディレクトリ内のtextillateフォルダーの中に格納されているという形です。
あれ？でも__dirnameってあまり聞き覚えないので調べましたが、Node.jsでは・・？？
少なくともJavaScriptにはない機能だと思いますが
仰る通りNode.jsです。
初学者でして、Javascriptとの明確な違いを分かっていませんでしたが、__dirnameは使えるのだと思います。
タグに「Node.js」を追加しておいてください。
根本部分はJavaScriptかもしれませんがサーバ側で動作させるための機能が揃っている(私も詳しいわけではないですが)ため、普通に「JavaScript」として書くと見ている人にも混乱を招きます。
回答2件
0
ベストアンサー
http://yohshiy.blog.fc2.com/blog-entry-318.html
Node.jsがこれをどう解釈するかは、path.parse(__dirname)あたりで確認出来ると思います。
Node
1const path = require('path'); 2 3console.log(path.parse(__dirname));
以下のコードのままではおそらくpathに関するエラーが出てきてしまいます。
だとしても下記のようなコードでいくらでも逃げられるのでどうとでもなります。
https://qiita.com/kjunichi/items/f266602b625e04b1f616
この2つを併用すれば解決すると思いますよ。
表題とは直接関係ありませんが、
Node.jsがデフォで提供しているhttpモジュールは人間が触るライブラリではないので、
Express.jsを覚えて使って下さい。
https://expressjs.com/ja/
ホーム、解説、ガイドまでは有志の方がきっちり日本語で解説してくださってるので、
公式サイトのこの3項目を読むだけで一通りの事ができるようになります。
Node.jsのhttpモジュールの駄目な一例を紹介しますと、
例えば質問文のコードではJSファイルもHTMLファイルも問答無用でtext/htmlと返そうとしていますが、
お前Webサーバ舐めてんのかと言われちゃいますよ？
これを解決するのであれば、
拡張子を取り出してこのファイルの拡張子だったらtext/javascript…みたいな条件分岐が死ぬほど必要です。
一体何行のコードになるのか今から楽しみですね。
静的ファイル返すだけの超シンプルなサーバーでこれだから人間が触るライブラリじゃないでしょというわけです。
もしこれがExpress.jsだったらstaticを使ってローカルマシンのパスと繋げるだけ、1行で終わります。
やり方は公式のガイド読めば出来るようになります。
楽ちんですね。
投稿2019/01/22 03:17
総合スコア21567
ご丁寧にありがとうございます！
__dirname見てみましたら
{ root: 'C:\',
dir: 'C:\*\**',
base: '***',
ext: '',
name: '****' }
と言う感じで、バックスラッシュなどになっているのでpath.resolve(__dirname + filePath)にすれば、良いということですかね
あと、下に書いてくださったこともう少し理解してみます。一応jsファイルには
const mime = {
".html": "text/html",
".css": "text/css",
".js": "text/javascript" と宣言してるのですが、これではだめということですよね？
> 一応jsファイルには……と宣言しているのですが
かなりいい感じですね！
ですが、Webサイトの多くは画像ファイル各種(JPEG、PNG、GIF、SVG…)があるので、一般的なWebサイトとしてはもう少し足りません。
そのサーバがApacheやNginxなどの静的ファイルを配信するWebサーバアプリと連携して動いており、画像ファイルを返さないとわかりきってるならそれでも良いと思います。
でもまぁ、それを仮に書いて完成させたとしても、
ちょっとした静的ファイルを配信するサーバー建てる度に漏れなく全部書けというのか！？みたいな感じになるので、やっぱりExpress使ってねという話の流れになるのは変わりません。
ありがとうございます！ファイルの件は解決いたしました！
仰っていることも理解できたと思います。
少し脱線するのですが上記のコードは,
node.js等の勉強のため下記のURLを自前でやってみています。その中で画像を取得して表示させる段階があるのですが、その際には仰る通り画像ファイル各種についてイチイチ全部書くか、Expressを使うことが必要になるのでしょうか
http://urx.red/PzTO
Chromeのようなブラウザは、例えばPNG画像と名乗っているファイルがJPEGであってもそれなりに表示出来たと思いますが、こういう処理を入れると誤動作の原因になりますし、チェック処理で重くなる原因になります。
なので扱う可能性のあるファイルは全て対策すべきでしょう。
そこ責任持てますか？という話になって来ますので、一般的な現場では本番環境で静的ファイルを配信する場合はNginxやApache等を利用するケースが多いです。
Express.jsを使えば動的な情報も静的な情報も1プロセスで簡単につくれるので、
Node.jsを使うメンバーの開発環境構築で使われるケースが多いですね。
非常に納得できました。色々とありがとうございました。
0
パス区切りの、バックスラッシュとスラッシュのことなら、WindowsでもAPIレベルだとスラッシュが使えるので、多分そのままで良いはずです。
（コマンドラインでスラッシュが使えるかは、コマンドによる）
投稿2019/01/22 02:18
総合スコア86468
あなたの回答
tips
プレビュー
