Slim Framework を使ってみる Part.2(テンプレートエンジン Twig を使用する)

2 min read読了の目安(約2500字

はじめに

前回の続きです。
タイトルの通り、 Twig を使用してみます。

https://zenn.dev/nemo_ensi/articles/3ea2c41c856f9acd2a0e

インストール

以下のコマンドを叩くだけ。楽チンですね。

% composer require slim/twig-view

使ってみる

まず、テンプレート保存用のディレクトリを作成し、その中に HTML でテンプレートファイルを適当に作成します。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>テストテンプレート</title>
</head>
<body>
    <h1>Hello, Twig!</h1>
</body>
</html>

続けて、以下のようにルーティングを登録します。
use の行を忘れないように。

use Slim\Views\Twig;

$app->any('/testTwig', function ($request, $response, $args):ResponseInterface {
    $twig = Twig::create('テンプレートが保存されているディレクトリ');
    $response = $twig->render($response, '上記のディレクトリ内にある作成したテンプレートのファイル名');
    return $response;
});

そのようにして、ブラウザーで http://localhost/testTwig にアクセスすると、先ほど作成した HTML が返ってきます。

1 つだけならまだいいですが、これが大量になってくると、記述量が増えて大変なことになるようです。
そこでコンテナという機能があるようですが、それはまた後日。

テンプレート変数を使う

さきほどのは静的コンテンツなので、パラメーターを表示させてみます。
テンプレートを以下のように書き換えます。

- <h1>Hello, Twig!</h1>
+ <h1>Hello, {{name}}!</h1>

以下のようにルート登録します。

$app->any('/testTwigValues/{name}', function ($request, $response, $args):ResponseInterface {
    $twig = Twig::create('テンプレートが保存されているディレクトリ');
    $response = $twig->render($response, '上記のディレクトリ内にある作成したテンプレートのファイル名', $args);
    return $response;
});

そのようにして、ブラウザーで http://localhost/testTwigValues/hoge にアクセスすると、先ほど作成した HTML が返ってきますが、 h1 タグの中身が Hello, hoge! に変わります。
テンプレート側で {{}} で指定した文字列と同じ名前の要素が render メソッドの第 3 引数に渡された連想配列にあれば、それを埋め込んでくれます。
自動的にエスケープもしてくれるようですので、 XSS 脆弱性の対応も安心?

その他の記法

ドットアクセス

{{hoge.piyo}} とすると、連想配列ならば ['hoge']['piyo'] から値を出力したり、 hoge がオブジェクトのインスタンスなら piyo メソッドの返り値を表示したりと、柔軟に表示してくれます。

コメント

{# comment #} と書いたら無視されます。
テンプレートは通常の HTML なので、 <!-- --> を使うのも良いですが、 Twig のコメントで書くとレスポンスに含まれないので、使い分けができそうです。

フィルタ

{{hoge|nl2br}} のように | (パイプ)をかませると、出力する値を色々変更できるようです。(重ねがけOK!)色々便利そうです。
どんなフィルタがあるか、公式のドキュメントをじっくり読みたいと思います。

https://twig.symfony.com/doc/3.x/filters/index.html

条件分岐

{% if hoge == 1 %}
    1{% elseif hoge == 2 %}
    2{% else %}
    3!
{% endif %}

ループ

for

{% for hoge in 1..100 %}
{% endfor %}

foreach (配列)

{% for piyo in hoge %}
    {{piyo}}
{% else %}
    配列が空の時の処理
{% endfor %}

foreach (連想配列)

{% for key, value in hoge %}
    {{key}} : {{value}}
{% else %}
    配列が空の時の処理
{% endfor %}

おわりに

ざくっと Twig の使い方を見てきましたが、非常にシンプルで使いやすいなと思います。
むかーし Smarty を使っていましたが、ほとんど記憶に残っていないので(すみません)機会があれば久しぶりに触ってみたいです。