✏️

Laravelで使えるテンプレートエンジン『BLOCS』を使ってみた！

2022/12/31に公開

HTML

エンジニア歴1年、Laravel使用歴半年程度の私が、HTMLと親和性の高いテンプレートエンジン『BLOCS』を使ってみたので、使用感をご紹介します。

ひよっこエンジニアにはBladeがややこしい！

Laravelを使っている方であれば、標準のテンプレートエンジンであるBladeを使っている方がほとんどかと思います。
経験豊富なエンジニアであれば、Bladeを不便なく使うことができるでしょう。しかし、ついこの間PHPに触れたばかりのひよっこエンジニアにとって、Bladeを使ってテンプレートを作成することは、PHPでプログラムを行うのと大差ない抵抗感を覚えることも多いのではないでしょうか。

例えば、コントローラーから受け取った$nameという値をそのまま表示するだけであれば、Bladeで下記のように書けばよいだけです。

example.blade.php

<p>Hello, {{$name}}.</p>

ここまでは、初心者でも簡単に理解できます。
しかし、$nameがある時だけ表示したいなど、ifの条件がある時には下記のように書きます。

example.blade.php

@if ($name != "")
  <p>Hello, {{$name}}.</p>
@else
  <p>Hello, Guest.</p>
@endif

このように、Bladeでifやforeachを使って値を動的に表示させる時、初心者であれば 「結局HTMLでもプログラミングするんかい」 という気持ちを抱いてしまうのではないでしょうか。

どんなテンプレートエンジンを使っていても、動的な表示をしたければ、ifやforeachの処理を使うことは避けられません。だとすれば、「プログラミング感」が極力少ないテンプレートエンジンの方が、ひよっこエンジニアにとっては抵抗なく利用できるのではないでしょうか。

プログラミング感の少ないBLOCSを使ってみる

BLOCSでは、「データ属性」というものを使って値を出力します。

先ほどの例と同じく、$nameがある時だけ値を表示したい場合には、下記のように書くことができます。

example.blocs.html

<p>Hello, <span data-val=$name>Guest</span>.</p>

ここで使用しているdata-valは「値が存在する場合に開始タグから終了タグまでの間を指定した値で置換する」というデータ属性です。
タグに属性を追加するだけでいいですし、値の存在による条件分けはグッと簡単になりました。

その他の代表的なデータ属性も簡単に紹介します。
data-if：条件を満たす時に表示する。
data-loop：配列を繰り返し処理する
data-convert：値を整形する形式を指定する。
data-attribute：値を置換するタグの属性を指定します。
これらはdata-valと組み合わせて表示する値を制御することができます。

上記の例のようなタグ内に記述する方法をBLOCSでは「タグ記法」と呼びます。一方で、「コメント記法」という記述方法も存在します。

例えば、タグの属性の値を書き換えたい場合、data-attributeをコメント記法で利用します。
aタグで飛ばすリンク先を指定のURLlinkとしたい場合、href属性を書き換える必要があります。
この場合、data-attributeを置換したい属性をもつタグの上にコメント記法で記載することで、hrefに指定の値を代入することができます。

sample.blocs.html

<!-- data-attribute="href" data-val=$link -->
<a>リンク</a>

▼出力

<a href="[$linkの中身]">リンク</a>

まとめ

「HTMLは書けるようになったけど、PHPはこれから・・・。」
「Laravelを使い始めたばかりで、Bladeの記述方法に慣れない。」
といった方に特にオススメです。
BLOCSを使いこなせるようになるまで多少の慣れは必要かもしれませんが、HTMLの構造をベースとして設計されていることによって、HTMLを崩さずに記述できるのが最大のメリットでしょう。
PHP初学者や、プログラムに苦手意識のある方でも親しみやすいのではないかと思います。

Laravelで使えるテンプレートエンジン『BLOCS』を使ってみた！

ひよっこエンジニアにはBladeがややこしい！

プログラミング感の少ないBLOCSを使ってみる

まとめ

関連リンク

Discussion