ネビ活 | ネットビジネス生活

ネットxお金のスキルを作り、未来永劫豊かに暮らす事を目指すサイト

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

投稿日:

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

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

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

のどちらかを使います。

 

Laravelって稼げるの?独学?スクール?高給を稼ぐためにどうするべきか教えます。

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のせいです。

 

ところで、あなたがLaravelを学んでる理由ってなんですか?

稼げるって聞いたから?

どれくらい上達すれば稼げるのか?本当にそんな高給を稼げるのかの現実を知ってますか?

詳しくは下の記事に本音の裏事情を書いてるので参考にしてくださいね。

Laravelって稼げるの?独学?スクール?高給を稼ぐためにどうするべきか教えます。

 

  • この記事を書いた人

Neby

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

-PHP Laravel入門

Copyright© ネビ活 | ネットビジネス生活 , 2020 All Rights Reserved.