ブレード on ララジャパン

【Policy】Gate::inspect()で不認可の理由を取得する

Wed, 13 Mar 2024 11:21:52 +0900

前回の記事でPolicyを使った認可チェックの実装方法について紹介しました。その中でGateファサードのメソッドを使うことで色々応用が効く点に触れました。今回はその辺を少し掘り下げてどんなケースで応用が効くのか紹介したいと思います。

不認可の理由を表示したい

時としてユーザの操作が制限されている（つまり特定のアクションが不認可である）場合にその理由を表示したいケースがあります。例えば以下の様な商品一覧ページがあったとして、何かしらの理由で商品が購入不可の場合に購入ボタンを無効とし、その理由を赤字で表示したい場合など。もちろん、このケースでもPolicyが適用できます。

こちらのページのPolicyの実装は以下のようになります。認可がdenyされるケースが複数あり、それぞれ異なるメッセージが返されます。

app/Policies/ProductPolicy.php

namespace App\Policies;

use App\Models\User;
use App\Models\Product;
use Illuminate\Auth\Access\Response;

class ProductPolicy
{
    public function available(?User $user, Product $product): Response
    {
        $err = match (true) {
            ($product->vip_only === 'Y' && $user?->vip_flag !== 'Y') => 'VIPのみ購入可能な商品です',
            $user?->balance < $product->price => '残高が不足しています',
            default => '',
        };

        return empty($err)
            ? Response::allow()
            : Response::deny($err);
    }
}

さて、これらのメッセージを先の画面のように表示するにはどうすればよいでしょうか？

前回の記事において、Policyを使った判別処理の実装方法をblade側、controller側、middleware側に分けて紹介しました。それらの中でcontroller側のauthorize()やmiddleware側のcan()ではdenyの時にResponse::deny()に指定したエラー文言を表示する事ができます。しかし、403ページへ強制的にリダイレクトされてからの表示です。403ページへのリダイレクト無しにエラー文言だけ取得して表示に利用することができないでしょうか？

Gate::inspect()を使ってエラー表示

Gate::inspect()を使うとPolicyを介して認可チェックを行った際に返されるレスポンスを取得する事ができます。そちらからResponse::deny()に指定したエラー文言を以下のように取得する事ができます。

