概要
Denoでビューエンジンを使用してテンプレートエンジン「EJS」をレンダリングします。
テンプレートエンジン「EJS」は、HTMLをサーバー処理するために使用します。
ディレクトリ構成
/
├──public
├──index.ejs
app.ts
モジュールをインポート
以下、２つのモジュールをインポートします。
・サーバーレイヤーを作成するためにoak
https://deno.land/x/oak
・HTML（レイアウト）を提供するビューエンジン
https://deno.land/x/view_engine
app.ts
import { Application, Router } from "https://deno.land/x/oak/mod.ts";
import { viewEngine, engineFactory, adapterFactory } from "https://deno.land/x/view_engine/mod.ts";
ポートをリッスンするためにApplicationクラスとルートレイヤーを提供するためにRouterをインポートしています。
アプリケーションの初期化
インポート後にApplicationとRouterを初期化します。
app.ts
const app = new Application();
const router = new Router();
アプリケーションを初期化した後、ビューエンジンを使用するようにアプリケーションを構成します。
app.ts
const ejsEngine = await engineFactory.getEjsEngine();
const oakAdapter = await adapterFactory.getOakAdapter();
ビューエンジンのボイラープレート（定型書式）の準備ができましたら、
次のコードでビューエンジンをミドルウェアとしてアプリケーションに渡します。
app.ts
app.use(viewEngine(oakAdapter, ejsEngine));
ルート作成
次にルートを作成します。
レンダリングするejsファイルを指定して、任意のdataを渡す設定をします。
app.ts
router.get('/', (ctx: any) => {
ctx.render('./public/index.ejs', { data: { message: 'Hello' } })
});
ルーターを必要とするミドルウェアを追加します。
app.ts
app.use(router.routes());
app.use(router.allowedMethods());
アプリケーションを提供
これでapp.tsファイルが完成したので、
リッスンしてアプリケーションを提供します。
app.ts
console.log('http://localhost:8000/');
await app.listen({ port: 8000 });
完成イメージ
app.ts
import { Application, Router } from 'https://deno.land/x/oak/mod.ts';
import { viewEngine, engineFactory, adapterFactory } from 'https://deno.land/x/view_engine/mod.ts';
const app = new Application();
const router = new Router();
const ejsEngine = await engineFactory.getEjsEngine();
const oakAdapter = await adapterFactory.getOakAdapter();
app.use(viewEngine(oakAdapter, ejsEngine));
router.get('/', (ctx: any) => {
ctx.render('./public/index.ejs', { data: { message: 'Hello' } })
});
app.use(router.routes());
app.use(router.allowedMethods());
console.log('http://localhost:8000/');
await app.listen({ port: 8000 });
EJS構文のHTMLタグ追加
最後に次のようにEJS構文のHTMLタグを追加します。
そうすることで、app.tsから渡されたmessageを受け取ることができます。
index.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<p><%= data.message %></p>
</body>
</html>
動作確認
次のコマンドを実行します。
$ deno run --allow-net --allow-read app.ts
以下にアクセスしてHelloと表示されればOKです。
http://localhost:8000/