(Laravel)bladeでJavaScriptを読み込みたい

JavaScript本来の記述場所

二通りを紹介します。

<body>タグ内に直接書く

このとき、<div>タグなどを多くのタグを用いると思いますが、<script>タグは<body>タグの一番最後に記述するのが一般的のようです。

  • index.blade.php
<body>
  // いろいろなhtmlタグ
  <script type="text/javascript">
    alert("Hello");
  </script>
</body>

<head>タグ内に記述し、外部ファイルを呼び出す

  • index.blade.php
<head>
  <script type="text/javascript" src="sample.js"></script>
</head>

sample.jsファイルを作成し、その中でJavaScriptを記述します。

  • sample.js
alert("Hello");

Laravelでも基本形は同じ

今回は二通り紹介します。

asset()で読み込む

public/jsに.jsファイルを作成し、asset()で読み込むだけ。

  • sample.js
alert("Hello");
  • index.blade.php
<body>
  // いろいろなhtmlタグ
<script src="{{ asset('/js/sample.js') }}"></script>
</body>

bladeを分けるだけ

この方法は正直魅力をあまり感じませんが、htmlとJavaScriptを分けて管理したい時に単純なやり方なのでとりあえずご紹介。以前これで私は作成していて、html内にまとめるよりは判りやすかったです。

  • index.blade.php
<body>
    @yield('scripts')
</body>
  • scripts.blade.php
<script type="text/javascript">
  alert("Hello");
</script>

JavaScriptの読み込みは簡単!

今回紹介した方法は大した知識が要らないので取り入れやすいと思います。

参考URL

すぐ分かる!HTMLでJavaScriptを呼び出す方法 | TechAcademyマガジン

今回、こちらのおすすめ度★★を採用しました。
Laravel で JavaScriptをやるときの手法 - Qiita

もう少し自分のレベルが上がったときに採用したい方法かと思ったのでメモしておきます。
LaravelでJavascriptやCSSを使おう( Laravel Mix ) - Qiita