Node.js

node.js html内のjsファイルの読み込み

2015年6月17日

node.js js読み込み

前回はnodejsからcssの読み込みを行ったので、今回はjsファイルの読み込みを行います。

Node.jsではあらかじめStaticで直接ファイルを指定するか、フォルダを準備してパスを通すことで複数ファイルを読み込む方法があります。

この記事では前者のファイルを指定したJavaScriptの読み込みを行なっています。

JavaScriptの読み込み

JavaScriptの読み込みを行う前に、３つの準備をします。

１つめは、HTMLファイルの作成になります。

次に、読み込むJavaScriptを作成します。

最後にNode.jsでHTMLとJavaScriptのファイルを読み込むファイルを作成します。

HTMLファイルの作成

test.htmlというHTMLファイルを作ります。

ボタンを押すとalertが動き「test」が表示される単純なものになります。

<html>
 <head>
   <meta http-equiv="content-type" content="text/html charset=UTF-8">
   <title>JS テスト</title>
   <script src="./js/test.js"></script>
 </head>
 <body>
  <div class="test">
   <p>JSテスト</p> 
   <input class="test" type="button" value="js test" onclick="test()" />
  </div>
 </body>
</html>

jsファイルの作成

次に簡単なjsファイルを準備します。

ファイル名は、test.jsとしますが、階層はpublicの直下のjsディレクトリの中に置きます。

function test() {
  alert(‘test’); 
}

Node.jsファイルの作成

node.jsのファイルを作成します。

前回のCSSを読み込んだファイルを再利用しています。

node.js css読み込み
cssとjsファイルを取得しようとしたら、うまく出来ませんでした。 どうやって取得するか調べてみると、ファイル読み込みで取れるらしい。 htmlに書くのは変わらないが、apacheみたいにドキュメントルートがないので、自分でドキュメントルー ...

続きを見る

変更点は、19行目にあるcontent-typeの部分をtext/cssからtext/plainに変更して再利用しています。

let http = require(‘http’);
let fs = require(‘fs’);
let server = http.createServer();

server.on(‘request’, getJs);
server.listen(8080);
console.log(‘Server running …’);
function getJs(req, res) {
  let url = req.url;
  console.log(url);
  if (‘/’ == url) {
    fs.readFile(‘./js.html’, ‘UTF-8’, function (err, data) {
      res.writeHead(200, {‘Content-Type’: ‘text/html’});
      res.write(data);
      res.end();
    });
  } else if (‘/js/test.js’ == url) {
    fs.readFile(‘./js/test.js’, ‘UTF-8’, function (err, data) {
      res.writeHead(200, {‘Content-Type’: ‘text/plain’});
      res.write(data); 
      res.end();
    });
  } 
}

fs.readFileの関数を利用して、第一引数に読み込みたいファイルを指定して、内部でres.writeHeadでなんのデータを指定しています。

res.writeでデータを書き込み、終わったらres.end関数で閉じています。

end関数は必ず入れましょう。

入れなくても動くのですが、バグの元になるので開けたら閉めることを意識します。

確認

動作の確認します。

URIはlocalhostの8080ポートでアクセスして確認しています。

jsファイル読み込みテスト

ボタンを押すとアラートが表示されるのを確認できました。

まとめ

Node.jsからHTMLとJavaScriptファイルの読み込みを行いました。

コード自体は簡単ですが、jsを一つ一つ準備しないといけないのと思うかもしれませんが、その必要はありません。

jsのディレクトリに正規表現を利用することで、フォルダのパスを通します。

フォルダにパスが通ると、設定したフォルダの中に複数のJavaScriptファイルを置いても読み込めるようになります。

-Node.js
-