概要
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>
http://127.0.0.1:8000/blocs
<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>
http://127.0.0.1:8000/blocs
<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>
http://127.0.0.1:8000/blocs
<html> <div class="success">No error has occurred.</div> </html>