blocs/blocs: テンプレートエンジン概要とデータ属性一覧

blocs/blocs: テンプレートエンジン概要とデータ属性一覧

BLOCSは、Laravelで利用できるテンプレートエンジンです。HTMLの data-* 属性を使って動的コンテンツを生成し、バリデーション条件もテンプレート側で指定できます。Laravel標準のBladeと併用可能です。このドキュメントでは、BLOCSの全体像とデータ属性の一覧を説明します。

特徴

• data- 属性による動的HTML生成*: 条件分岐、繰り返し、変数表示をHTMLの構造を保ったまま記述
• テンプレートでバリデーション指定: 必須入力や文字数制限などをコントローラーではなくテンプレートで指定
• Bladeとのハイブリッド利用: 必要な部分だけBLOCSを使う柔軟な開発が可能

テンプレートファイルの拡張子

BLOCSのテンプレートは .blocs.html 拡張子で、そのままHTMLとしてブラウザで確認できます。

タグ記法

HTMLタグに data-* 属性を追加して動的に制御する方法です。開始タグにデータ属性を付けることで、タグ全体（開始〜終了）を対象に処理します。

<div class="error" data-exist=$errorMessage data-val=$errorMessage>
    errorMessage
</div>

コメント記法

HTMLコメント内にデータ属性を記述する方法です。他のテンプレートの読み込みやタグへの属性追加に使用します。コメント記法で記述した属性は、直後のHTMLタグに適用されます。

<!-- data-attribute="class" data-val="success" data-none=$error -->
<div class="error" data-val=$message>Message</div>

タグ記法とコメント記法を組み合わせた例:

<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タグを動的に制御する

フォーム入力にバリデーション条件を指定する

テンプレートを再利用する

コメント記法の終了タグ

エイリアス・内部属性

重要: 上記が BLOCS テンプレートエンジンが解釈する data 属性の一覧です。HTML の標準 data 属性（例: Bootstrap の data-bs-toggle）は別途使用できますが、BLOCS 独自の動的制御用属性は一覧にないものを新規に定義することはできません。

data-notice / data-lang の使い方

data-notice と data-lang は同一属性です（エイリアス）。言語ファイルのキーを指定して翻訳文字列を変数に代入します。フォーム部品と組み合わせてエラーメッセージや案内文をテンプレート側で定義するときに使います（詳しくは No.2.9 を参照）。

<!-- data-notice="template:admin_user_invalid_title" -->

詳細ドキュメント

各データ属性の詳しい使い方は以下を参照してください。

省略記法