NO. 220

TECH BLOG

じげんのテック

Formファサード忘備録

#じげんのエンジニア

自己紹介

比較サービスを展開する、株式会社じげんのパートナーソリューションDiv.（以降PS
Div.）エンジニアの下山です。ここのところ業務ではコードレビューをする時くらいしかコードに触れる機会がないため、コードを書く業務を虎視眈々と狙っております。

PS Div.では、バックエンドでRuby（フレームワーク：Ruby on Rails）、PHP（フレームワーク： Laravel）のそれぞれを採用しているプロダクトがあります。

最近、Laravelのプロダクトでフォーム関連のコードレビューをしました。そのプロダクトではFormファサードを利用しているのですが、正直ファサードの内容はほとんど覚えておらず調べました。（Larvelのデフォルトの機能だと思っていたレベル）

「そういえば、過去に実装した時やコードレビューした時も都度調べていたなぁ（特に引数について）」と思ったので、今回は備忘録としてまとめておこうかと思います。

Formファサード導入

Formファサードは、 Laravel CollectiveのForms & HTML パッケージを composer でインストールすることで利用でき、HTMLフォームを作成する際に使います。
Forms & HTML パッケージをインストールするには、コンソールにて下記コマンドを実行します。

// コマンド
$ composer require laravelcollective/html

これだけです。

環境

PHP 8.1.12
Laravel 9.37.0
laravelcollective/html 6.3.0

ルーティングは、例として下記を使用します

Route::resource('company', 'CompanyController::class');

各メソッド紹介

formの開始要素 Form::open()

https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L135-L172
formの開始要素の設置方法です。

{{ Form::open(['url' => 'company/index']) }}

// 出力
<form method="POST" action="http://localhost/company/index" accept-charset="UTF-8">

method属はデフォルトは POST ですが、GETメソッドの指定も可能です。

{{ Form::open(['url' => 'company/index', 'method' => 'GET']) }}

// 出力
<form method="GET" action="http://localhost/company" accept-charset="UTF-8">

名前付きルート、コントローラアクションでの指定

action属性は名前付きルート、もしくはコントローラアクションでも指定が可能です。

// 名前付きルート
{{ Form::open(['route' => 'company.index']) }}

// コントローラアクション
{{ Form::open(['action' => 'CompanyController@index']) }}

名前付きルート、コントローラアクションで指定した場合、ルートパラメータを渡すことも可能です。

