概要
BLOCSは、LaravelのBladeをもっと便利にする拡張パッケージです。Bladeのテンプレートでは、本の一覧表示などの繰り返し処理を以下のように記述します。
@foreach($books as $book)
<tr>
<td>{{ $book->id }}</td>
<td>{{ $book->title }}</td>
...
<td>
@foreach($book->tags as $bookTag)
<span>{{ $bookTag->name }}</span><br>
@endforeach
</td>
...
</tr>
@endforeach
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>
特徴
- HTMLをくずさない記述方法(タグ記法、コメント記法)
<div class="error" data-exist=$error>{{ $message }}</div>
- テンプレートでバリデーションを指定
<form method="post">
@csrf
<label for="name">名前</label>
<input type="text" id="name" name="name" data-filter="katakana" required />
<!-- data-form="name" data-validate="required" data-lang="必須入力です。" -->
@error("name") <div>{{ $message }}</div> @enderror
<input type="submit" />
</form>
select
radio
checkbox
の項目を動的に追加
/routes/web.php
2行目 Warning
を追加
Route::get("/blocs", function () {
\Blocs\Option::add("level", ["2" => "Warning"]);
return view("example", [
"level" => "2"
]);
});
/resources/views/example.blocs.html
<html>
<form>
<select name="level">
<option value="">No error</option>
<option value="1">Fatal error</option>
</select>
</form>
</html>
<html>
<form>
<select name="level">
<option value="">No error</option>
<option value="1">Fatal error</option>
<option value="2" selected>Warning</option>
</select>
</form>
</html>
導入方法
composerで導入してください。
laravel-app % composer require blocs/blocs
Info from https://repo.packagist.org: #StandWithUkraine
Using version dev-main for blocs/blocs
./composer.json has been updated
Running composer update blocs/blocs
Loading composer repositories with package information
Info from https://repo.packagist.org: #StandWithUkraine
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
- Locking blocs/blocs (dev-main 1c25ad6)
Writing lock file
Installing dependencies from lock file (including require-dev)
システム要件
Laravel >= 7
php >= 7.2.5
使い方
BLOCSテンプレートのファイル名は*.blocs.html
です。データ属性data-*
は、HTMLタグに属性を追加するタグ記法と、コメントで記述するコメント記法の2つの記述方法があります。4種類のデータ属性をタグ記法とコメント記法で記述して、HTMLを動的に生成します。
タグ記法
タグ記法は、HTMLタグにデータ属性を追加する記述方法です。開始タグに追加したデータ属性は、終了タグまで影響します。下記の例では、$message
の値でdiv
の間のコンテンツをすべて置換します。追加したデータ属性は、BLOCSが生成したHTMLでは削除されます。
/routes/web.php
Route::get("/blocs", function () {
return view("example", [
"error" => true,
"message" => "A fatal error has occurred."
]);
});
/resources/views/example.blocs.html
2行目 $error
があれば、$message
を表示
<html>
<div class="error" data-exist=$error data-val=$message>Message</div>
</html>
<html>
<div class="error">A fatal error has occurred.</div>
</html>
コメント記法
他のテンプレートを読み込む時や、HTMLタグに属性を動的に追加する時に、コメント記法で記述します。データ属性data-attribute
は、コメント記法の次にあるHTMLタグの属性値を置換します。下記の例では$error
がない(エラーが発生しなかった)時は、div
のclass
にsuccess
をセットします。タグ記法とコメント記法は併用できます。
/routes/web.php
Route::get("/blocs", function () {
return view("example", [
"error" => false,
"message" => "No error has occurred."
]);
});
/resources/views/example.blocs.html
2行目 $error
がなければ、div
のclass
をsuccess
にする
<html>
<!-- data-attribute="class" data-val="success" data-none=$error -->
<div class="error" data-val=$message>Message</div>
</html>
<html>
<div class="success">No error has occurred.</div>
</html>