コンポーネント on ララジャパン

ブレードコンポーネント（３）チェックボックス

Mon, 26 Dec 2022 08:53:50 +0900

のHTMLタグにおける文字列の入力（type=“text,emailなど”）と違ってチェックボックス（type=“checkbox”）は、値をそのまま表示しません。オン・オフのチェックマークとしてUIで表示する必要あります。また、フォームの投稿の際には、チェックボックスがオフの状態つまりチェックされていない状態だと値もフォームのリクエストに入ってきません。今回は、チェックボックスのコンポーネントの作成の話です。

入力画面

以下のような画面でチェックボックスのコンポーネントx-checkboxを使います。

この画面のブレードはこんな感じです。

<x-layout>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card">
            <div class="card-header">登録</div>

            <div class="card-body">
              <x-form action="{{ route('checkbox') }}">

                <div class="row mb-3">
                  <x-label name="email">メールアドレス</x-label>
                  <div class="col-md-6">
                    <x-input type="email" name="email" required autocomplete="email"  />
                  </div>
                </div>

                <div class="row mb-3">
                  <x-label name="dummy"></x-label>
                  <div class="col-md-6">
                    <x-checkbox name="subscribe" value="Y">メルマガを購読する</x-checkbox>
                  </div>
                </div>

                <div class="row mb-0">
                  <div class="col-md-6 offset-md-4">
                    <x-button type="submit" class="m-2" level="primary">登録</x-button>
                  </div>
                </div>
              </x-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </x-layout>

フォームでバリデーションエラーが起こったとき

先の画面でバリデーションのエラーが起こった時は、以下のように、ユーザーが選択したチェックの状態を保つ必要あります。

そのためには、inputにおけるcheckedの属性の表示を、以下のようにold()と$valueの値で比較すればいいですね。

checkbox.blade.php

props([
    'name',
    'value',
    'checked' => 'false',
])
<div class="form-check">
  <input
      type="checkbox"
      id = "{{ $name }}"
      name="{{ $name }}"
      value="{{ $value }}"
      {{ old($name) == $value ? 'checked' : '' }}
      {{ $attributes->merge(['class' => 'form-check-input']) }}
  >
  <label class="form-check-label" for="{{ $name }}">{{ $slot }}</label>
</div>

投稿時のチェックがオンなら、値のYが返されるので、old(‘subscribe’) = ‘Y’となり、$valueの’Y’と同じで、checkedが属性となりエラー表示の画面ではチェックはオンになります。反対に、チェックがオフなら、何も値がないので、old(‘subscribe’) = nullとなり、checkedの属性は表示されなく、エラー表示の画面ではチェックはオフになります。

初期画面のデフォルト

さて、先の画面では、できればメルマガを受け取ってもらいたいので、チェックボックスをわざわざオンにしてもらうのではなく、最初からチェックをオンにして表示したいです。

デフォルトとしてチェックボックスをオンとするには、ブレードで以下のようにcheckedを指定します。

<x-checkbox name="subscribe" value="Y" :checked="true">メルマガを購読する</x-checkbox>

checkedはコンポーネントのプロパティなので、コンポーネントの属性としては、:checkedにphpの式を文字列で指定します。指定している"true"も文字列ではなくブーリアンのtrueとしてコンポーネントに渡されます。ちなみに、以下も同じ結果となります。

<x-checkbox name="subscribe" value="Y" :checked="1=1">メルマガを購読する</x-checkbox>

デフォルトをオフとしたいなら、最初のように:checkedを指定しません。コンポーネントにおいて、‘checked’ => falseとしているので、自動的にfalseとなります。もちろん、以下のように、“false"を渡してもOKです。

<x-checkbox name="subscribe" value="Y" :checked="false">メルマガを購読する</x-checkbox>

同様に、これが新規画面でなく編集画面なら、以下のようにDBからの値を使用し反映できます。

<x-checkbox name="subscribe" value="Y" :checked="$member->subscribe == 'Y'">メルマガを購読する</x-checkbox>

ブレードコンポーネント（２）配列の入力の対応

Sun, 18 Dec 2022 04:56:15 +0900

