VaporアプリケーションのためのフロントエンドのViewを作る

はじめに

VaporアプリケーションにViewも作ってみようと思います。

これまで、Vaporフレームワークを使ってWebAPIを作り、クライアントアプリケーションからそのAPIを経由してMongoDBのドキュメントの操作をすることができるようになりました。

今度はWebアプリケーションに挑戦です。

WebアプリケーションのフロントエンドにはLeafと呼ばれるテンプレートエンジンを使います。

Leaf is a powerful templating language with Swift-inspired syntax.
公式サイト https://docs.vapor.codes/3.0/leaf/getting-started/

パッケージが用意されているので、Vaporアプリケーションへ簡単に導入できます。早速使ってみようと思います。

これまでに作ったアプリケーションに導入すると混乱しそうですので、ひとまずまっさらなプロジェクトを作ります。

vapor new [プロジェクト名] --api

作業を行うためのディレクトリ内でサクッと行きましょう。

Leafを使うためにパッケージを導入します。

Package.swiftに下記を追加します。

.package(url: "https://github.com/vapor/leaf.git", from: "3.0.0")
.target(name: "App", dependencies: ["Vapor", "Leaf"]), // "Leaf"を追加

パッケージのアップデートを行います。

vapor update

ちょっと時間がかかります。このアップデートの最後あたりでXCodeのプロジェクトを作るかどうか尋ねられるので、作っておきましょう。

Leafを使うための設定を追記します。
2行目のは標準のViewRendererの代わりにLeafRendererを使うという設定です。

try services.register(LeafProvider())
config.prefer(LeafRenderer.self, for: ViewRenderer.self)

import Leafを忘れずに！

初期の状態では、Viewを保存するためのディレクトリはありません。このまま進んでも良いのですが、整理するために適宜作っておきましょう。

作ったらXCodeプロジェクトに反映するためvapor xcodeでプロジェクトの再作成を行いましょう。
ただし、ここでvapor updateを実行してしまうと、作ったディレクトリが消えてしまいました。ご注意を！

いざViewを作っていきます。今回は値の受け渡しをせず、決まった文言を表示するViewを作ります。いわゆる静的ページです。

<!DOCTYPE html>
<html>
    <head>
        <title>Leaf</title>
    </head>
    <body>
        Hello, Leaf!!
    </body>
</html>

用意したディレクトリに適宜名前を付けて保存しましょう。拡張子はleafです。
今回はHelloLeaf.leafにしました。

作ったViewを呼び出してみます。routes.swiftには初期の状態でいくつかrouterがあるので、それを流用します。

router.get("leafHello") { req -> Future<View> in
    return try req.view().render("HelloLeaf")
}

APIを叩いてMongoDBのドキュメントを取得したときによく似ています。MongoDBからドキュメントを取得したときにreturnで返される値はドキュメントの配列でしたが、今回はViewになっています。

req.view()はViewRendererを生成しますが、configure.swiftでLeafRendererを使うようにしていますのでLeafRendererが生成されます。

このLeafRendererでHelloLeaf.leafをレンダリングします。

ワクワクする瞬間です。

用意したleafファイルがレンダリングして表示されています

いえ〜い:D

テンプレートエンジンLeaf

いかめしく感じる(個人の感想)語感からちょっと敬遠していましたが、試してみるとなかなか気さくでフレンドリーなヤツでした。値を渡して動的にページを生成してみることもできそうな感じがします。

XCodeでHTMLを扱うのは辛いです。HTMLなのでシンタックスハイライトはしてくれるんですけどね。閉じタグを補完してくれなかったり入力補助がなかったりというところが地味に大きな負担です。この点については別途IDEを用意したほうが良さげです。

Vapor周りはXCode、View周りは別のエディタと切り分ける感じでしょうか。使い分けが煩わしいそうです。一方で、フロントエンドとバックエンドが分けられるので、開発の分担を行う観点からは有用かもしれません。