9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-03-03

やること

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に関しては色々とやれることが多そうなので、別で触ってみようと思います。

お疲れさまでした。

9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?