こちらの記事の続きを書いていく。
続いて、一意のユーザーidによって表示内容を変更する。
router.get("/:id", (req, res) => {
res.send(`${req.params.id}のユーザー情報を取得しました。`);
});
エンドポイントを入力する第1引数にスラッシュ"/"とコロン":"を打ってからidと入力する。そうすると、それを一意のidとしてページを開いてくれる。
また、そのidはreq.params.idで取得することが出来る。
postメソッドやdeleteメソッドを用いるとid情報の登録や削除などのリクエストを送ることが出来る。
そのためには専用のフォームを用いたり、APIを使用する必要がある。
続いて、res.send()の中でHTMLを表示するやり方を示す。
server.jsの中に"app.use(express.static("public"));"というコードを加える。
こうすることで、express内のstaticという機能が使えるようになる。この場合、プロジェクトディレクトリ内にpublicというディレクトリ内のファイルを参照するようになる。
const express = require("express");
const app = express();
const userRouter = require("./routes/user");
const PORT = 3000;
app.use(express.static("public"));
app.get("/", (req, res) => {
res.status(500).json({msg: "エラーです"});
});
app.listen(PORT, console.log("サーバーが起動しました。"));
このように、app.use()を用いると
publicディレクトリ内に定めたhtmlファイルとそれを装飾するcssファイルの内容を表示することが出来る。
また、動的なファイルも読み込ませる事ができる。
動的なWEBページとは文章や画像がアクセスするたびに変わり、ユーザーに適したHTMLファイルが都度サーバー側で作られるWEBページのことである。口コミのページやショッピングカートなどが動的なファイルにあたる。
<参考>
今回はejsというものを使っていく。これはexpressで用意されているテンプレートエンジン。
テンプレートエンジンとはDBのデータをテンプレートエンジンのファイルに読み込ませてそれをHTMLとして表示するというもの。
他にもPugなどがあるようである。まず、ターミナル上でejsをインストールする。
npm i ejs
その後、server.js上でapp.set("view engine", "ejs");と入力する。
そして、render関数を用いて表示させる。第2引数にはejsに持たせたい引数を入力するが、実際にはDBから取得したデータを入力する。
const express = require("express");
const app = express();
const userRouter = require("./routes/user");
const PORT = 3000;
app.set("view engine", "ejs");
app.get("/", (req, res) => {
res.render("index", {text: "NodejsとExpress"})
});
//ルーティング設計
app.use("/user", userRouter);
app.listen(PORT, console.log("サーバーが起動しました。"));
プロジェクトディレクトリにviewsディレクトリを作成し、その中にindex.ejsを作成する。
index.ejsは普通のhtmlファイルと同様にひな形を作成して使用する。
そして、server.jsで定めたデータ（リスト）の中身は<%= text %>と言うかたちでキーを入力するとデータの中身を表示することが出来る。
textという部分がキーである。
views/index.ejs
<!DOCTYPE html>
<html lang="en">
<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>
Hello <%= text %>
</body>
</html>
こうすると、以下のようにsarver.js内のデータを取得して代入してからHTMLファイルとしてブラウザに返してくれる。
続いて、ミドルウェアについて学ぶ。
クライアントがサーバーに対してリクエストを送る際、そのリクエストに対してチェックを行いたい。すなわち、サーバーにリクエストを送る前にクライアントがログインしているかどうかを判定する処理を施したりすることがミドルウェアでは可能である。
ミドルウェアでどす朝世帯処理をsever.jsdで関数として定義する。そして、その関数を処理の一番はじめに動作させればサーバーの処理の一番はじめに処理を行ってくれる。これはexpressが上から下へ動作するからである。
const express = require("express");
const app = express();
const userRouter = require("./routes/user");
const PORT = 3000;
app.use(mylogger);
app.set("view engine", "ejs");
app.get("/", (req, res) => {
res.render("index", {text: "NodejsとExpress"})
});
//ルーティング設計
app.use("/user", userRouter);
//ミドルウェア
function mylogger(req, res, next) {
console.log(req.originalUrl);
next();
};
app.listen(PORT, console.log("サーバーが起動しました。"));
このようにコードを記述すると、今回はミドルウェアの処理としてコンソール上にエンドポイントが表示されるだけというシンプルなもの。
そして、ルート管理をしている一部のエンドポイントに対してのみミドルウェアを設定したいとき(この場合、エンドポイントが"/user"ではじまるものだけにミドルウェアの処理を行いたいとき)は、関数の定義と実行をそのルートを管理しているファイル内で行えば良い。
つまり、kの場合routes/user.jsの中にmylogger()の記述と実行を行う。
const express = require("express");
const router = express.Router();
router.use(mylogger);
router.get("/", (req, res) => {
res.send("ユーザーです。");
});
router.get("/info", (req, res) => {
res.send("ユーザー情報です。")
});
router.get("/:id", (req, res) => {
res.send(`${req.params.id}のユーザー情報を取得しました。`);
});
//ミドルウェア
function mylogger(req, res, next) {
console.log(req.originalUrl);
next();
};
module.exports = router;
server.js内の記述を消して、こちらの記述だけにすれば、エンドポイントが"/user"のページにリクエストが来たときのみミドルウェアの処理を実行するようになる。
実際のミドルウェアでは、try、catch文を書いてユーザーが認証しているかどうかを判断して処理を変えるという操作を行う。
そして、さらにミドルウェアの処理が動作する範囲を特定のgetのメソッドに限定したい時、第2引数にmylogger(ミドルウェアの操作として定めた関数)を加えれば良い・
router.get("/", mylogger, (req, res) => {
res.send("ユーザーです。");
});
以上でexpressの基礎は終わりである。ご覧いただきありがとうございます。