追記:
コンメトで正攻法の解決方法をアドバイスいただきました。
当記事はやっつけの解決策なので、みんなはマネしちゃダメだぞ☆
laravel5.6 をインストールして jQuery を使おうとしたら、jquery.js を読み込んでいるはずなのに使えなくてハマったのでメモ。
状況
laravel5.6 を普通にインストールして、
$ npm install
$ npm run dev
した状態からスタート。
デフォルトで jQuery が読み込まれているようなので、
blade.php ファイルに jQuery のコードを書いたらエラーが発生して動かない。
$(function(){
// ここにプログラムを記述
});
これだけなのに、以下のエラー。
Uncaught ReferenceError: $ is not defined
どうやら jQuery が読み込まれていないというエラーのよう。
原因
あまり詳しくはないけど、どうやら laravel5.6 では（5.5あたりから？） vue がデフォルトになっているようなので、もしかしたら jQuery なんかも vue 方式で書かないと行けないのかもしれない。
そんな急に vue を覚えろと言われても、すぐに実用レベルで使えるかどうかもわからないので、まずは旧来の書き方で良いから動かしたい。（そんなんだから二流プログラマーなんだよと言われそうだけど）
調べていたら、こいつが怪しい。
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
defer ってなんだ？
<script> タグに async / defer を付けた場合のタイミング
https://qiita.com/phanect/items/82c85ea4b8f9c373d684
どうやら、 defer を付けると処理の実行を遅延させることができるらしい。
つまり、blade内に jQuery のプログラムを書いても、元になる jquery.js が遅延されて後から実行されるので、 jquery.js が読み込まれていないというエラーが発生しているようだ。
結論
とりあえず、 jQuery をベタに書いて動かしたいなら、 defer を削除すれば動く。
- <script src="{{ asset('js/app.js') }}" defer></script>
+ <script src="{{ asset('js/app.js') }}"></script>
最初に書いた vue は関係ありそうな気がしたけど関係なさそう。
でも今回は使わないので、 assets/js/app.js から vue 関連のところは消してコンパイルしておきました。
app.js に重い処理などを書くようになると、 defer を外した影響が出てくる可能性があるので、ちゃんと良い書き方覚えないとと思いながら、今日も妥協のコーディング。