【EC-CUBE】Twigについてのいろいろなことを語ります【必見】

Twigとは？

Twigについての情報って少ないですよね。書籍もほとんどなし。下のほうで紹介している、Twigの本を参考にするのも良いでしょう。

Twigとは何でしょう？僕はTwigとは、何かしらの言語かと思っていました。

が、しかし、これは勘違いのようです。

正確には、PHP製のテンプレートエンジンです。

テンプレートエンジンとは？ちょっと難しくなるのですが、簡単に考えますと、データとテンプレートを合体させて、文字列を作る仕組みのことです。

PHPで考えると、データというのはオブジェクトや配列を指し、テンプレートエンジン自体はPHPのライブラリと考えて問題ありません。

どのように使う？

本来は、Laravelなどのプラットフォームからインストールして使用する方法が普通のようですが、EC-CUBEでは元からTwigを使用する仕組みが備わっています。

EC-CUBEでTwigを使うとなる場合は、特に何も考えなくて良いです。

Twigの基本構文

以前も触れましたが、Twigの基本構文はだいたい3つのパターンです。

• 表示させる　　　　・・・　{{ 値 }}
• 処理をする　　　　・・・　{% 処理 %}
• コメントを入れる　・・・　{# テキスト #}

これだけですので、特に混乱することはありませんよね？

様々な使用法

コメント文

{# ここにコメント文を記述します #}

変数

{{ 変数名 }}

※ただし条件式の中では{{}}は不要で、例えば「{% if message="hello" %}」のようになります。

条件式

if文

{% if 条件式 %}
{% endif %}

更には次のような使い方も可能です。

{% if 条件式A and 条件式B %}
{% elseif 条件式 %}
{% else %}
{% endif %}

for文

{% for i = 1 1..100 %}
{% endfor %}

foreach文（for in で代用）

{% for key in value %}
{% endfor %}

keyは任意の名前、valueも任意の配列を指します。

三項演算子

{{ 条件式 ? 処理A : 処理B }}

条件式が正を満たすときに処理Aを行い、誤のときに処理Bを行います。

継承

{% extends 'ファイルパス' %}

• 別ファイルから継承します。但し、複数はNGです。
• 親ブロックを子ブロックが上書きする場合です。
• {% block ブロック名 %}～{% endblock %}

挿入

{% include 'ファイルパス' %}
{% include 'aaa/bbb' with { 'aaa' : 'bbb' } %}    // 引数も取れます

CSRF対策

{{ csrf_field() }}

HTML文のエスケープ

{{ html文 | e("<a>test</a>") }}

同じTwig内で設定する方法

{% set 変数名 = 'value' %}
{% set array = [ A , B ] %}    // 配列の場合
{% set array = [ key : value ] %}    // 連想配列の場合

Controllerなどから渡す場合

変数：{{ 変数名 }}
配列：{{ 変数名.キー名 }}    ※連想配列も可

以下、例を示します。

$url = 'https://shirakawaroom.com';
$post = $this->post_model->getPostArray();    // 'id' => '1', 'title' => 'タイトル'
return view('post/show',
[
    'url' => $url,    // 変数
    'post' => $post   // 配列
];

Twigファイル

<p>変数は「{{ url }}」です。</p>
<p>配列は、idが{{ post.id }}で、titleが{{ post.title }}です。</p>

出力結果

変数は「https://shirakawaroom.com」です。
配列は、idが1で、titleがタイトルです。

となります。

その他

{{ 変数 | length }}    // 文字数
{{ dump() }}           // PHPのdumpと同じ

バリデーションエラーなど、定型変数のときの書き方

input_old('タグの名前')    // セッションなどで確認フォームを利用するとき
errors.first('タグの名前') // バリデーションエラー時

例文

テンプレート・変数を使用したページ

{% extends 'layout/user_default' %}
{% block content %}
{% set title='hello' %}
<div class="sample">
    <h1>{{ title }}</h1>
</div>
{% endblock %}

E-mailのフォーム（一部抜粋したもの）

<div class="form-group">
    <label for="f-email">E-mail Address</label>
    <input type="email" name="email" class="form-control" id="f-mail" ...(略)...
      value="{{ input_old('email') }}" placeholder="entry@example.com">
      {% if errors.first('email') | length > 0 %}
    <span class="text-danger">{{ errors.first('email') }}</span>
    {% endif %}
</div>

まとめ

以上、Twigにはさまざまな使い方があることがわかりましたね。

ここで使われている方法や、あとは自身でいろいろと調べて、Twigについて研鑽を深めていきましょう。

下で売ってる本、おすすめですよ。