Laravel-adminでjs読み込み

長い間解決策が分からず悶々としていた課題についに終止符を打つことができました。

同じ課題にぶつかっている方の参考になれば幸いです。

何が起こっていたか

Laravel-adminでjsを読み込む場合に、このような記述をしていました。

Admin::js('https://code.jquery.com/jquery-3.6.0.js');

この場合に何が起きていたかというと

フロントの制御に関連するjsが動かない

例えば、郵便番号の入力に応じて住所を出力するなど

しかしなぜかブラウザでページ更新すると動くようになる。

レンダリングの問題だと思いつつ、しばらくの間問題を放置していました。

Laravel-adminでのjsファイル読み込み方法

各コントローラから該当ページでのみ読み込むjsファイルがある場合、Adminファサードで2種類の方法が提供されています。

• Admin::js
• Admin::headerJs

このheaderJsの存在を最近知りました。。

Admin:jsとAdmin:headerJsの違い

HTMLのレンダリングおさらい

HTMLソースは大きくhead部とbody部に分かれていますね。

Admin::headerJsでの埋め込み

head要素内の最後にjs読み込みが追加されます。jquetyが読み込まれている位置ですね。動的制御などはこちらにまとめます。

Admin::jsでの埋め込み

body要素内の最後にjs読み込みが追加されます。bootstrapが読み込まれている位置になります。動的制御に関連のない要素は、ページ読み込み速度向上のためにこの位置で読み込むようにしましょう。

今回はheaderJsの方を読みこむようにしたところ、無事課題解消しました。

Admin::headerJs('https://code.jquery.com/jquery-3.6.0.js');

追記

これでも動かないケースがありました。苦肉の策として、リンクの度に別ウィンドウ表示にしたところ問題なく動作しています。

grid画面からform画面へリンクを辿っていくと動かないのですが、URL直打ちすると問題なく動くという不思議挙動。

どなたか解決策ご存じでしたら教えて下さい。

まとめ

jsを後半部分で読み込んでいるのは、ページ表示を優先するSEO対策がメインの目的です。ただし、中にはhead部分で読み込まないとページ自体のレンダリングに影響のあるものがありますので、その場合は読み込み位置をheadに指定してやりましょう。