やること

ExpressでMVCをやってみようと思い立ったのでやってみようと思います。

コード

前提

macOS Mojave
Node.js v11.10.0
npm 6.4.1

Expressは4系です。

インストールパッケージ

Express
@types/express
EJS
typescript
ts-node

準備

// package.json
"scripts": {
  "ts-node": "./node_modules/.bin/ts-node"
}

Hello worldしてみる

ディレクトリ構成は以下の通り。package.jsonやnode_modulesは省略。

root
 └ src
    ├ controller
    ├ model
    ├ views
    └ app.ts

app.tsに以下を記述。

import Express from "express";
const app = Express();

app.get("/", (req, res) => {
    res.send("Hello world!");
});

app.listen(3000, () => {
    console.log("listening on port 3000!");
});
export default app;

実行（npm run ts-node ./src/app.ts）してブラウザでlocalhost:3000にアクセスしてHello worldが表示されればOK。

controllerを経由して何か表示してみる

controllerディレクトリ配下にhogeController.tsを作成し、以下のコードを記述。

import * as Express from "express";
export default function hogeController(req: Express.Request, res: Express.Response, next: Express.NextFunction) {
    res.send("hogeController!!");
}

app.tsを以下のように修正。

import Express from "express";
import hogeController from "./controller/hogeController";
const app = Express();

app.get("/", (req, res) => {
    res.send("Hello world!");
});
app.get("/hoge", hogeController);

app.listen(3000, () => {
    console.log("listening on port 3000!");
});
export default app;

サーバを再起動してlocalhost:3000/hogeにアクセスしてhogeController!!と表示されればOK。

Template engineを使って表示させてみる

viewsディレクトリ配下にhoge.ejsを作成して以下のコードを記述。

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    hoge.ejs!!
</body>

</html>

hogeController.tsを以下のように修正。

import * as Express from "express";
export default function hogeController(req: Express.Request, res: Express.Response, next: Express.NextFunction) {
    res.render("./hoge.ejs");
}

app.tsを以下のように修正。

import express from "express";
import hogeController from "./controller/hogeController";
const app = express();

app.set("view engine", "ejs");
app.set('views', './src/views')

app.get("/", (req, res) => {
    res.send("Hello world!");
});
app.get("/hoge", hogeController);

app.listen(3000, () => {
    console.log("listening on port 3000!");
});
export default app;

サーバを起動してlocalhost:3000/hogeにアクセスしてhoge.ejs!!を表示されればOK。

ejsにデータを表示してみる

ejsにデータを埋め込むにはrenderメソッドの第二パラメータに表示用のデータを渡す。
hogeController.tsを以下のように修正。

import * as Express from "express";
export default function hogeController(req: Express.Request, res: Express.Response, next: Express.NextFunction) {
    let data = {
        "title": "hogeController",
        "contents": "hoge text."
    }
    res.render("./hoge.ejs", data);
}

hoge.ejsを以下のように修正。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>
        <%= title %>
    </title>
</head>

<body>
    <%= contents %>
</body>

</html>

データクラスを作ってそれをejsに渡せるようにしておくと良さそうですね。

最後に

エラーとかログとかは置いといて大枠はそれっぽい感じになった気がします。
ejsに関しては色々とやれることが多そうなので、別で触ってみようと思います。

お疲れさまでした。

TypeScript + Node.js + Express + EJSでMVCをやってみる