あなたに合った方法を見つけよう！JavaScript、HTML、Node.jsでHTMLビューをレンダリング

2024-04-11

この解説は、JavaScript、HTML、Node.jsを用いて基本的なHTMLビューをレンダリングする方法について説明します。

前提条件

この解説を理解するには、以下の知識が必要です。

HTMLの基本構文
JavaScriptの基本構文
Node.jsの基本的な使い方

手順

HTMLファイルの作成

まず、レンダリングしたいHTMLビューを記述したHTMLファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>基本的なHTMLビュー</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

JavaScriptファイルの作成

次に、HTMLビューをレンダリングするためのJavaScriptファイルを作成します。

const app = require('express')();

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000);

Node.jsでサーバーの起動

最後に、Node.jsを使用してサーバーを起動し、HTMLビューをレンダリングします。

node index.js

解説

HTMLファイルには、レンダリングしたいHTMLビューを記述します。上記の例では、<h1>Hello, World!</h1>という見出しのみ記述しています。

JavaScriptファイルでは、以下の処理を行います。

expressモジュールをインポートし、Expressアプリケーションを作成します。
/ルートへのGETリクエストに対して、index.htmlファイルをレスポンスとして送信します。
ポート3000でサーバーを起動します。

node index.jsコマンドを実行して、サーバーを起動します。サーバーが起動すると、ブラウザでhttp://localhost:3000を開くと、作成したHTMLビューが表示されます。

補足

上記の例は、非常に基本的なHTMLビューのレンダリングのみを目的としています。
より複雑なHTMLビューをレンダリングするには、JavaScriptフレームワークなどの利用を検討する必要があります。
Node.jsを使用してサーバーを起動する方法は、上記以外にも様々な方法があります。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>基本的なHTMLビュー</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>これは基本的なHTMLビューです。</p>
</body>
</html>

JavaScriptファイル (index.js)

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000);

実行方法

上記のコードをそれぞれindex.htmlとindex.jsというファイル名で保存します。
コマンドプロンプトまたはターミナルを開き、以下のコマンドを実行します。

node index.js

動作確認

ブラウザでhttp://localhost:3000を開くと、以下のHTMLビューが表示されます。

<h1>Hello, World!</h1>
<p>これは基本的なHTMLビューです。</p>

JavaScript、HTML、Node.jsを用いた基本的なHTMLビューのレンダリング方法

Expressを使わずにファイルシステムから直接HTMLファイルを送信する

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/') {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(fs.readFileSync(__dirname + '/index.html'));
  } else {
    res.writeHead(404);
    res.end();
  }
});

server.listen(3000);

Pugテンプレートエンジンを使う

// index.pug
h1 Hello, World!
p これは基本的なHTMLビューです。

const express = require('express');
const app = express();

app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(3000);

// index.ejs
<h1>Hello, World!</h1>
<p>これは基本的なHTMLビューです。</p>

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index');
});

app.listen(3000);