テンプレートエンジン Twigの使い方

Tag:

Twigを利用するとテンプレートからロジックを分離することができます。ここではTwigの基本的な使い方について紹介します。

Twigのインストール

Composerを利用してTwigをインストールします。Composerの使い方については「PHP : Composerでパッケージ管理 | DN-Web64」を参照願います。

1. composer.jsonを開き、requireに「twig/twig」を追記します。

"require": {
    // XXXXX (すでに取り込んだパッケージ)
    // YYYYY (すでに取り込んだパッケージ)
 
    "twig/twig": "1.*"  // ←今回追加するパッケージ
}

参考:Twigのパッケージ情報

2. composer.jsonのあるディレクトリに移動して「composer update」を実行します。
twig

以上でTwigのパッケージがインストールされました。

Twig 利用例

簡単な利用例を紹介します。まず下記のようにフォルダとファイルを作成します。
twig1

「twigsample/test.php」には次のように処理を記述します。

<?php

require_once(realpath(__DIR__) . "/../../../composer_pj1/vendor/autoload.php");

$loader = new Twig_Loader_Filesystem(__DIR__ . '/templates');
$twig = new Twig_Environment($loader, array('cache' => __DIR__ . '/twig_cache'));

$data = array();
$data['name'] = "dnweb";
$data['title'] = "Twigのテスト";
$data['score'] = array('english' => 90, 'math' => 84, 'science' => 82); 

echo $twig->render('base.html', $data);

「twigsample/templates/base.html」は次のようなテンプレートになります。

<!DOCTYPE html>
<html>
    <head>
        <title>{{ title }}</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        {# コメントはこの中に記述 HTMLとして出力されません #}
        <h1>{{ title }}</h1>
        <p>{{ name }}</p>
        <ul>
            <li>英語:{{ score.english }}</li>
            <li>数学:{{ score.math }}</li>
            <li>理科:{{ score.science }}</li>
        </ul>
    </body>
</html>

結果は次のようになります。

twig2

ロジック側で生成したデータがテンプレートに引き渡されていることがわかります。

{{ title }}   ⇒ 変数titleの内容を出力
{{ score.english }} ⇒ 配列score['english']の内容を出力

1度実行するとキャッシュが生成され、指定されたフォルダ(上記例では、「twigsample/twig_cache」)に保存されます。キャッシュは、次回以降実行されたとき利用されます。もしソースを書き替えた場合、キャッシュを削除しないと変更が反映されないので気を付けてください。

継承

Twigの継承機能を利用すると元のテンプレートの一部分だけを差し替えることができます。継承を利用すると無駄にファイルまるごとコピーすることを防ぐことができます。

例を示します。まずparent.phpという継承元ファイルを作成します。

<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}Welcome!{% endblock %}</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>

child.phpというテンプレファイルを新たに作ります。child.phpはparent.phpを継承させます。

{% extends 'parent.html' %}

{% block title %}
Twig継承テスト
{% endblock %}

{% block body %}
<p>ああああああああああああ</p>
{% endblock %}

extendsで継承元ファイルを指定しています。blockというタグで指定した内容が、継承元ファイルの同じblockで囲まれた範囲の内容を差し替えます。

その他の使い方については、Twigの公式サイトを参考にしてみてください。
http://twig.sensiolabs.org/documentation

スポンサーリンク