HTMLファイルで、javascriptを実行するときは、<script>のブロックが使われます。最近というか、私が知らなかった間にこの使われ方がかなり変わってしまいました。
Laravel 5.8のテンプレートファイル、app.blade.php (php artisan make:authでインストールされます）を見ると、
...
<head>
...
<script src="{{ asset('js/app.js') }}" defer></script>
<head>でjavascriptを読み込んで実行しています。しかも、<script>には、deferという見慣れないものがあります。
こんなものあったかな？と、Laravel 5.5でのインストールで調べると、
...
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
と、以前はファイルの</body>の前で読み込んでいます。しかも、deferはありません。
私が覚えているHTMLでのjavascriptの形態はこれです。こうしてHTMLの最後に置かないと、DOMの要素がすべてロードされていなく実行に問題があることがある、というのが教わったことです（どこかで）。
しかし、defer登場でその必要がなくなったみたいです。
以下の記事で説明ありますが、deferだけでなく、asyncとかmoduleとかもあります。
https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6
そのサイトから以下借りてきますが、deferがあると、javascriptの読み込みは行うが、実行はHTMLのロードが完了した後に行われます。
ちなみに、type=”module”というのもdeferと同様に、実行はHTMLのロードの後で行われます。
こうなると、<head>で、javascriptを管理できてわかりやすくなります。しかし、その一方asyncとかの属性も増えて複雑になり、使い分けが大変そうです。
メルマガ購読の申し込みはこちらから。