JavaScript on ララジャパン

Viteとバニラjs – Tom Select ドロップダウン

Wed, 20 Aug 2025 08:02:46 +0900

前回のselect2のドロップダウンはjquery依存であったけれど、似たような機能のTom Selectはバニラjsでjqueryの依存がまったくないパッケージです。早速viteでビルドします。

Tom Selectで選択

Tom Selectは、select2と同様にドロップダウンにおいて選択値の検索が可能です。

しかし、select2と比べるとわかりますが、検索窓のための行が追加されるのではなくドロップダウンの最初の行が検索窓となります。そこでBackキーを押すと行が以下のように空になり検索値をタイプできます。

ブレードは以下のようになります。

...
                      <div class="row mb-3">
                            <label for="prefecture-multiple" class="col-md-4 col-form-label text-md-end">都道府県(複数選択)</label>
 
                            <div class="col-md-6">
                                <select id="prefecture-multiple" placeholder="都道府県を選択してください" class="form-select @error('prefecture') is-invalid @enderror" name="prefectures[]" required multiple>
                                    @foreach($prefectures as $prefecture)
                                        <option value="{{ $prefecture }}" {{ in_array($prefecture, old('prefectures', [])) ? 'selected' : '' }}>{{ $prefecture }}</option>
                                    @endforeach
                                </select>
 
                                @error('prefectures')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
...
@section('scripts')
<script type="module">
   document.addEventListener('DOMContentLoaded', function() {
        new TomSelect(document.getElementById('prefecture'));
   })
</script>
@endsection

select2のように検索窓を次の行に出すこともTomSelectに渡すオプションで変えることができます。

コードは以下となります。

<script type="module">
   document.addEventListener('DOMContentLoaded', function() {
        new TomSelect(document.getElementById('prefecture'), {
            plugins: ['dropdown_input'], // 検索窓の位置を変える
        });
   })
</script>

他のオプションとしては、空行の選択を許す、 allowEmptyOption: true 全選択値を含む、 maxOptions: null （これがないと、最初50個しか選択値に含まれないので注意を）などがあります。

オプションに関してのドキュメントは以下となります。 https://tom-select.js.org/docs/

Tom Selectで複数を選択

もちろん、select2と同様に複数のアイテムの選択も可能です。

ブレードは、以下のようになります。

...
                      <div class="row mb-3">
                            <label for="prefecture-multiple" class="col-md-4 col-form-label text-md-end">都道府県(複数選択)</label>
 
                            <div class="col-md-6">
                                <select id="prefecture-multiple" placeholder="都道府県を選択してください" class="form-select @error('prefecture') is-invalid @enderror" name="prefectures[]" required multiple>
                                    @foreach($prefectures as $prefecture)
                                        <option value="{{ $prefecture }}" {{ in_array($prefecture, old('prefectures', [])) ? 'selected' : '' }}>{{ $prefecture }}</option>
                                    @endforeach
                                </select>
 
                                @error('prefectures')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
...
@section('scripts')
<script type="module">
    document.addEventListener('DOMContentLoaded', function() {
        new TomSelect(document.getElementById('prefecture-multiple'), {
          maxOptions: null // 選択値制限なし
        ));
   })
</script>
@endsection

Tom Selectをviteでビルド

viteを使ってTom Selectのビルドを作成してみましょう。まず、Tom Selectのパッケージを以下でローカル環境にインストールします。

$ npm install tom-select --save-dev

そして、bootstrap.jsにおいてそれらをインポートします。

resources/js/bootstrap.js

import 'bootstrap';

import TomSelect from 'tom-select';
window.TomSelect = TomSelect;

// bootstrap5のcssをインポート
import '/node_modules/tom-select/dist/css/tom-select.bootstrap5.min.css';

viteの設定は以下となります。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

最後に

$ npm run build

とビルドします。

Viteとselect2 ドロップダウン

Sat, 02 Aug 2025 06:51:28 +0900

