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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

813閲覧

node.jsを使用しHTMLを表示させたいがpreタグが挿入されてしまう

progblog

総合スコア22

Node.js

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/05/06 07:04

編集2020/05/08 12:14

前提・実現したいこと

参考書を片手にnode.jsの勉強をしています。
node.jsを使用し、HTMLをブラウザに表示させていたのですが、ブラウザ上のソースにpreタグが入り、ソースコードがそのまま表示されてしまいました。

ブラウザで表示されるコード

html

1<html> 2<head> 3</head> 4<body> 5<pre style="word-wrap: break-word; white-space: pre-wrap;">&lt;!doctype html&gt; 6&lt;html&gt; 7&lt;head&gt; 8&lt;meta&gt; 9&lt;title&gt;SAMPLE&lt;/title&gt; 10&lt;/head&gt; 11&lt;body&gt; 12 &lt;h1&gt;HELLO&lt;/h1&gt; 13 &lt;p&gt;world&lt;/p&gt; 14&lt;/body&gt; 15&lt;/html&gt; 16</pre> 17</body> 18</html>

該当のソースコード

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>SAMPLE</title> 6</head> 7<body> 8 <h1>HELLO</h1> 9 <p>world</p> 10</body> 11</html> 12

javascript

1var http = require('http'); 2var fs = require('fs'); 3var server = http.createServer(function (req, res) { 4 fs.readFile('./temp.html', 'utf-8', function (err, data) { 5 res.writeHead(200, { 6 'Content-Type': 'text/html' 7 }); 8 res.write(data); 9 res.end(); 10 }); 11}); 12server.listen(1234); 13console.log('サーバを起動しました'); 14 15

補足情報(FW/ツールのバージョンなど)

Google Chrome バージョン: 81.0.4044.138

なぜ、preタグが入ってしまうのか、ご教授いただけますと幸いでございます。

細かく記載せず失礼いたしました。

1.デスクトップに「AAAAAAA」というフォルダを作成。
2.「AAAAAAA」というフォルダに「cmd」というファイルを作成。
3.「temp.html」「hello.js」を作成。
4.コマンドプロントを開く。
5.カレントディレクトリを変更

cd Desktop\AAAAAAA\cmd

6.実行

node hello.js

上記でサーバーは起動しましたが、前述の通りpreタグが挿入されてしましました。

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

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

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

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

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

snogot

2020/05/06 07:32

私の手元で確認したところ、preタグは挿入されませんでした。 > node.jsを使用し、HTMLをブラウザに表示させていたのですが HTMLとJavaScriptのファイル名は何なのか、とか、 どんなコマンドでJavaScriptを実行しているのか、とか、 もう少し具体的な情報があると、回答がもらいやすくなるかと思います。
Yasumichi

2020/05/06 07:38

同じく、 node server.js を実行した後、(ファイル名は仮) Firefox で http://localhost:1234/ でアクセスしましたが、問題なく表示されました。
tohshima

2020/05/08 13:04

テキストエディタ等でソースを入力してから、Webブラウザで表示されるまでの過程のどこかで、整形済みテキストに変換しているプログラムが居るのでしょうね。恐らく、progblogさんの手順に書かれていない何かが作用しているのでしょう。テキストエディタは何を使われてますか。
progblog

2020/05/08 13:07

ご連絡ありがとうございます。 >テキストエディタは何を使われてますか。 こちらですが、dreamweaverを使用しています。
guest

回答1

0

ベストアンサー

同じことをやってみました。期待通りに動いているように見えます。手順の問題か、環境の問題かもしれません。私がやったことは、以下の通りです。
1.ローカルディスクの任意の場所にテスト用のフォルダtestを作成。
2.temp.htmlの名前で質問にあるHTMLファイルを作成。
3.test.jsの名前で質問にあるJavaScriptファイルを作成。
4.コマンドプロンプトを開き、テスト用のフォルダtestをカレントディレクトリに変更。
5.「node test」を実行。そうすると「サーバを実行しました」と表示される。
6.Webブラウザで「http://localhost:1234/」を開く
7.Webブラウザに「HELLO world」が表示される。

投稿2020/05/06 08:55

編集2020/05/07 02:53
tohshima

総合スコア374

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

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

progblog

2020/05/06 12:55

ありがとうございました。 >5.「node test」を実行。そうすると「サーバを事項しました」と表示される。 ここで私は「node test.js」という記述で実行していました。 ご丁寧にありがとうございました。 大変助かりました。
tohshima

2020/05/07 02:54

「node test.js」でも動きます。なので、問題は別の所にあるかと。
progblog

2020/05/08 12:10

遅くなり申し訳ございません。 そうなんですね。 参考書通りだったのでおかしいとは思いました。 下記、行ったことになります。気になるところはございますでしょうか。 1.デスクトップに「AAAAAAA」というフォルダを作成。 2.「AAAAAAA」というフォルダに「cmd」というフォルダを作成。 3.「temp.html」「hello.js」を作成。 4.コマンドプロントを開く。 5.カレントディレクトリを変更 → cd Desktop\AAAAAAA\cmd 6.node hello.js これでサーバーは起動しましたが、前述の通りpreタグが挿入されてしましました。
progblog

2020/05/08 12:37

ご連絡ありがとうございます。 同様でしたが、パソコンを再起動し再び試したところ、正常に表示されました。 原因がわからずじまいで申し訳ございません。 お手数をおかけいたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問