なぜBLOCSを開発するのか
BLOCSは、LaravelのBladeをもっと便利にする拡張パッケージです。なぜBLOCSを開発するのか？「Bladeって結局プログラムをしないといけない感じがします」すべてはこの一言に集約されます。
Bladeのテンプレートでは、本の一覧表示などの繰り返し処理を以下のように記述します。せっかくHTMLは構造化されているのに、構造を活用せずにテンプレートを書くので「結局プログラムをしないといけない感」が出るのではと。HTMLの構造を活かすことで、Bladeのプログラムっぽさを減らせるのでは？と考え、BLOCSの開発を始めました。
@foreach($books as $book)
<tr>
<td>{{ $book->id }}</td>
<td>{{ $book->title }}</td>
...
<td>
@foreach($book->tags as $bookTag)
<span>
{{ $bookTag->name }}
<br>
</span>
@endforeach
</td>
...
</tr>
@endforeach
BLOCSができること
HTMLを動的にする多くの場合、開始タグから終了タグまでを置換、表示・非表示、繰り返し表示などの処理をします。それなら、開始タグにデータ属性をつけて、開始タグから終了タグまでを処理をすればいいのではと考えました。BLOCSはデータ属性を開始タグに追加して、HTMLを動的に生成します。この記述方法をタグ記法と呼びます。
BLOCSを使うと、同様の処理を以下のように記述できます。テンプレートで指定したデータ属性data-*で、HTMLを動的に生成します。HTMLをくずさずに構造を活かして、シンプルに記述できるテンプレートエンジンを目指して、BLOCSを開発しています。
<tr data-loop=$books>
<td>{{ $book->id }}</td>
<td>{{ $book->title }}</td>
...
<td>
<span data-loop=$book->tags data-assign=$bookTag>
{{ $bookTag->name }}
<br>
</span>
</td>
...
</tr>
BLOCSはHTMLの構造を活かしてシンプルに書ける
他のテンプレートの読み込みや、条件によるHTML表示の制御など一通りのデータ属性をそろえてはおりますが、Laravelの標準テンプレートエンジンBladeとハイブリッドで使うことができるので、開発者の嗜好に合わせて楽になりそうな部分だけBLOCSを使ってください。
BLOCSを使ってみよう
Laravelがインストールされている環境に、composerでインストールするだけで簡単に使い始めれます。
composer require blocs/blocs
テンプレートを作る
Bladeのファイル名は*.blade.phpですが、BLOCSのファイル名は*.blocs.htmlです。BLOCSテンプレートはHTMLとしてブラウジングできるので、拡張子を.htmlにしました。
BLOCSテンプレートは*.blocs.htmlで作る
タグ記法
それでは、よくあるエラーがあればメッセージを表示するテンプレートを作ってみましょう。Bladeで書くとこんな感じでしょうか。
<html>
@if ($errorMessage)
<div class="error">
{{ $errorMessage }}
</div>
@endif
</html>
BLOCSは、こんな感じで書けます。データ属性を開始タグに追加するだけなので、テンプレートにする前のHTMLをそのまま残しておくことができます。BLOCSテンプレートは、HTMLをくずさずにそのままブラウジングできることを目指しています。
<html>
<div class="error" data-exist=$errorMessage data-val=$errorMessage>
errorMessage
</div>
</html>
BladeとBLOCSをハイブリッドで、下記のように書くこともできます。お好みでBLOCSとBladeを使い分けてください。
<html>
<div class="error" data-exist=$errorMessage>
{{ $errorMessage }}
</div>
</html>
タグ記法はHTMLの開始タグに属性を追加する
コメント記法
他のテンプレートを読み込む時や、HTMLタグに属性を動的に追加する時にコメント記法で書きます。データ属性data-attributeは、コメント記法の次にあるHTMLタグの属性値を置換します。
それでは、よくあるエラーがあればclassをerror、なければsuccessとするテンプレートは作ってみましょう。Bladeではこんな感じでしょうか？
<html>
@if ($errorMessage)
<div class="error">{{ $errorMessage }}</div>
@else
<div class="success">Success</div>
@endif
</html>
BLOCSは、こんな感じで書けます。データ属性をコメントに書くので、HTMLをくずさずにそのままブラウジングできます。
<html>
<!-- data-attribute=class data-val="error" data-exist=$errorMessage -->
<div class="success" data-val=$errorMessage>Success</div>
</html>
data-attributeは以下のように省略することもできます。
<html>
<!-- :class="error" data-exist=$errorMessage -->
<div class="success" data-val=$errorMessage>Success</div>
</html>
data-attributeなどコメント記法で書くタグ属性もある