独学者Fossa

独学していることなど

app.jsが原因ではない

Laravel

間違った記事のせいで、間違った記事を読んだ人も、間違った結論を出してしまうパターンを発見しました。

間違った記事も、間違った記事を読んだ人も、app.jsのせいだと結論づけていますが、本当にそうでしょうか？


app.jsを読み込むと、jQueryやjQuery UIが動かないのか、試してみました。

jQuery UIのautocompleteを実装して失敗したと書いてあったので、autocompleteを実装してみます。

Laravel UIを使っているのが前提らしいので、インストールします。

使用環境

Name Version
PHP 8.1.7
Laravel 9.17.0
Laravel UI 3.4.6
Bootstrap 5.1.3
jQuery 3.6.0
jQuery UI 1.13.1
node v16.15.1
npm 8.12.2
Laravel Mix 6.0.49

実装例

views/layouts/app.blade.php

<head>内

    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script>
        $(function () {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });
    </script>

<body>内

        <main class="py-4">
            @yield('content')
            <div class="container py-4">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="ui-widget">
                            <label for="tags">Tags: </label>
                            <input id="tags">
                        </div>
                    </div>
                </div>
            </div>
        </main>

結果

実際の画面
実際の画面

問題なく動いています。

結論

参考にするべき記事

qiita.com

おそらく、Laravel 6(厳密に言うとLaravel UI 1.0)だと、Bootstrap 4が使われていて、Bootstrap 4はjQueryを使っています。

jQueryやjQuery UIをLaravel Mixで使うための記述をしていないのが原因。

念の為、下記の手順通り作業して、app.jsを読み込んで、動作確認しました。

  1. npm i jquery && npm i jquery-ui
  2. <head>内、JavaScriptのCDNの読み込み箇所は削除
  3. bootstrap.jsを、下記のように記述
  4. npm run dev

bootstrap.js内

try {
    window.$ = window.jQuery = require('jquery');
    require('jquery-ui/ui/widgets/autocomplete.js');
    require('bootstrap');
} catch (e) {}


私が試したLaravel 9だと、Bootsrap 5が採用され、Bootstrap 5は、jQueryを使っていないから、すんなり使えたのだと思います。

思わず釣られてマジレスしちゃったけど、冷静になったら、マジレスする価値ないと思って、削除しました。


間違った記事で、安易に間違った解釈をしないように、私自身も気をつけたいと思います。