何を作るのか
BLOCSはLaravelで使えるテンプレートエンジンです。BLOCSを使って、簡単な本管理アプリを作ってみたので、ポイントを紹介します。本管理アプリでは、以下の3つの機能を作りました。当記事では、新規登録と編集機能を開発します。
- 本の新規登録
- 本の編集
- 本の一覧表示
当記事では、Bladeでの開発との違いにポイントを絞って説明します。開発したLaravelアプリのソースはGitHubで公開していますので、全体のソースはこちらをご参照ください。
ルーティング
まず、ルーティングをこんな感じで作りました。ルーティングはBladeと同じように開発します。indexが一覧表示、create、storeが新規登録、edit、updateが編集です。コントローラーBookController.phpも、Laravelで同様に開発します。
use App\Http\Controllers\BookController;
Route::prefix('books')
->name('book.')
->group(function () {
Route::get('/', [BookController::class, 'index'])->name('index');
Route::get('/create', [BookController::class, 'create'])->name('create');
Route::post('/', [BookController::class, 'store'])->name('store');
Route::get('/{id}/edit', [BookController::class, 'edit'])->where('id', '[0-9]+')->name('edit');
Route::post('/{id}', [BookController::class, 'update'])->where('id', '[0-9]+')->name('update');
}
);
本の新規登録
次に、本の新規登録画面createのテンプレートを作りました。Bladeだと、本のタイトルの入力フォームはこんな感じでしょうか。他にも価格、概要、タグを登録できるようにしました。
<div class="row">
<div class="col-4">タイトル</div>
<div class="col-8">
<input type="text" name="title" value="{{ old('title') }}" class="form-control">
</div>
</div>
BLOCSのテンプレートは、このように作りました。Bladeとの違いは、oldの指定とバリデーションの指定の２点です。BLOCSのファイル名は*.blocs.htmlです。
<div class="row">
<div class="col-4">タイトル</div>
<div class="col-8">
<input type="text" name="title" class="form-control" data-validate="bail|string" required>
<!-- data-form="title" data-validate="max:50" data-lang="タイトルが長すぎます。" -->
</div>
</div>
Bladeでは、バリデーションエラーなどで返ってきた時のold値の引継ぎを、フォームのvalueで指定します。BLOCSは、valueへのoldの指定を自動で行うので不要です。
BLOCSでは、値の引き継ぎのold指定が不要
BLOCSでは、入力フォームへのバリデーションとメッセージをテンプレートで指定します。バリデーションの指定方法は以下の３つです。バリデーションはdata-validateで指定します。詳しい説明はこちらで。
- HTML5のフォームバリデーション
- タグ記法
- コメント記法
上記の例では、HTML5のフォームバリデーションrequiredを指定して、必須入力チェックをかけています。BLOCSでは、フォームにrequiredと書くだけで、必須入力チェックをかけられます。bailやstringなどはタグ記法で、メッセージはコメント記法でdata-langを使って指定しています。
BLOCSでは、テンプレートでバリデーションとメッセージを指定する
バリデーション実行
テンプレートで指定するだけでは、入力フォームへのバリデーションはかかりません。指定したバリデーションとメッセージを、フォームリクエストやvalidateメソッドに渡してバリデーションを実行します。今回は、フォームリクエストでバリデーションを実行しました。
public function rules()
{
return \Blocs\Validate::rules('books.create');
}
public function messages()
{
return \Blocs\Validate::messages('books.create');
}
バリデーションの動作確認です。タイトルを51文字にするとエラーメッセージが表示されます。価格にもmin:0が指定されているので、エラーメッセージが表示されます。
本の新規登録処理storeは、Bladeと同じように開発しました。
本の編集
最後に、本の編集機能editを作りました。Bladeでは、編集画面の初期表示データを、このようにテンプレートでoldを使ってセットすることが多いかと思います。
public function edit(int $id)
{
$book = Book::findOrFail($id);
return view('books.edit', compact('book'));
}
<div class="row">
<div class="col-4">タイトル</div>
<div class="col-8">
<input type="text" name="title" value="{{ old('title', $book->title) }}" class="form-control">
</div>
</div>
BLOCSでは、コントローラーで初期表示データを連想配列にセットします。BLOCSは、valueへのoldの指定を自動で行い、テンプレートで指定しないからです。
public function edit(int $id)
{
$book = Book::findOrFail($id);
$val = compact('book');
if (empty(old())) {
$val = array_merge($val, $book->toArray());
$val['tags'] = join("\n", $book->tagLabels());
}
return view('books.edit', $val);
}
バリデーションは新規画面で指定しているので、編集画面では不要です。本の編集処理updateは、Bladeと同じように開発しました。
まとめ
今回は、本管理アプリの新規登録と編集機能を作りました。old値の自動引き継ぎやバリデーションの指定など、プログラマーの労力を減らせる工夫を色々と取り入れてBLOCSを開発しています。PHP初学者や、プログラムに苦手意識のある方に特にオススメです。次回は、登録した本を一覧表示する機能を作ります。