twigの文法

私は普段、EC-CUBEというオープンソースのECシステムで作成されたサイトの改修を行なっています。

EC-CUBEでは、twigというPHPのテンプレートエンジンが使用されています。

拡張子は、.twigです。

そんなtwigの文法について(フロントエンドのみ)書いていきます。

変数定義

シンプルに代入したい場合

例えば、商品の名前をfooという変数に入れたい場合は、下記のようになります。

{% set foo = Product.name %}

配列を代入したい場合

例えば、商品ID123456, 123457, 123458をまとめてfooという変数に入れたい場合は、下記のようになります。

{% set foo = [123456, 123457, 123458] %}

多次元配列

例えば、fruitという変数に、複数の果物の商品情報を入れたい場合は、下記のようになります。

{% set fruit = { "product_01": { "product_id": 123456, "name": apple }, "product_02": { "product_id": 1234567, "name": banana }, "product_03": { "product_id": 1234568, "name": kiwi } } %}

出力したいとき

変数の値などを出力したいときは、{{ }}を使用します。

変数の値

例えば、変数fooの値を出力するときは、下記のようになります。

{{ foo }}

for文

例えば、fruit_listという多次元配列から、中に入っているデータの数だけ繰り返して出力したいときは、下記のようになります。

{% set fruit_list = { "product_01": { "id": 123456, "name": apple }, "product_02": { "id": 123457, "name": banana }, "product_03": { "id": 123458, "name": kiwi } } %}

<ul>
 {% for fruit in fruit_list %}
  <li>商品ID: {{ fruit.id }}, 商品名: {{ fruit.name }}</li>
 {% endfor %}
</ul>

出力結果はこちらです。

<ul>
 <li>商品ID: 123456, 商品名: apple</li>
 <li>商品ID: 123457, 商品名: banana</li>
 <li>商品ID: 123458, 商品名: kiwi</li>
</ul>

条件分岐

肯定のif

例えば、商品のIDが123456の場合の条件式は以下のようになります。

{% if Product.id == 123456 %}
 {# trueの場合の処理 #}
{% endif %}

否定のif

例えば、商品のIDが123456でない場合の条件式は、以下のようになります。

{% if Product.id != 123456 %}
 {# trueの場合の処理 #}
{% endif %}

複数条件

例えば、商品のIDが123456、かつ、商品の名前がfooの場合の条件式は、以下のようになります。

{% if Product.id == 123456 and Product.name == 'foo' %}
 {# trueの場合の処理 #}
{% endif %}

商品のIDが123456、または、商品の名前がfooの場合の条件式は、以下のようになります。

{% if Product.id == 123456 or Product.name == 'foo' %}
 {# trueの場合の処理 #}
{% endif %}

その他の文法

本記事では、twigの文法についていくつかピックアップして書いてきました。

その他の文法は公式サイトのドキュメントが参考になります。