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

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も指定が必要です。

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の設定が必要なので注意を。

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を使わない日付の選択とリストの並び替えのパッケージを将来する予定です。