Web開発

【Node.js】HTMLファイルを読み込んで表示

以前、Node.jsでサーバーを作成してブラウザに文字列を出力しました。今回は、htmlファイルを読み込んで、ブラウザに表示するまでの流れについて書いていきます。

完成図

実行結果

ソースコード

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプル</title>
  </head>
  
  <body>
    <h1>index.htmlが読み込まれて表示!</h1>
  </body>
</html>
readhtml.js
//1:モジュールのロード
const http = require('http');
const fs = require('fs');

//2:サーバーオブジェクトの作成
const server = http.createServer((req,res)=>{
  //3:ファイル読み込み
  fs.readFile('index.html','UTF-8',
  (error, data)=>{
    res.writeHead(200,{'Content-Type':'text/html'});
    res.write(data);
    res.end();
  });
});

//4:待ち受け開始
server.listen(3000);
console.log('Server running');

 

処理の流れ
  1. モジュールのロード
  2. サーバーオブジェクトの作成
  3. ファイル読み込み
  4. 待ち受け開始

処理の解説

①モジュールのロード

//1:モジュールのロード
const http = require('http');
const fs = require('fs');
require モジュール(機能)のロード
http サーバーとクライアント間のデータを送受信する
fs ファイル読み込み

②サーバーオブジェクトの作成

//2:サーバーオブジェクトの作成
const server = http.createServer((req,res)=>{処理});
createServer サーバーオブジェクトの作成
request クライアントからサーバーへの送信
response サーバーからクライアントへの送信

③ファイル読み込み

//3:ファイル読み込み
fs.readFile('index.html','UTF-8',
(error, data)=>{
  res.writeHead(200,{'Content-Type':'text/html'});
  res.write(data);
  res.end();
});
readFile ファイル読み来み
writeHead httpレスポンスメッセージヘッダー(HTTPヘッダ)を出力
write httpレスポンスメッセージボディを出力
  1. readFileはこれからもよく使うだろう。
  2. readFile内の処理をしっかりと把握するなら、httpのメッセージについて知らなければならない。

④待ち受け開始

//4:待ち受け開始
server.listen(3000);
console.log('Server running');
listen 待ち受け開始

実行

コマンドラインから実行する。

node readhtml.js

ブラウザにhttp://localhost:3000/でアクセスすると、完成図と同じ状態が表示されます。

まとめ

今回はNode.jsを使ってhtmlを読み込む処理を書きました。ファイル読み込みはこれからも使う事になると思いますが、HTTPの仕組みを理解しないとコールバック関数の処理内容が分からないと思います。

この点はネットワークの記事で細かく記載していこうと思っていますので、よろしくお願いします。最後まで読んで頂きありがとうございました。