前回の例はメールアドレス１つの入力でしたが、今度はちょっと複雑にして複数のメールアドレスを入力する配列入力の話です。

入力画面

画面はこんな感じです。

そして、その画面のブレードはこんなです。前回で定義したx-inputのコンポーネントを使用しています。

<x-layout>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">登録</div>

          <div class="card-body">
            <x-form action="{{ route('register') }}">

            @for($i=1;$i <=3;$i++)
              <div class="row mb-3">
                <x-label name="email{{ $i }}">メールアドレス {{ $i }}</x-label>

                <div class="col-md-6">
                  <x-input id="email{{ $i }}" type="email" name="emails[{{ $i }}]" />
                </div>
              </div>
            @endfor

              <div class="row mb-0">
                <div class="col-md-6 offset-md-4">
                  <x-button type="submit" class="m-2" level="primary">登録</x-button>
                </div>
              </div>
            </x-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</x-layout>

前回と違って、name=“emails[1]"のように配列の文字列となっていることに注意を。

なにかがおかしい！

上の画面で以下のようにEメールでない値を入れて「登録」ボタンを押すと、

もちろん、画面ではエラーが表示されることを期待しますが、何もでてきません。しかも、入力した値は空になってしまいます。まさに、最初の空の入力画面と同じ状態です。

ちなみに、バリデーションのルールは以下です。

'emails'   => ['required', 'array'],
'emails.*' => ['string', 'email', 'max:255'],

何がおかしいのでしょう？

ここで、前回のx-inputのコンポーネントをここで再度掲載します。

input.blade.php

@props([
    'type'  => 'text',
    'name',
    'value' => null,
])
 
<input
  type="{{ $type }}"
  name="{{ $name }}"
  value="{{ old($name, $value) }}"
 
  @error($name)
    {{ $attributes->class('form-control is-invalid') }}
  @else
    {{ $attributes->class('form-control') }}
  @enderror
/>
 
@error($name)
  <span class="invalid-feedback" role="alert">
      <strong>{{ $message }}</strong>
  </span>
@enderror

調査すると、問題はコンポーネントにおける、old($name, $value)と@error($name)に渡している$nameの値です。

配列なので、この$nameには、emails[1]、emails[2]、emails[3]の文字列が入ってきます。しかし、old()はこれらの文字列を理解しません。@errorに関しては、debugbarでセッションを見ると、以下のように、emails[1]ではなく、emails.1という文字列になっています。

対応

ということは、old()や@error()に渡す指標が配列の文字列なら、ドットの文字列に変換すればよいですね。以下は、改良したコンポーネントです。

@props([
    'type'  => 'text',
    'name',
    'value' => null,
])
@php
  $index = str_replace(['.', '[]', '[', ']'], ['_', '', '.', ''], $name); // 'emails[1]'が'emails.1'となる
@endphp
<input
  type="{{ $type }}"
  name="{{ $name }}"
  value="{{ old($index, $value) }}"

  @error($index)
    {{ $attributes->class('form-control is-invalid') }}
  @else
    {{ $attributes->class('form-control') }}
  @enderror
/>

@error($index)
  <span class="invalid-feedback" role="alert">
      <strong>{{ $message }}</strong>
  </span>
@enderror

これで再度「登録」ボタンを押すと、期待通りにエラーが表示されます。

ブレードコンポーネント

Sun, 11 Dec 2022 12:05:35 +0900

今回は、VueJSのコンポーネントの話ではありません。Inertiaの話でもありません。Laravelのブレードコンポーネントの話です。使い始めると結構いいものです。

デモ

こんな入力画面あるとします。

もともとのブレードは、こんな感じです。

...
<div class="card-body">
    <form method="POST" action="{{ route('register') }}">
        @csrf

        <div class="row mb-3">
            <label for="email" class="col-md-4 col-form-label text-md-end">メールアドレス</label>

            <div class="col-md-6">
                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
       </div>

       <div class="row mb-0">
            <div class="col-md-6 offset-md-4">
                <button type="submit" class="btn btn-primary">
                    登録
                </button>
            </div>
        </div>
    </form>
</div>
...

今度は、コンポーネントを使用した、ブレードファイルの中身を見てみましょう。