昔のjQuery時代においてjquery-uiとともに有名となったのはselect2のウィジットです。オプションがたくさんあるドロップダウンでの選択や複数の値を選択を必要とされるときに非常に便利なもので、今でもその優れたUIは貴重です。今回はこれをviteでビルドします。

select2で選択

通常のドロップダウンは、以下のようにドロップダウンされた選択リストからクリックして選択です。

しかし、このオプションがたくさんあると探すのが大変。しかし、select2を使うと選択値の検索が可能となります。検索入力箱が表示され、赤箱の部分のように検索値を入れると、以下のようにフィルターされた結果から選択が可能となります。

通常のドロップダウンをselect2のドロップダウンにするのはとても簡単です。すでにwebpackなどでjqueryやselect2のライブラリがviteなどを利用してバンドルされていると仮定して、以下のようなブレードを作成します。

@php
    $prefectures = [
        '北海道', '青森県', '岩手県', '宮城県', '秋田県', '山形県', '福島県',
        '茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県',
        '新潟県', '富山県', '石川県', '福井県', '山梨県', '長野県',
        '岐阜県', '静岡県', '愛知県', '三重県',
        '滋賀県', '京都府', '大阪府', '兵庫県', '奈良県', '和歌山県',
        '鳥取県', '島根県', '岡山県', '広島県', '山口県',
        '徳島県', '香川県', '愛媛県', '高知県',
        '福岡県', '佐賀県', '長崎県', '熊本県', '大分県',
        '宮崎県', '鹿児島県', '沖縄県'
    ];
@endphp
@section('content')
<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">
                    <form method="POST" action="{{ route('register') }}">
                        @csrf
...
                        <div class="row mb-3">
                            <label for="prefecture" class="col-md-4 col-form-label text-md-end">都道府県</label>

                            <div class="col-md-6">
                                <select id="prefecture" class="form-select @error('prefecture') is-invalid @enderror" name="prefecture" required>
                                    @foreach($prefectures as $prefecture)
                                        <option value="{{ $prefecture }}" {{ old('prefecture') == $prefecture ? 'selected' : '' }}>{{ $prefecture }}</option>
                                    @endforeach
                                </select>

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

@endsection

@section('scripts')
<script type="module">
    $(document).ready(function() {
        $('#prefecture').select2({
            theme: 'bootstrap-5',
        });
    });
</script>
@endsection

prefectureのDOMのノードにselect2のメソッドを装着するだけです。

select2で複数を選択

ドロップダウンで複数の選択が必要なときにselect2を使用すると、まず、何も選択されていないときは通常のドロップダウンのように表示されます。

そこで「北海道」を選択すると、以下のようにピルの形状で選択値が表示されます。そのピルの先頭にあるXをクリックして削除も可能です。

次に、検索してフィルターされた結果から検索して選択します。

選択後は以下のように複数の選択値がピルの形状で並びます。

こちらのブレードは、以下のようになります。

...
                      <div class="row mb-3">
                            <label for="prefecture-multiple" class="col-md-4 col-form-label text-md-end">都道府県(複数選択)</label>

                            <div class="col-md-6">
                                <select id="prefecture-multiple" class="form-select @error('prefecture') is-invalid @enderror" name="prefectures[]" required multiple>
                                    @foreach($prefectures as $prefecture)
                                        <option value="{{ $prefecture }}" {{ in_array($prefecture, old('prefectures', [])) ? 'selected' : '' }}>{{ $prefecture }}</option>
                                    @endforeach
                                </select>

                                @error('prefectures')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
...
@section('scripts')
<script type="module">
    $(document).ready(function() {
        $('#prefecture-multiple').select2({
            theme: 'bootstrap-5',
            placeholder: '都道府県を選択してください',
        });
    });
</script>
@endsection

DOMのノードへのselect2のメソッドの装着は先の単一の選択とたいして変わりません。しかし、選択開始前に表示するplaceholderがオプションとして追加されています。

select2をviteでビルド

