Vite 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

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

光速のHMR。。。是非使ってみたい！


Viteが採用された理由
従来のLaravelはアセットバンドラにwebpackをラップしたLaravel-Mixを使うのが一般的でした。
この決定を知った時、私はViteについて冒頭に述べた程度の認識だったので、
「なぜViteに変えるの？Laravel-Mixの何がダメなの?」と、思いました。
因みに、同様の質問がTwitterで投げられており、Taylerさんがシンプルに
“much faster(断然速いから)"と答えていました。
この業界においてスピードは正義ですから、より速いツールが開発されたら導入しない理由はないですよね。
でも何がどう速いのでしょうか？もっと知りたくなり調べてみました。
調べていく内に、Laravel-MixとViteは全く別物、ということが分かってきました。
Laravel-Mixの問題点
Viteが速いということは、Laravel-Mixが遅いという事ですが、具体的にどの部分が遅かったのでしょうか？
従来のLaravelの開発ではnpm run devを実行すると、resources配下から必要なアセットファイル（cssやjsなど）をかき集め、依存関係を解決しつつ１ファイルにまとめるという処理が行われていました。
アセットバンドルについてはlaravel-mixでフロントエンドを開発にてkhino氏が詳しく解説しているので是非ご一読下さい。
開発者のアクションとしては、

	jsファイルを変更する
	npm run dev を実行しアセットをバンドル（ビルドともいう）する
	ビルドした成果物をブラウザで確認する

といった感じです。
プロジェクト規模が大きくなりファイル数が多くなるとバンドル処理に時間が掛かり、開発効率が落ちてしまいます。
私のようにjsをふりかけ程度にしか使っていない場合は大したこと無いですが、VueでSPAを開発している場合などは、
上記のフローを高頻度で繰り返し開発するため、変更〜確認までにラグがある事は大きなストレスになります。
Viteはノーバンドル
ではViteはどうなのか？
公式ページに詳しく書いてありますが、Viteは開発サーバにおいて基本バンドルしません。パッケージやライブラリなど開発者が基本変更しないようなファイルは事前バンドルされるのですが、開発者が頻繁に変更するソースコードについてはバンドルせずブラウザに提供するのです。
最近のブラウザはES6で導入されたモジュール機能(import, export)に対応しており、ブラウザが表示するページに必要なモジュールを把握しそれらをimportしてくれます。そして、開発者がファイルを編集した際はViteがその変更を把握し、変更されたモジュールのみ再読み込みしてくれるのです。
アセットのバンドルも無ければ、リロード範囲も最小限な為、前項で問題とした変更〜確認までのラグというのが最小限に抑えられるという訳です。
Viteを体感してみる
冒頭のTaylerさんのTweetにある通り、Laravel 9.2.0 以降ではViteがフロントエンドのデフォルトビルダとして採用されており、npm run devを実行するとViteがHMRモードで起動します。

HMRとはHot Module Replacementの略でコードを変更し保存するとページのリロード無しでブラウザに変更が反映されます。
驚いたのは、保存してからブラウザに反映されるまでの速さです。文字通り一瞬で全くラグを感じませんでした。Vite恐るべし。
本番用にはバンドルする
開発時においてはバンドルせずにアセットを提供する事で開発者をハッピーにしてくれるViteですが、本番においてはバンドルした方がハッピーな様です。
なぜなら、ノーバンドルでアセットを提供した場合、ブラウザが逐次必要なモジュールをネットワーク経由で取得する必要があり非効率だからです。通常ネットワーク経由でデータを取得する際、細切れになったデータをロードするよりも、それらを１つにまとめてロードした方が効率的なのです。
開発時においてそれが問題にならないのは取得するデータが全てローカルに存在し、ネットワーク経由で取得する必要が無い為です。
まとめ
長く（と言っても数年）Laravel-Mixを使って開発していると、ついアセットはバンドルするもの、という固定観念に縛られがちですが。
開発時は敢えてバンドルせず、ブラウザ側で出来ることはブラウザに任せよう、という思い切った試みがパズルのピースのように完璧にバチッとはまっており、改めて素晴らしい発明だなぁ、と思いました。Evan Youさん、あっぱれです。