> $response = Gate::inspect('available', Product::first())
= Illuminate\Auth\Access\Response {#6114}

// allowか判別
> $response->allowed()
= false

// denyか判別
> $response->denied()
= true

// denyのメッセージ取得
> $response->message();
= "残高が不足しています"

// Response自体を文字列にキャストしてもメッセージが取得できる
> (string) $response
= "残高が不足しています"

ということで、以下のようにbladeにGate::inspect()を埋め込むと、PolicyがResponse::deny()を返した場合に冒頭の商品ページのエラー表示とすることができます。（購入ボタンの部分のみ抜粋しています）

resources/views/product_index.blade.php

...
<div class="mt-2">
    @can('available', $product)
        <button class="button is-small is-success">
            購入する
        </button>
    @else
        <button class="button is-small is-success" disabled>
            購入する
        </button>
        <p class="has-text-weight-bold has-text-danger">{{ Gate::inspect('available', $product)->message() }}</p>
    @endcan
</div>
...

@reason

先のようなエラー表示のケースは良く使われそうですがパッと見て何を表示しているのか分かりづらいと思いませんか？そんな時こんな記事を見つけました。@reasonというディレクティブを追加するというものです。AppServiceProviderのboot()に以下を追加してみましょう。

app/Providers/AppServiceProvider.php

...
    public function boot(): void
    {
        // @reason を追加
        Blade::directive('reason', function ($expression) {
            return "<?php echo Gate::inspect($expression)->message() ?>";
        });
    }
...

すると先ほどのblade側でGate::inspect()をcallしていた部分を次のように書き換えられます。

resources/views/product_index.blade.php

...
<div class="mt-2">
    @can('available', $product)
        <button class="button is-small is-success">
            購入する
        </button>
    @else
        <button class="button is-small is-success" disabled>
            購入する
        </button>
        <p class="has-text-weight-bold has-text-danger">@reason('available', $product)</p>
    @endcan
</div>
...

より分かりやすくなりましたね。

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

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">

Laravelのブレードでの {{ }} と {!! !!} の違い

Wed, 24 Nov 2021 07:19:05 +0900

ブレードで変数の値を表示するのによく使う括弧。{{ }} と {!! !!}２種類あります。これらに関しての話です。

{{ }} と {!! !!}の違い

{{ }} と {!! !!}の違いは、いたって簡単です。前者はhtmlをエスケープして、後者はエスケープしません。と言っても？？なので、具体的に以下のようなブレードを作成して、違いを見てみましょう。

resources/views/test.blade.php

{{ $x }}
{!! $x !!}

tinkerでこの$xに値を入れてブレードをビューすると、以下のようなHTML文が出力されます。

>>> view('test')->with(['x' => '<h1>hello</h1>'])->render();
=> """
   &lt;h1&gt;hello&lt;/h1&gt;\n
   <h1>hello</h1>\n
   """

前者の表示は、HTMLのタグが見事にエスケープされていますが、後者はHTMLのタグがそのまま残っています。ブラウザでこれらを閲覧すると、

と表示の違いがはっきりします。

PHPにコンパイルされたブレード

先の例で使用したtest.blade.phpは、サーバーから表示される前にphpにコンパイルされてstorage/framework/viewsにキャッシュされます。コンパイルされたブレードの中身を見ると、

storage/framework/views/4ad4f1be91eef212ba8e4b67c67ee18a0f640a9a.php

<?php echo e($x); ?>

<?php echo $x; ?>

<?php /**PATH /var/www/repos/l8x/resources/views/test.blade.php ENDPATH**/ ?>

お馴染みのphpファイルです（ブレードはphpファイル拡張子ですがphpファイルではありません）。なるほど単に標準のPHP関数のecho()を使用しています。しかし、前者において、e()という関数は標準のPHP関数ではありません。調べてみると、これはLaravelのヘルパーです。以下にその定義を掲載します。

vendor/laravel/framework/src/Illuminate/Support/helpers.php

...
   /**
     * Encode HTML special characters in a string.
     *
     * @param  \Illuminate\Contracts\Support\DeferringDisplayableValue|\Illuminate\Contracts\Support\Htmlable|string|null  $value
     * @param  bool  $doubleEncode
     * @return string
     */
    function e($value, $doubleEncode = true)
    {
        if ($value instanceof DeferringDisplayableValue) {
            $value = $value->resolveDisplayableValue();
        }

        if ($value instanceof Htmlable) {
            return $value->toHtml();
        }

        return htmlspecialchars($value ?? '', ENT_QUOTES, 'UTF-8', $doubleEncode);
    }
...

標準関数のhtmlspecialchars()が最終的にはHTMLタグをエスケープしていることわかります。

HtmlString

さて、ブレードで使用されている括弧の意味が解ったところで、先のtest.blade.phpを以下のように編集します。csrf_field()は、LaravelのCSRFトークンのためのヘルパー関数です。

resources/views/test.blade.php

{{ csrf_field() }}

これをtinkerで先と同様にレンダリングします。今回は変数の渡しなしです。

>>> view('test')->render()
=> "<input type="hidden" name="_token" value="">\n"

おかしいですね。二重波括弧なのに、HTMLタグがエスケープされていません。どうしてでしょう？

csrf_field()の定義を見てみましょう。

vendor/laravel/framework/src/Illuminate/Support/helpers.php

...
    /**
     * Generate a CSRF token form field.
     *
     * @return \Illuminate\Support\HtmlString
     */
    function csrf_field()
    {
        return new HtmlString('<input type="hidden" name="_token" value="'.csrf_token().'">');
    }
...

この関数が返しているのは、文字列ではなくHtmlStringのオブジェクトです。このオブジェクトがブレードでの括弧の変数の値とすると、エスケープ処理がされないのです。tinkerで試してみましょう。

>>> use Illuminate\Support\HtmlString;
>>> $x = new HtmlString('<h1>hello</h1>');
=> Illuminate\Support\HtmlString {#3517
     html: "<h1>hello</h1>",
   }
>>> e($x)
=> "<h1>hello</h1>"

HtmlStringを使う意味

表示される値にHTMLタグが含まれるかどうか前もってわかっていれば、{{ }} と {!! !!}の使いわけできますが、たいていはブレードを作成するのは開発者ではなくデザイナーさんです。HTML文を含むときに文字列ではなく、HtmlStringのオブジェクトとすれば、迷わずにいつも{{ }}の使用となります。

npmからパッケージを追加

Sun, 10 Nov 2019 04:38:19 +0900

laravel-mixでフロントエンドを開発で、Laravelのプロジェクトにおいてのフロントエンドの開発の流れを説明しました。今回は、その続きとしてnpmから新規のパッケージをプロジェクトに追加する過程を説明します。

訂正（7/17/2022）

最近、読者からの以下のコードの間違いの指摘をいただきましたので修正しました。読んでいただいて、しかも間違いを指摘をしてくれる。大変光栄です。kazooさんありがとう。

resources/js/bootstrap.js

...
require('jquery-ui/ui/widgets/dialog.js'); // dialog.jsでなくdatepicker.jsが正しい！

上のコードにおいての、dialog.jsはdatepicker.jsであるべきです。

以降の文中のコードで修正されています。投稿時のL5.8でなく現在の私のL8.xの環境で確認しました。

jquery-uiのパッケージを検索

例として、jquery-uiのdate pickerを使います。会員登録フォームにおいて以下のように誕生日の日付の入力をカレンダーの選択としたいからです。

まず、パッケージとして登録されているかどうか、https://www.npmjs.comのサイトへ行き検索します。画面の検索窓に、jquery-uiと入れます。

検索結果として、774ありますが完全マッチ（exact match）は１つです。オリジナルのパッケージであることを確認してそれを使用します。

次にコマンドラインで、このパッケージをLaravelのプロジェクトにインストールします。

$ npm install jquery-ui --save-dev

これを実行すると、package.jsonが更新されて、以下のようにjquery-uiの行が追加されます。

{
...
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "jquery-ui": "^1.12.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

–save-devの引数を指定したので、上のようにdevのセクションに追加されます。フロントエンドの開発なので開発時にしかパッケージは使用しないためです。

また、node_modulesのディレクトリにjquery-uiのソースがダウンロードされていることは、以下のコマンドの実行で確認できます。

$ npm list --depth=0
├── axios@0.18.1
├── bootstrap@4.3.1
├── cross-env@5.2.1
├── jquery@3.4.1
├── jquery-ui@1.12.1
├── laravel-mix@4.1.4
├── lodash@4.17.15
├── popper.js@1.15.0
├── resolve-url-loader@2.3.2
├── sass@1.22.12
├── sass-loader@7.3.1
├── vue@2.6.10
└── vue-template-compiler@2.6.10

bootstrap.jsの編集

次に、bootstrap.jsに以下の行を追加して、このパッケージをロードします。

resources/js/bootstrap.js

...
require('jquery-ui/ui/widgets/datepicker.js');

jquery-uiにはいろいろなウィジットがあるので、他も指定したい場合は以下のように指定します。

...
require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/widgets/dialog.js');
require('jquery-ui/ui/widgets/sortable.js');
require('jquery-ui/ui/widgets/tooltip.js');

app.scssの編集

jquery-uiにはcssの設定も必要です。app.scssを編集します。

resources/sass/app.scss

// Fonts                                                                                                                                                                                                           
@import url('https://fonts.googleapis.com/css?family=Nunito');                                                                                                                                                     
                                                                                                                                                                                                                   
// Variables                                                                                                                                                                                                       
@import 'variables';                                                                                                                                                                                               
                                                                                                                                                                                                                   
// Bootstrap                                                                                                                                                                                                       
@import '~bootstrap/scss/bootstrap';                                                                                                                                                                               
                                                                                                                                                                                                                   
// jquery -ui                                                                                                                                                                                                      
@import '~jquery-ui/themes/base/all.css';

bladeの編集

今度はテンプレートの変更です。ここでは、Laravelのプロジェクトについてくる会員登録ページにお誕生日の項目を追加します。

resources/views/auth/register.blade.php

...
                        <div class="form-group row">                                                                                                                                                               
                            <label for="birthdate" class="col-md-4 col-form-label text-md-right">お誕生日</label>                                                                                                  
                                                                                                                                                                                                                   
                            <div class="col-md-6">                                                                                                                                                                 
                                <input id="birthdate" type="text" class="form-control datepicker @error('birthdate') is-invalid @enderror" name="birthdate" value="{{ old('birthdate') }}" required autocomplete="\
birthdate">                                                                                                                                                                                                        
                                                                                                                                                                                                                   
                                @error('birthdate')                                                                                                                                                                
                                    <span class="invalid-feedback" role="alert">                                                                                                                                   
                                        <strong>{{ $message }}</strong>                                                                                                                                            
                                    </span>                                                                                                                                                                        
                                @enderror                                                                                                                                                                          
                            </div>                                                                                                                                                                                 
                        </div>                                                                                                                                                                                     
                                                                                                                                                                                                                   
                        <div class="form-group row mb-0">                                                                                                                                                          
                            <div class="col-md-6 offset-md-4">                                                                                                                                                     
                                <button type="submit" class="btn btn-primary">                                                                                                                                     
                                    {{ __('Register') }}                                                                                                                                                           
                                </button>                                                                                                                                                                          
                            </div>                                                                                                                                                                                 
                        </div>                                                                                                                                                                                     
                    </form>               
...

class=“form-control datepickerの部分に注意してください。

app.jsの編集

ブレードで使用したクラス名、datepickerとjquery-uiのdatepickerを繋げるために、以下の定義をapp.jsに加えます。

resources/js/app.js

require('./bootstrap');   
...
$(".datepicker").datepicker({                                                                                                                                                                                      
    dateFormat: 'yy-mm-dd'                                                                                                                                                                                         
});

コンパイル

いろいろなソースファイルの編集を完了して、以下でコンパイルして、all.jsとall.cssを作成します。

$ npm run dev

プロダクションには、

$ npm run prod

これで完了ですが、最後にカレンダーを日本語にしてみましょう。そのためには、bootstrap.jsにおいて、以下のように日本語版のカレンダーに代えます。

resources/js/bootstrap.js

...
//require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/i18n/datepicker-ja.js');

これでコンパイルすると以下のような画面となります。

誕生日の項目なので年も選択できるようにしました。そのためには、app.jsでの定義は以下のようになります。

resources/js/app.js

...
$(".datepicker").datepicker({                                                                                                                                                                                      
    dateFormat: 'yy-mm-dd',
    changeMonth: true,                                                                                                                                                                                             
    changeYear: true,                                                                                                                                                                                              
    yearRange: '1901:'                                                                                                                                                                                     
});