はじめに

Node.js でフロントエンド作りたいなー、と思い、勉強しています。
サーバ側のscript で html ファイルを読んで返したり、css を読んだりできるようになりました。

仕組みをわかっていないのですが、とりあえずメモしておきます。

内容

以下のようなファイル構成です。

├── app.js
├── css
│   └── test.css
└── index.html

app.js を node で起動してサーバにします。

$ node.js

ブラウザからlocalhost:8080 を見ると test.css で

が修飾されます。

サーバ側として

app.js

var http = require('http');
var fs = require('fs');

var server = http.createServer();
server.on('request', getCss);
server.listen(8080);
console.log('Server running …');

function getCss(req, res) {
  var url = req.url;
  console.log('url=', url)
  if ('/' == url) {
    fs.readFile('./index.html', 'UTF-8', function (err, data) {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        res.end();
    });
  } else if ('/css/test.css' == url) {
    fs.readFile('./css/test.css', 'UTF-8', function (err, data) {
        console.log('test.css is read.')
        res.writeHead(200, {'Content-Type': 'text/css'});
        res.write(data);
        res.end();
    });
  }else{
    console.log('unexpected url...')
    res.writeHead(200, {
        "Content-Type": "text/html"
      });
      const responseMessage = "<h1>Hello World</h1>";
      res.end(responseMessage);
  }
}

としました。これ、結局、HTTP request が来た時のrouting を全て、require に設定した関数に書いています。こんな書き方していたら、たくさんURLがあったら大変な気もします。大規模になったら、きっと良い方法があるのでしょう。

読んで想像するに、
url が

'/' なら css.html を読んで、head を付けて HTTP responce にして返す
'/css/test.css' なら ./css/test.css を読んで、header を付けて HTTP responce にして返す

ようです。contents type が異なります。

用意している HTMLは

index.html

<html>
<head>
  <meta http-equiv="content-type" content="text/html charset=UTF-8">
  <title>css テスト</title>
  <link rel="stylesheet" type="text/css" href="./css/test.css">
</head>
<body>
  <div class="testclass">
    <p>ABCED</p>
  </div>
</body>
</html>

です。このheader で css を読む指定があります。そういうものなのか。

参考情報

参考にさせていただきました。感謝。

下記は読んでいないけれど、フォルダ構成とか参考にしたい。

まとめ

とりあえず、node.js で起動したサーバが側のjavascript で、CSSを読み込んだhtml を返すことができるようになった。

エラー処理をできるようになりたい
routing を app.js 以外に書くなど、コードを整理したい
python のときのように、logging を使いたい。console.log でなく

いろいろTODOはあるが。
(2022/10/28)