【初心者】Twigについてのいろいろなことを語ります【必見】 | もやしほーむ 【初心者】Twigについてのいろいろなことを語ります【必見】 | もやしほーむ

もやしほーむ

作成したプログラムの紹介や、日々の徒然について更新

【初心者】Twigについてのいろいろなことを語ります【必見】

time 2022/06/14

【初心者】Twigについてのいろいろなことを語ります【必見】

sponsored link

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://moyashihome.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://moyashihome.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について研鑽を深めていきましょう。

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

ここまで読んでいただき、有り難うございました。応援していただけると励みになります。

\楽天ポイント5倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

sponsored link

down

コメントする

コメントは日本語で入力してください。(スパム対策)




もやしほーむ

白川秋

白川秋

こんにちは。各種プラットフォームでのWordpress、EC-CUBEの使い方や、PHPプログラミングについて書いています。よろしくお願いいたします。



sponsored link

カテゴリー

表示できるコメントはありません。
2022年6月
 1234
567891011
12131415161718
19202122232425
2627282930