こんにちは、なかにしです。
シングルページの表示はできるようになったので、
今度はルーティングを組んでいきまっせ~
ざっくり仕組みを解説
今回は同じテンプレートを使用し、
ルーティングによって表示されるものが変わる、というのをやります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
<%= title %>
</h1>
<p>
<%= content %>
</p>
</body>
</html>
この「titile」「content」部分をルーティングによって変えていきます。
ざっくりの仕組みとしては、
①「/」のとき表示する用のオブジェクト、
「/sample2」のとき表示するオブジェクトを作る
②ページに訪れた時のurl(/や/sample)を獲得する
③獲得したurlによってrenderの中身を変更
言葉で説明しても伝わりにくいので、やってみます!
server.jsを修正
const http = require("http");
const fs = require("fs");
const ejs = require("ejs");
// ejsを読み込む
const template = fs.readFileSync("./sample.ejs", "utf-8");
// ルーティングに対して表示するものを書く
const routes = {
"/": {
title: "サンプル1です。",
content: "サンプル1のコンテンツです。",
},
"/sample2": {
title: "サンプル2です。",
content: "サンプル2のコンテンツです。",
},
};
// サーバーを作る
const server = http.createServer();
// サーバーに対して何をするか書く
server.on("request", function (request, response) {
// URLを取得
const url = request.url;
// URLオブジェクトのpathname(/や/sample)でrenderの中身を変更
const html = ejs.render(template, {
title: routes[url].title,
content: routes[url].content,
});
response.writeHead(200, { "content-Type": "text/html" });
response.write(html);
response.end();
});
// サーバーを8080で起動
server.listen(8080);
「request.url」でルーティングを取得し、renderの内容を変えています。
「/」で来たときは route[“/”].title で「サンプル1です。」が表示、
「/sample2」で来たときは route[“sample2”].title で「サンプル2です。」が表示
といった仕組みです。
確認↓
![](https://nakanishi-s.jp/wp-content/uploads/2023/02/スクリーンショット-2023-02-19-023157.png)
![](https://nakanishi-s.jp/wp-content/uploads/2023/02/スクリーンショット-2023-02-19-023237.png)
これでルーティング完了…というわけではなく、
実は「/」「/sample2」以外のルーティングを指定するとエラーが出ます。
これに対処して完了です!
「/」「/sample2」以外のルーティングに対処
Switchで分けます。以上。
const http = require("http");
const fs = require("fs");
const ejs = require("ejs");
// ejsを読み込む
const template = fs.readFileSync("./sample.ejs", "utf-8");
// ルーティングに対して表示するものを書く
const routes = {
"/": {
title: "サンプル1です。",
content: "サンプル1のコンテンツです。",
},
"/sample2": {
title: "サンプル2です。",
content: "サンプル2のコンテンツです。",
},
};
// サーバーを作る
const server = http.createServer();
// サーバーに対して何をするか書く
server.on("request", function (request, response) {
// URLを取得
const url = request.url;
// codeを決めて中身を書く
const writeContent = (code) => {
response.writeHead(code, { "content-Type": "text/html" });
response.write(content);
response.end();
};
let content = "";
switch (url) {
case "/":
content = ejs.render(template, {
title: routes[url].title,
content: routes[url].content,
});
writeContent(200);
break;
case "/sample2":
content = ejs.render(template, {
title: routes[url].title,
content: routes[url].content,
});
writeContent(200);
break;
default:
content = ejs.render(template, {
title: "Page Not Found",
content: "ページが見つかりませんでした。ごめん。",
});
writeContent(404);
break;
}
});
// サーバーを8080で起動
server.listen(8080);
ちゃんと想定外のルーティングのときは「404」を返すように変えました。
オワリ!
次はフォームやるよ~