Laravelのbladeでjavascriptを使う時の2種類の書き方。初心者向けに例で解説!

更新日:

LaravelでJavascriptを使いたい場合は、bladeに書けばいいんだよね?具体的にどういうふうに書けばいいの?

LaravelのbladeでJavascriptを使う場合は、

  • blade.phpに直書きする
  • blade.phpからjsファイルを呼び出す

のどちらかを使います。

 

LaravelのbladeにJavascriptを直書きして使う方法

Javascriptをblade内に直書きするなら、
<script></script>タグをまず作り、その中にJavascriptを書いていけば問題ありません。

ちなみに、書く位置ですが、<head>タグ内、<body>タグ内、どちらでも大丈夫です。Javascriptはブラウザでの表示速度を落とす原因によくなるので、先に読むこむ必要のないJavascriptタグは、</body>閉じタグ手前に書けばOKです。

ただ、Jqueryなどを読み込む場合は、自分で作ったJavascriptよりも上に書かないと動かない原因になりますので注意です。

 

LaravelのbladeからJavascriptファイルを呼び出す方法

もう一つの方法は、Javascript専用のファイルを作って、それをブレードで読み込む方法です。

まず、テキストエディタに、Javascriptを書くんですが、ここでは<script></script>タグは不要です。(むしろ書くと動かなかったりします)

で、nantara.jsという感じで、.jsという拡張子を付けて、

public\jsフォルダに保存します。(無い場合は作ってください。)

 

そして、blade上(これもhead内、body内どちらでもOK)

<script src="{{ asset('js/reportbtn.js') }}"></script>

のように呼び出します。赤茶文字のjs/がフォルダ名、reportbtn.jsがファイル名なので、フォルダ名やファイル名を書き換えてください。デフォルト設定だと、asset()でpublicフォルダが呼ばれる仕様になってます。

 

Laravelの継承Blade上にJavascriptを書く場合

継承、つまり@extend を使ってるblade.php上に書く場合は、
@endsectionの手前(つまりsection内)に書きます。そうしないと正しく動かなくなります。

 

LaravelのJavascriptの書き方、それぞれのメリット

特にどちらが良くてどちらが悪いって事はないです。

bladeに直書きすると、ながーいファイルになるので、分けた方が見やすいと感じれば分ければいいですし、分けない方がむしろ管理しやすいと感じたら、直書きするといいでしょう。

 

Laravelのbladeに書いたJavascriptが動かない?

例えば、複数のjavascriptファイルがある場合は、1つの<script></script>の中にまとめて書かず、それぞれを<script></script>で囲った方がバグが出ないです。

 

また、Jqueryの場合、bladeファイルの読み込みが終わる前に、Jqueryが発動してしまうと、動かなかったりするので、そういう場合は、

$(document).ready(function(){ ここに入力 }); のタグでスクリプトを囲うと動いたりします。

 

他にもapp.jsとのバッティングの可能性もあります↓

Laravelのbladeに書いたJavascriptが動かない?app.jsのせいです。

 

写真で血圧記録

  • この記事を書いた人

Neby

本を毎日多読しつつ、資産運用、プログラミング、心理学、ネットビジネススキルを猛向上中。貧富の差が広がる5年後、10年後に安心生活を送るためのお金のリテラシー、スキル、資産を一緒に作っていきましょう。

-PHP Laravel入門