EdgeJS

Edgeは、Node.js向けにAdonisJSのコアチームによって作成およびメンテナンスされている、シンプルでモダンかつ機能満載のテンプレートエンジンです。EdgeはJavaScriptのように書くことができます。JavaScriptを知っていれば、Edgeも知っています。

Edgeのドキュメントはhttps://edgejs.devで利用できます。

インストール

以下のコマンドを使用してEdgeをインストールおよび設定します。

node ace add edge

検出されたパッケージマネージャを使用してedge.jsパッケージをインストールします。
adonisrc.tsファイル内に以下のサービスプロバイダを登録します。

{
  providers: [
  // ...other providers
  () => import('@adonisjs/core/providers/edge_provider')
  ]
}

最初のテンプレートのレンダリング

設定が完了したら、Edgeを使用してテンプレートをレンダリングすることができます。resources/viewsディレクトリ内にwelcome.edgeファイルを作成しましょう。

node ace make:view welcome

新しく作成されたファイルを開き、以下のマークアップを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>
  Hello world from {{ request.url() }} endpoint
  </h1>
</body>
</html>

最後に、テンプレートをレンダリングするためのルートを登録しましょう。

import router from '@adonisjs/core/services/router'

router.get('/', async ({ view }) => {
  return view.render('welcome')
})

また、router.on().renderメソッドを使用して、コールバックをルートに割り当てずにテンプレートをレンダリングすることもできます。

router.on('/').render('welcome')

テンプレートへのデータの渡し方

view.renderメソッドの第2引数としてオブジェクトを渡すことで、テンプレートにデータを渡すことができます。

router.get('/', async ({ view }) => {
  return view.render('welcome', { username: 'romainlanz' })
})

Edgeの設定

Edgeにはプラグインを使用したり、グローバルヘルパーを追加したりすることができます。startディレクトリ内にpreloadファイルを作成することで設定できます。

node ace make:preload view

start/view.ts

import edge from 'edge.js'
import env from '#start/env'
import { edgeIconify } from 'edge-iconify'

/**
 * プラグインを登録する
 */
edge.use(edgeIconify)

/**
 * グローバルプロパティを定義する
 */
edge.global('appUrl', env.get('APP_URL'))

グローバルヘルパー

AdonisJSが提供するヘルパーのリストは、Edgeヘルパーのリファレンスガイドを参照してください。