...
<div class="card-body">
    <x-form action="{{ route('register') }}">

        <div class="row mb-3">
            <x-label name="email">メールアドレス</x-label>

            <div class="col-md-6">
                <x-input type="email" name="email" required autocomplete="email"  />
            </div>
        </div>

        <div class="row mb-0">
            <div class="col-md-6 offset-md-4">
                <x-button type="submit" level="primary">登録</x-button>
            </div>
        </div>
    </x-form>
</div>
...

見た目、とてもシンプルになりました。しかし、見慣れないHTMLタグがx-form, x-label, x-input, x-buttonと４つありますね。もちろんそれらがコンポーネントなのですが、どうやってそれらのタグが利用できるようになるのでしょうか？　

コンポーネントの作成

コンポーネントの作成には、２つ方法があり、app/View/Componentsのディレクトリ下にクラスファイルを作成する方法と、resources/views/componentsに匿名コンポーネントを作成する方法があります。ここでは使いやすい後者を紹介します。

先のデモの４つのコンポーネントは、以下のようなファイルに定義されています。

resources/views/components
├── button.blade.php
├── form.blade.php
├── input.blade.php
└── label.blade.php

button.blade.phpというコンポーネントブレードファイルを作成すれば、それだけで、他のブレードファイルで、のタグとして使用可能になります。

コンポーネントの定義

まずは、一番外側のx-formの定義です。

form.blade.php

@props([
    'method' => 'POST',
    'action',
])

@php
  $method = Str::upper($method);
@endphp

<form
  method="{{ $method ===  'GET' ? 'GET' : 'POST' }}"
  action="{{ $action }}"
  {{ $attributes }}>
  @csrf

  @if (! in_array($method, ['GET', 'POST']))
    @method($method)
  @endif

  {{ $slot }}

</form>

御覧のように、通常のブレードファイルと同じように、@ifや@phpが使えます。しかし、@propsは見たことありませんね。

@propsでは、コンポーネントを使用するブレードから、コンポーネントにデータを渡すための変数の宣言と初期化をします。

ここでは、methodとactionの変数がありますが

<x-form action="{{ route('register') }}">

では、actionにしかデータを渡していません。しかし、@propsにおいてmethodのデフォルトはPOSTと指定されているので、実際に出力されるHTMLは、以下のように初期化されます。

<form method="POST" action="http://localhost/register">
<input type="hidden" name="_token" value="8GdTncryczY6s2gkHCMFYJyRlvab2tkLbVp9iRUE">
..
</form>

もう１つ重要なのは、{{ $slot }}です。そこの部分には、とのタグの間の値がすべて渡されます。

x-labelでも同様に{{ $slot }}を使います。

label.blade.php

@props([
    'name',
])

<label for="{{ $name }}" class="col-md-4 col-form-label text-md-end">{{ $slot }}</label>

x-buttonも同様です。

button.blade.php

@props([
    'type'  => 'button',
    'level' => 'default',
])

<button type="{{ $type }}" {{ $attributes->class("btn btn-$level")}}>{{ $slot }}</button>

@attributes->classは、既存のclassの属性に引数のclassをマージします。例えば、

<x-button type="submit" class="m-2" level="primary">登録</x-button>

なら、

<button type="submit" class="btn btn-primary m-2">登録</button>

となります。

最後に、x-inputの定義です。

input.blade.php

@props([
    'type'  => 'text',
    'name',
    'value' => null,
])

<input
  type="{{ $type }}"
  name="{{ $name }}"
  value="{{ old($name, $value) }}"

  @error($name)
    {{ $attributes->class('form-control is-invalid') }}
  @else
    {{ $attributes->class('form-control') }}
  @enderror
/>

@error($name)
  <span class="invalid-feedback" role="alert">
      <strong>{{ $message }}</strong>
  </span>
@enderror

以下のようにコンポーネントで定義していない属性（requiredやautocomplete）も渡していますが、

<x-input type="email" name="email" required autocomplete="email"  />

これらは、そのまま最終のHTMLに渡されます。

<input type="email" name="email" value="" class="form-control" required autocomplete="email">