viteを使ってselect2のビルドを作成してみましょう。まず、select2とBootstrap 5のパッケージを以下でローカル環境にインストールします。

$ npm install select2 --save-dev
$ npm install select2-bootstrap-5-theme --save-dev

そして、bootstrap.jsにおいてそれらをインポートします。

resources/js/bootstrap.js

import 'bootstrap';
import JQuery from 'jquery';
window.$ = window.jQuery = JQuery;

import select2 from 'select2';
select2();　//　どうして必要なのかわからないけれど、これは必須！

// select2のcssをインポート
import "/node_modules/select2/dist/css/select2.min.css";
// さらに、bootstrap5のcssをインポート
import "/node_modules/select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.css";

viteの設定は以下となります。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

最後に

$ npm run build

とビルドします。

Viteとバニラjs – 日付選択とリスト並び替えのウィジット

Mon, 30 Jun 2025 11:26:23 +0900

前回ではviteでのjquery-uiパッケージ対応を説明しましたが、今度はjqueryをまったく使わない日付選択とリスト並び替えのウィジットの対応とします。かと言って、javascript（バニラJS？）でそれらのUIウィジットをスクラッチから作成するわけではありません。jquery-uiに取り替わるjqueryを必要としないパッケージを探します。

Vanilla JS Datepicker

日付の選択のパッケージはいくつかありますが、Vanilla JS Datepickerが良さそうです。jquery-uiのdatepickerの日付選択と同様に以下のようにカレンダーが表示できます。

jquery-uiとは違い、年の部分をクリックすれば以下のように月での選択を容易にしています。年の選択も同様に可能です。

