Leaf¶

Leaf は、Swift にインスパイアされた構文を持つ強力なテンプレート言語です。これを使って、フロントエンドのウェブサイト向けに動的な HTML ページを生成したり、API から送信するリッチなメールを生成したりできます。

Package¶

Leaf を使用する最初のステップは、プロジェクトの SPM パッケージマニフェストファイルに依存関係として追加することです。

// swift-tools-version:5.8
import PackageDescription

let package = Package(
    name: "MyApp",
    platforms: [
       .macOS(.v10_15)
    ],
    dependencies: [
        /// Any other dependencies ...
        .package(url: "https://github.com/vapor/leaf.git", from: "4.4.0"),
    ],
    targets: [
        .target(name: "App", dependencies: [
            .product(name: "Leaf", package: "leaf"),
            // Any other dependencies
        ]),
        // Other targets
    ]
)

設定¶

パッケージをプロジェクトに追加したら、Vapor を設定してそれを使用するように構成します。これは通常、configure.swift で行います。

import Leaf

app.views.use(.leaf)

これにより、コード内で req.view を呼び出すと、Vapor が LeafRenderer を使用するように指示します。

Warning

Xcode から実行する際に Leaf がテンプレートを見つけられるようにするためには、 Xcode ワークスペースの custom working directory を設定する必要があります。

ページレンダリング用のキャッシュ¶

Leaf には、ページをレンダリングするための内部キャッシュがあります。Application の環境が .development に設定されている場合、このキャッシュは無効になり、テンプレートへの変更が即座に反映されます。.production やその他の環境では、キャッシュがデフォルトで有効になっており、テンプレートに加えた変更はアプリケーションを再起動するまで反映されません。

Leaf のキャッシュを無効にするには、以下を実行します：

app.leaf.cache.isEnabled = false

Warning

キャッシュを無効にすることはデバッグには役立ちますが、リクエストごとにテンプレートを再コンパイルする必要があるため、パフォーマンスに大きな影響を与える可能性があるため、本番環境では推奨されません。

フォルダ構成¶

Leaf を設定したら、.leaf ファイルを格納するための Views フォルダを用意する必要があります。デフォルトでは、Leaf はプロジェクトのルートに対して ./Resources/Views というフォルダを要求します。

JavaScript や CSS ファイルを提供する予定がある場合は、Vapor の FileMiddleware を有効にして、 /Public フォルダからファイルを提供できるようにすることも可能です。

VaporApp
├── Package.swift
├── Resources
│   ├── Views
│   │   └── hello.leaf
├── Public
│   ├── images (images resources)
│   ├── styles (css resources)
└── Sources
    └── ...

Viewのレンダリング¶

Leaf が設定できたので、最初のテンプレートをレンダリングしてみましょう。Resources/Views フォルダ内に、次の内容で hello.leaf という新しいファイルを作成します。

Hello, #(name)!

Tip

もし、コードエディタとして VSCode を使用している場合、シンタックスハイライトを有効にするために、Vapor 拡張機能をインストールすることをお勧めします：Vapor for VS Code

次に、View をレンダリングするルートを登録します。(通常は、routes.swift やコントローラで行います)

app.get("hello") { req -> EventLoopFuture<View> in
    return req.view.render("hello", ["name": "Leaf"])
}

// or

app.get("hello") { req async throws -> View in
    return try await req.view.render("hello", ["name": "Leaf"])
}

ここでは、Leaf を直接呼び出すのではなく、Request の汎用 view プロパティを使用します。これにより、テスト時に別のレンダラーに切り替えることができます。

ブラウザを開き、/hello にアクセスしてください。 Hello, Leaf! と表示されているはずです。これで最初の Leaf ビューのレンダリングが完了です！