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

Sun, 30 Oct 2022 07:08:54 +0900

ここ1年位で良く聞くようになったVite。Vue.jsの生みの親であるEvan Youさん開発、との事なので、 Vue.jsとの親和性が高いのだろうな、と。Laravel + Vue.js のスタックで開発する機会があれば使ってみたいな、と。私の中ではその程度の位置付けでした。

しかし、今年の６月、Laravel 9.2.0のリリース時のTaylerさんの以下のツイートを見て、認識を改めました。

Today we're pumped to announce that new Laravel projects use Vite to bundle frontend assets. Breeze and Jetstream have been updated as well. 🔥

Experience lightning fast Hot Module Replacement when using the new Breeze / Vite stack with Inertia Vue or React. ⚡
— taylor otwell 🪐 (@taylorotwell) June 28, 2022

光速の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さん、あっぱれです。

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:'                                                                                                                                                                                     
});

インラインscript

Sun, 27 Oct 2019 06:28:36 +0900

Laravelのブレードでは、HTMLを出力するテンプレートをモジュール化できます。ブレードのディレクティブである＠yieldを使用すれば、レイアウトのテンプレートと、その中身のテンプレートを違うファイルとして管理が可能です。今回は、それを利用して会員登録の画面にインラインのjavascriptを埋め込みます。

@yield('script')

まず、レイアウトのブレード、app.blade.phpを変更します。

resources/views/layout/app.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">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script type="module">
        @yield('script')
    </script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
...
       <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

@yield(‘script’)には、@yield(‘content’)と同様に、以下の会員登録画面のブレードの@sectionと@endsectionで囲まれるコードが入ります。

resources/views/auth/register.blade.php

@extends('layouts.app')

@section('script')
$(document).ready(function() {
    $(':button[type="submit"]').prop('disabled', true);
    $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
            $(':button[type="submit"]').prop('disabled', false);
        }
    });
});
@endsection

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

                <div class="card-body">

                    <form method="POST" action="{{ route('register') }}">
                        @csrf

                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

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

                                @error('name')
                                    <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>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

このjqueryのコードは、「Register」のボタンを最初アクセス不可としておいて、項目に１つでも入力があればアクセス可能とします。

会員画面として出力されるHTMLは以下のようになります。

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

    <!-- CSRF Token -->
    <meta name="csrf-token" content="5hVqkt6ozgXZZqFlvS7TeoQlqXOyfGCqt5j3KTEz">

    <title>Laravel</title>

    <!-- Scripts -->
    <script src="/l58/js/app.js" defer></script>
    <script type="module">
$(document).ready(function() {
    $(':button[type="submit"]').prop('disabled', true);
        $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
            $(':button[type="submit"]').prop('disabled', false);
        }
    });
});
    </script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="/l58/css/app.css" rel="stylesheet">
</head>
<body>
...

type="module"

気づいたと思いますが、レイアウトのapp.blade.phpにおけるインラインの