Laravel-AdminLTEの付属コンポーネントで楽にフォームを作ろうぜ

# はじめに
Laravel7.x ~ 8.x のLaravel-AdminLTEパッケージに入ってたコンポーネントが便利だったので書きます
# 目次
<!-- タイトルとアンカー名を編集 -->
1. [環境構築](#Chapter1)
1. [AdminLTEを適応](#Chapter2)
1. [書いてみよう](#Chapter3)
1. [他にもいっぱいあるよコンポーネント](#Chapter4)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# 環境構築
ポチポチとコマンドを打って環境を作ります。Laravel7~8であればどれでも大丈夫です

<pre>composer create-project --prefer-dist laravel/laravel sample "8.*"</pre>
Laravel-AdminLTEをインストール
<pre>cd sample
sample> composer require jeroennoten/laravel-adminlte
sample> php artisan adminlte:install</pre>
viewファイルをインストールします。`views/vendor`下にファイルが出来るのでここからカスタム出来る。
<pre>sample> php artisan adminlte:install --only=main_views</pre>

<a id="#Chapter2"></a>
# AdminLTEを適応
`resources/views/welcome.blade.php`をAdminLTEを適応させて書き換えます

```php:
@extends('adminlte::page')

@section('content')
Hello!
@stop
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/f4ff8cbc-39a3-5d5b-3c2c-82f16aedce14.png)
AdminLte3の画面になりました。

<a id="#Chapter3"></a>
# 書いてみよう
まず普通にテキストフォームを書きます

```php:
@extends('adminlte::page')

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="col-6 mx-auto">
                <div class="form-group col-6">
                    <label for="name">ラベル</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="name">
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/618abda9-0913-610f-4c07-219ebc6c7290.png)
次にLaravel-AdminLTE付属のbladeコンポーネントで書きます。

```php:
@extends('adminlte::page')

@section('content')
    <div class="card">
        <div class="card-body">
            <div class="col-6 mx-auto">
                <!-- 普通に書く -->
                <div class="form-group col-6">
                    <label for="name">ラベル</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="name">
                    </div>
                </div>

                <!-- Laravel-AdminLTEコンポーネントで書く -->
                <x-adminlte-input name="name2" label="ラベル" fgroup-class="col-6"/>
            </div>
        </div>
    </div>
@stop
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/b87320d4-3990-ba14-0387-d484729356f2.png)
全く同じフォームが出来ました。
コンポーネント生成しているソースを追ってみると
``sample\vendor\jeroennoten\laravel-adminlte\src\Components\Form\InputGroupComponent.php``
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/68d12d0b-f274-bfb0-dea7-4f689a77c1aa.png)
idにnameを入れてくれるのが分かります。
コンポーネントを見てみましょう
`resources/views/vendor/adminlte/components/form/input-group-component.blade.php`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/8b4ab7bb-79ed-58fd-4169-0122f4504dda.png)
labelにidを入れてくれてますね。このおかげでラベルをクリックするとちゃんと入力エリアにフォーカスされます。

この例だと6行のコードを1行に出来ている上に、labelのfor=""の部分とidが違ってたりする事も気にしなくていいのでめっちゃ効率良いですね！
<a id="#Chapter4"></a>
# 他にもいっぱいあるよコンポーネント
Laravel-AdminLTEのgithubにコンポーネントのwikiがあります。
https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Components-Categories
色々使えるコンポーネントが多いのでまずはコピペから試してみてください。
物によってはプラグインを入れる必要な場合もあります。