ブレードでは以下のようにDOMのid (#datepicker) にDatePickerを関連付けます。jquery-uiと同様にローカライズや日付のフォーマットの指定も可能です。

<input type="tel" id="datepicker" name="start" class="form-control">
...
<script type="module">
    document.addEventListener('DOMContentLoaded', function() {
        const datepicker = document.getElementById('datepicker');
        if (datepicker) {
            new Datepicker(datepicker, {
                autohide: true,
                buttonClass: 'btn',
                format: 'mm/dd/yyyy', //　日付フォーマット
                language: 'ja', // 日本語化を指定
            });
        }
    });
</script>

このパッケージのドキュメントは以下からアクセスできます。 https://mymth.github.io/vanillajs-datepicker

SortableJS

jquery-uiのsortableの代わりとしては、SortableJSがおすすめです。

こちらはブレードでは以下のように設定が可能です。

<div class="row mb-3">
    <label class="col-md-4 col-form-label text-md-end">順番の並べ替え</label>
 
    <div class="col-md-6">
        <ol id="sortable">
            <li class="ui-state-default">アイテム 1</li>
            <li class="ui-state-default">アイテム 2</li>
            <li class="ui-state-default">アイテム 3</li>
        </ol>
    </div>
</div>
...
<script type="module">
    document.addEventListener('DOMContentLoaded', function() {
        Sortable.create(document.getElementById('sortable'));
    });
</script>

viteで対応

これらのパッケージをviteで対応（コンパイル）するには、

以下で２つパッケージと取り入れます。

$ npm install vanillajs-datepicker --save-dev 
$ npm install sortablejs --save-dev

次に、bootstrap.jsでそれらをインポートします。DatePickerでは、Bootstrap 5のためのCSSや日本語化を指定します。 SorableとDatepickerはwindow.をプレフィックスとしてグローバル変数としています。jQueryのインポートがないことに注意を。

resources/js/bootstrap.js

import Datepicker from 'vanillajs-datepicker/Datepicker';
import'vanillajs-datepicker/css/datepicker-bs5.min.css'; // Bootstrap 5を取り入れる
import ja from 'vanillajs-datepicker/locales/ja'; // 日本語を取り入れる
Object.assign(Datepicker.locales, ja);
window.Datepicker = Datepicker;

import Sortable from 'sortablejs';
window.Sortable = Sortable;

そして最後に、vite.config.jsの設定は以下のようになります。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Viteとjquery-ui - 日付選択とリスト並び替えのウィジット

Mon, 16 Jun 2025 23:23:14 +0900

webpackベースのLaravel MixからViteへの移行の第２弾ですが、今回は私のお客さんのプロジェクトでも使用されているjquery-uiをViteで対応の話です。

jquery-ui

jQuery UIは、jQuerytライブラリの上に構築されたUIに関わるインタラクション、エフェクトとウィジェットのパッケージです。そのパッケージを使うと開発者は複雑なUIコンポーネントを簡単にプログラムに取り入れることができます。jQueryとともに長年に渡って現在もメンテされています。

どれほどシンプルに取り入れることが可能か、jQuery UIの日付選択とリスト並び替えのウィジットを見てみます。

まず、日付の選択のdatepickerのUIはこんな感じです。入力のテキストのところをクリックするとその下にカレンダーのウィジットが表示されて、日付を手動で入れることなくマウスで選択できます。

ブレードでは以下のように指定のDOMのid (#datepicker) にdatepicker()のメソッドを装着するだけです。言語の指定も、選択された日付のフォーマットも可能です。

<input type="text" id="datepicker" name="select_date" class="form-control">
...
<script type="module">
    $(document).ready(function() {
         $('#datepicker').datepicker({
              regional: "ja",　// 日本語化
              dateFormat: 'mm/dd/yy'　// 日付フォーマット
         });
    });
</script>

もちろん、昨今では、

<input type="date">

と入力のタイプをdateで指定するとカレンダーが出てきますが、表示されるカレンダーをブラウザーの言語に関わらず日本語で表示したり選択した日付を2025-06-14のようなフォーマットを変えたりなどは可能であってもjQuery UIのように容易には設定できません。

以下でjQurey UIのいろいろな機能のデモを見ることができます。 https://jqueryui.com/datepicker

次は、以下のようなリストやテーブルでの行の並び順を変えるsortable。

ブレードでは、こんな感じの指定です。こちらも指定のDOMのid (#sortable)にsortable()のメソッドを装着するだけで、マウスで指定の行をドラッグしてリストの順番を変えることができます。

<div class="row mb-3">
	<label class="col-md-4 col-form-label text-md-end">順番の並べ替え</label>

	<div class="col-md-6">
		<ol id="sortable">
			<li class="ui-state-default">アイテム 1</li>
			<li class="ui-state-default">アイテム 2</li>
			<li class="ui-state-default">アイテム 3</li>
		</ol>
	</div>
</div>
...
<script type="module">
    $(document).ready(function() {
         $('#sortable').sortable();
    });
</script>

viteで対応

さて、この素晴らしいjquery-uiパッケージをviteで対応するには、

まず、jqueryとjuquery-uiのnpmのパッケージを以下のコマンドで取り入れます。

$ npm install jquery jquery-ui --save-dev

さらに、以下のパッケージのrollupのinjectのプラグインも必要です。このプラグインの説明から察するに、jquery-uiのように$やjQueryのグローバル変数が設定されていると仮定するパッケージにおいてそれらを利用可能にするものと思われます。それらの指定は後にvite.config.jsで行います。これがないと動かないので必須です。

$ npm install @rollup/plugin-inject --save-dev

つぎに、bootstrap.jsでjqueryとjquery-uiをインポートします。また、カレンダーのローカライズのために、datepicker-ja.js、そしてウィジットのスタイルのために、jquery-ui.min.cssも指定が必要です。

reousrces/js/bootrap.js

import 'bootstrap';
import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;

import 'jquery-ui/dist/jquery-ui';
import 'jquery-ui/ui/i18n/datepicker-ja.js';
import 'jquery-ui/dist/themes/base/jquery-ui.min.css';

そして最後に、vite.config.jsの設定は以下のようになります。先ほどのrolleupのプラグインのinjectの設定が必要なので注意を。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from "@rollup/plugin-inject";

export default defineConfig({
    plugins: [
        inject({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

そして、以下でビルドを実行して、ブラウザで見れるようにLaravelのウェブサーバーを立ち上げます。

$ npm run build & php artisan serve

もちろん、npm run devとして開発時のデバッグのためにホットリロードを可能としてもよいです。変更が瞬時にブラウザーに反映されて開発が楽しくなります。

今回はjquery-uiをviteで対応の話でしたが、次の投稿ではjqueryを使わない日付の選択とリストの並び替えのパッケージを将来する予定です。

ViteとBootstrap(sass)とjQuery

Sun, 11 May 2025 01:22:18 +0900

前のことになりますが、Laravelのバージョン8以降よりユーザー画面のアセットのビルドのためにViteが登場しています。しかし私のプロジェクトでは、Boostrapのフレームワークを使用しておりjQueryとその関連のライブラリをヘビーに使用していてなかなか従来のwebpackベースのLaravel Mixからは抜け出すことができません。何度かは試みたものの解決できないエラーが出て挫折を繰り返すのみでした。しかし、最近やっとその移行に光が見えてきました。Viteのビルドのスピードと開発環境は良いです。

基本的に私が抱えるプロジェクトは、画面のUIはSassベースのBootstrapのフレームワークを使用、そしてそれに関連するjsのライブラリはほとんどがjQueryベースです。Laravelが存在する以前のフレームワークなしのPHPで開発されLaravelに進化した大きなプロジェクトで、そう簡単に流行りのテクノロジーには乗り換えることはできません。今回は、そのようなプロジェクトのためのViteへの移行の話です。

Vite

まず、Viteを説明するために、最新のLaravel 12.xのプロジェクトを作成します。

$ composer create-project laravel/laravel l12x-vite

この時点で、UIのアセットの元となるresourcesディレクトリはこんな感じです。

├── css
│   └── app.css
├── js
│   ├── app.js
│   └── bootstrap.js
└── views
    └── welcome.blade.php

上において、app.cssはtailwindcssのための設定ファイルで、

resources/css/app.css

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

bootstrap.jsでは、ajaxのためのaxiosのパッケージがimportされ、

resources/js/bootstrap.js

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

さらにapp.jsにおいて、そのbootstrap.jsをimportしています。

resources/js/app.js

import './bootstrap';

そして以下がViteの設定ファイルvite.config.jsです。resources下のファイルが指定されていることがわかります。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

また、上では、laravel-vite-pluginがimportされていますが、これが以前のlaravel-mixのようなもので、Viteの設定をとてもシンプルにし、LaravelにおいてUI開発を簡単にします

Viteのアクションを見るには、まず、package.jsonに含まれるパッケージをダウンロードしてnode_modulesのディレクトリにインストールします。

$ npm install

そして、Viteを使ってアセットのビルドをします。

$ npm run build

注意：npm run devによるhotの方の説明は違う機会にします。そちらもUI開発のためのViteの優れた機能です。

このビルドにより、public/buildの以下のファイルが作成されます。

public/build
├── assets
│   ├── app-D4mwfHMp.css
│   └── app-T1DpEqax.js
└── manifest.json

$ php artisan serve

を実行して、http://127.0.0.1:8000/にアクセスすると、

この画面のソースを見ると、ビルドで作成されたファイルが使用されているのがわかります。

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

        <!-- Styles / Scripts -->
        <link rel="preload" as="style" href="http://127.0.0.1:8000/build/assets/app-D4mwfHMp.css" />
        <link rel="modulepreload" href="http://127.0.0.1:8000/build/assets/app-T1DpEqax.js" />
        <link rel="stylesheet" href="http://127.0.0.1:8000/build/assets/app-D4mwfHMp.css" />
        <script type="module" src="http://127.0.0.1:8000/build/assets/app-T1DpEqax.js"></script>            
    </head>
...

元のブレードファイルを見ると、@viteのディレクティブが使用されているのがわかります。

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

        <!-- Styles / Scripts -->
        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.js'])
        @else
            <style>
...

Viteで作成されたmanifest.jsonには、

public/build/manifest.json

{
  "resources/css/app.css": {
    "file": "assets/app-D4mwfHMp.css",
    "src": "resources/css/app.css",
    "isEntry": true
  },
  "resources/js/app.js": {
    "file": "assets/app-T1DpEqax.js",
    "name": "app",
    "src": "resources/js/app.js",
    "isEntry": true
  }
}

のデータがあるので、これをもとにLaravelが@viteで指定されているアセットを実際のファイルに置き換えて表示します。このメカニズムは、以前のlaravel-mixでのmix()ヘルパーのようなものです。目的は同じく更新したcssやjsのファイルが同じファイル名でブラウザにキャッシュされないためです。

BootstrapのSass

Laravelのデフォルトのプロジェクトはtailwindcssの使用ですが、Bootstrapで使用されているSassの対応のためには、Viteの設定ファイルを変更する必要あります。

laravel/uiがいまだにBootstrapをサポートしているのでそれを利用してみます。先で作成されたプロジェクトに、laravel/uiをインストールして、bootstrapをUIとして指定します。-authはユーザーの登録やログイン画面の機能も追加します。

$ composer require laravel/ui
$ php artisan ui bootstrap --auth

この後に、vite.config.jsを見てみますと、

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

resources/css/app.cssがresources/sass/app.scssとなりBootstrapのsassのファイルをポイントしています。

jsの方では、bootstrap.jsにおいて、bootstrapをimportするように変更されています。注意：このファイル名とCSSのフレームワークのBootsrapと混乱しないように。ここでのbootstrap.jsという名前は単にLaravelのプロジェクトのブートストラップという意味だけで、必要なJSパッケージをインポートするための目的です。

resources/js/bootstrap.js

import 'bootstrap'; 

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

package.jsonには、bootstrapとsassのパッケージがlarave/uiのインストールで追加されているので、この時点でそれらをダウンロードします。

$ npm install

そして、以下でビルドを実行して、ブラウザで見れるようにLaravelのウェブサーバーを立ち上げます。

$ npm run build & php artisan serve

ブラウザのURLにおいて、以下を指定します。注意：http://127.0.0.1:8000/でアクセスすると崩れているページとなります。それは、welcome.blade.phpがtailwindcssのままでbootstrapに変更されていないからです。

http://127.0.0.1:8000/register

ブラウザでは以下のような画面になり、まずは成功です。

jQuery

次は、jQueryの対応です。まず、npmでjqueryをインストールします。

$ npm install --save-dev jquery

次に、bootstrap.jsを編集します。

resources/js/bootstrap.js

import 'bootstrap';
import JQuery from 'jquery';
window.$ = window.jQuery = JQuery; // グローバルで$やjQueryを使えるようにする
...

ユーザー登録のブレードにおいて、jqueryを使用したスクリプトを入れてみます。パスワードが８文字以上が必要なことを警告するメッセージを表示するスクリプトです。

resources/views/auth/register.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Register') }}</div>
...
@endsection

@section('scripts')
<script type="module">
    $(document).ready(function() {
        const minPasswordLength = 8; // 最小パスワード長

        // passwordの項目の後に、パスワードの長さに関する説明を追加
        $('#password').after('<small class="form-text text-muted password-help">パスワードは最低' + minPasswordLength + '文字必要です</small>');

        // passwordの項目に入力があった場合、パスワードの長さをチェック
        $('#password').on('input', function() {
            const passwordValue = $(this).val();
            const passwordHelp = $('.password-help');

            if (passwordValue.length < minPasswordLength) {
                $(this).removeClass('is-valid').addClass('is-invalid');
                passwordHelp.removeClass('text-muted text-success').addClass('text-danger');
            } else {
                $(this).removeClass('is-invalid').addClass('is-valid');
                passwordHelp.removeClass('text-muted text-danger').addClass('text-success');
            }
        });
    });
</script>
@endsection

上で注意することは、必ず