Laravelでフォームが簡単に作れるフォームビルダーライブラリ Aire

インストール&初期設定

AireはLaravelにComposerで追加します。

$ composer require glhd/aire

出力されるタグにはデフォルトでクラス名が記述されますが、タグにクラス名を追記したい場合は設定ファイルを生成して編集します。

$ php artisan vendor:publish --tag=aire-config

これでconfigディレクトリにaire.phpが生成されます。

例えばinputとlabelタグにクラス名を設定したい場合は、default_classesの部分を次のように追記します。

config/aire.php

'default_classes' => [
	'label' => 'col-form-label',
	'input' => 'form-control',
],

クラス名は個別にも設定できますが、同じクラス名を指定することが多いと思いますので、まとめて設定しておいた方が楽ですね。

フォームタグの作成

ライブラリをインストールするとViewファイルでAireファサードが使用できるようになります。
最初にフォームタグ表示してみましょう。新規作成は普通に書くと次のようになりますね。

<form method="POST" action="{{ route('posts.store') }}">
	@csrf
	<!-- .... -->
</form>

Aireを使うと次のように書くことができます。

{{ Aire::open()->route('posts.store') }}
	<!-- .... -->
{{ Aire::close() }}

CSRFは自動的に出力してくれます。

次は編集（update）の場合です。
bindでモデルを指定すると、中に記述するinputタグ等の値を自動的に出力してくれます。
また、@method('PUT')も必要ありません。

{{ Aire::open()->route('posts.update', $bookmark)->bind($post) }}
	<!-- .... -->
{{ Aire::close() }}

インプットテキストの作成

インプットテキストを作成してみます。

{{ Aire::input('title', 'タイトル')->groupClass('form-group row') }}

inputメソッドはlabelタグとinputタグが出力されます。
groupClassを指定すると大枠のクラス名を設定できます。

<div class="form-group row">
	<label for="inputTitle" class="col-sm-2 col-form-label">タイトル</label>
	<div class="col-sm-10">
		<input type="text" name="title"
			value="..."
			class="form-control  " id="inputTitle" required>
	</div>
</div>

チェックボックスの作成

チェックボックスを作成してみます。
例えばid,nameの$tagsという連想配列をチェックボックスで出力したい場合は次のようにします。。

{{ Aire::checkboxGroup($tags, 'tag', 'タグ')->groupClass('form-group row') }}

foreach を使用しなくてもいいのでだいぶ短くなりますね。

Aire はラベルとインプットタグをセットで表示できるので、型にはまったフォームなら短い記述で構築できそうです。
他にもフロント側のバリデーションも設定できる機能や、表示をカスタマイズできるテーマ機能などもあります。

詳しくは下記ドキュメントをご確認ください。

Documentation & Demos – Aire (Laravel Form Builder)