// 名前付きルート
{{ Form::open(['route' => [company.index', 'id' => $company->id], 'method' => 'GET']) }}

// コントローラアクション
{{ Form::open(['action' => ['CompanyController@index', 'id' => $company->id], 'method' => 'GET']) }}

// 出力
<form method="GET" action="http://localhost/company?id=1" accept-charset="UTF-8">

ファイルアップロードを許可

ファイルアップロードを許可したい場合は filesオプションを指定してください。

{{ Form::open(['url' => 'companies/index', 'files' => true]) }}

// 出力
<form method="POST" action="http://localhost/companies/index" accept-charset="UTF-8" enctype="multipart/form-data">

CSRF対策用のトークン

Form::open() にて開始要素を設置しmethod属性がPOST、PUT、DELETEの場合は、CSRF対策用のトークンをhiddenで設置してくれます。
もし、CSRF対策用のトークンのみを設置したい場合は、

{{ Form::token() }}
https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L230-L235

// bladeなら
@csrf

// 出力
<input name="_token" type="hidden" value="文字列">

で設置が可能です。

formの終了要素 Form::close()

formの終了要素の設置方法です。
基本的には Form::open() とセットで使用します。
https://github.com/LaravelCollective/html/blob/6.x/src/FormBuilder.php#L216-L223

Form::close()

// 出力
</form>

label要素 Form::label()

label要素の設置方法です。
https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L247-L260

Form::label('company_id_1', ' 会社1 ', ['class' => 'color_black'])

第1引数：for属性を設定
第2引数：で括られる文言（第2引数を指定しない場合は、第1引数の値が使われます）
第3引数：idやclassなど、for以外の属性を設定（配列で渡す）
第4引数：第2引数の値をHTMLエンティティに変換するかどうかをbooleanで指定（デフォルトはtrue）

// 出力
<label for="company_id_1" class="color_black">&#039;会社1&#039;</label>

// 第4引数をfalseにした場合の出力
<label for="company_id_1" class="color_black"> 会社1 </label>

input要素 Form::input()

input要素の設置方法です。
https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L285-L310

{{ Form::input('text', 'company_name', 1, ['class' => 'color_black']) }}

第1引数：type属性を設定
第2引数：name属性を設定
第3引数：value属性を設定
第4引数：type属性、name属性、value属性以外の属性を設定（配列で渡す）

// 出力
<input class="color_black" name="company_name" type="text" value="1">

また、type属性ごとにメソッドが用意されています。
内部処理としては、メソッド名をinputメソッドの第1引数にセットして呼び出しております。

例）
public function text($name, $value = null, $options = [])
{
        return $this->input('text', $name, $value, $options);
}

そのため、inputメソッドの第2、3、4引数をセットして渡せばよいです。
（後述しますが、一部例外はあります。）

Form::text()

https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L321-L324

{{ Form::text('company_name', 1, ['class' => 'color_black']) }}

第1引数：name属性を設定
第2引数：value属性を設定
第3引数：type属性、name属性、value属性以外の属性を設定（配列で渡す）

// 出力
<input class="color_black" name="company_name" type="text" value="1">

Form::range()

https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L348-L351

{{ Form::range('staff_count', 5, ['min' => '1', 'max' => '10']) }}

// 出力
<input min="1" max="10" name="staff_count" type="range" value="5">

Form::hidden()

https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L362-L365

{{ Form::hidden('company_id', 1, ['class' => 'color_black']) }}

// 出力
<input class="color_black" name="company_id" type="hidden" value="1">

Form::email()

https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L390-L393

{{ Form::email('company_email', null, ['placeholder' => 'abc@example.com']) }}

// 出力
<input placeholder="abc@example.com" name="company_email" type="email">

Form::tel()

https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L404-L407

{{ Form::tel('company_tel', null, ['placeholder' => '03-1234-5678']) }}

// 出力
<input placeholder="03-1234-5678" name="company_tel" type="tel">

Form::number()

https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L418-L421

{{ Form::number('company_number', null, ['placeholder' => '123']) }}

// 出力
<input placeholder="123" name="number" type="number">

Form::date()

https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L432-L439

{{ Form::date('open_date', null, ['min' => '2022-01-01', 'max' => '2022-12-31']) }}

// 出力
<input min="2022-01-01" max="2022-12-31" name="open_date" type="date">

Form::checkbox()

https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L849-L852

{{ Form::checkbox('company_check', 1, true, ['class' => 'color_black']) }}

第1引数：name属性を設定
第2引数：value属性を設定
第3引数：checked属性を設定
第4引数：name属性、value属性、checked属性以外の属性を設定（配列で渡す）

// 出力
<input class="color_black" checked="checked" name="company_check" type="checkbox" value="1">type="date">

Form::radio()

https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L864-L871

{{ Form::radio('company_radio', 1, true, ['class' => 'color_black']) }}

第1引数：name属性を設定
第2引数：value属性を設定
第3引数：checked属性を設定
第4引数：name属性、value属性、checked属性以外の属性を設定（配列で渡す）

// 出力
<input class="color_black" checked="checked" name="company_radio" type="radio" value="1">

他にもまだありますのでぜひ調べてみてください。

textarea要素 Form::textarea()

textarea要素の設置方法です。
https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L549-L574

{{ Form::textarea('company_text', null, ['class' => 'color_black', 'placeholder' => 'テキストテキストテキスト']) }}

第1引数：name属性を設定
第2引数：value属性を設定
第3引数：name属性、value属性以外の属性を設定（配列で渡す）

// 出力
<textarea class="color_black" placeholder="テキストテキストテキスト" name="company_text" cols="50" rows="10"></textarea>
</code></pre>

button要素 Form::button()

button要素の設置方法です。
https://github.com/LaravelCollective/html/blob/78c3cb516ac9e6d3d76cad9191f81d217302dea6/src/FormBuilder.php#L1081-L1088

{{ Form::button('送信ボタン', ['class' => 'color_black']) }}

第1引数：で括られる文言
第2引数：属性を設定（配列で渡す）

// 出力
<button class="color_black" type="button">送信ボタン</button>