Nodeをちゃんと学ぶ -ルーティング編-

こんにちは、なかにしです。

シングルページの表示はできるようになったので、
今度はルーティングを組んでいきまっせ～

ざっくり仕組みを解説
server.jsを修正
「/」「/sample2」以外のルーティングに対処

ざっくり仕組みを解説

今回は同じテンプレートを使用し、
ルーティングによって表示されるものが変わる、というのをやります。

<!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です。」が表示
といった仕組みです。

確認↓

これでルーティング完了…というわけではなく、
実は「/」「/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」を返すように変えました。

オワリ！
次はフォームやるよ～