はじめに
VaporアプリケーションにViewも作ってみようと思います。
これまで、Vaporフレームワークを使ってWebAPIを作り、クライアントアプリケーションからそのAPIを経由してMongoDBのドキュメントの操作をすることができるようになりました。
今度はWebアプリケーションに挑戦です。
テンプレートエンジンLeaf
WebアプリケーションのフロントエンドにはLeafと呼ばれるテンプレートエンジンを使います。
Leaf is a powerful templating language with Swift-inspired syntax.
公式サイト https://docs.vapor.codes/3.0/leaf/getting-started/
パッケージが用意されているので、Vaporアプリケーションへ簡単に導入できます。早速使ってみようと思います。
値のやり取りを行わないViewを表示してみる
新しい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のプロジェクトを作るかどうか尋ねられるので、作っておきましょう。
configure.swiftを修正する
Leafを使うための設定を追記します。
2行目のは標準のViewRendererの代わりにLeafRendererを使うという設定です。
try services.register(LeafProvider())
config.prefer(LeafRenderer.self, for: ViewRenderer.self)import Leafを忘れずに！
Viewファイルのためのディレクトリを作る
初期の状態では、Viewを保存するためのディレクトリはありません。このまま進んでも良いのですが、整理するために適宜作っておきましょう。
作ったらXCodeプロジェクトに反映するためvapor xcodeでプロジェクトの再作成を行いましょう。
ただし、ここでvapor updateを実行してしまうと、作ったディレクトリが消えてしまいました。ご注意を！
Viewを作る(値の受け渡しをしないもの)
いざViewを作っていきます。今回は値の受け渡しをせず、決まった文言を表示するViewを作ります。いわゆる静的ページです。
<!DOCTYPE html>
<html>
<head>
<title>Leaf</title>
</head>
<body>
Hello, Leaf!!
</body>
</html>用意したディレクトリに適宜名前を付けて保存しましょう。拡張子はleafです。
今回はHelloLeaf.leafにしました。
Viewを呼び出してみる
作った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をレンダリングします。
動かしてみる
ワクワクする瞬間です。
いえ〜い:D
まとめ
テンプレートエンジンLeaf
いかめしく感じる(個人の感想)語感からちょっと敬遠していましたが、試してみるとなかなか気さくでフレンドリーなヤツでした。値を渡して動的にページを生成してみることもできそうな感じがします。
余談
XCodeでHTMLを扱うのは辛いです。HTMLなのでシンタックスハイライトはしてくれるんですけどね。閉じタグを補完してくれなかったり入力補助がなかったりというところが地味に大きな負担です。この点については別途IDEを用意したほうが良さげです。
Vapor周りはXCode、View周りは別のエディタと切り分ける感じでしょうか。使い分けが煩わしいそうです。一方で、フロントエンドとバックエンドが分けられるので、開発の分担を行う観点からは有用かもしれません。
