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

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

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

投稿日:

あれ~、Laravelのブレードにいつも通りにJavascriptを書いたのに、なぜか全然動かないんだ。何が悪いんだろう・・

 

通常、Laravelではblade.php上にJavascriptを書いたり、
bladeからJavascriptファイルを呼び出したりができるようになっていますが、

なぜかJavascriptがうんともすんとも言わない時があります。

 

まず、最初に確認して欲しい事なんですが、

public\jsフォルダにapp.jsというファイルはありますか?

そして、そのトラブルはログイン後に起こりますか?

 

その場合、app.jsというファイルが邪魔をしてる可能性が高いです

このapp.jsとはなんなのか、そしてどうすればJavascriptを動かせるのかについて解説していきます。

 

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

LaravelのbladeでJavascriptが動かない原因と対処法

普段はblade.php内にJavascriptを書くなり、Javascriptファイルを呼び出すなりすれば、Javascriptは問題なく動いてくれますが、

もしあなたが、例えばLaravelのログイン機能(Auth)を使っている場合、
ログイン後のページではJavascriptが動かなかったりします。

 

というのも、Laravelのログイン後のページのブレード、例えば自動的に作られるlayouts\app.blade.phpをちょっと開いて見てほしいんですが、

この <script src="{{ asset('/js/app.js') }}" defer></script> みたいな一文が入ってると思います。

これ、public\js フォルダ内の app.js というJavascriptファイルを呼び出してるんです。

 

で、このapp.jsっていうのは、普通のJavascriptとちょっと違います。

というのも、あなたがLaravelにログイン機能(Auth)を付けた時に、
npmインストールというのをやったと思うんです。

Laravel6でログイン機能を実装の方法。初心者でも確実にできるように丁寧に解説!

 

その時に、node.jsっていう、サーバー側で動くJavascriptとして、app.jsが機能するようになってます。

で、app.jsを読み込むページによっては、
手書きで書くJavascriptとバッティングして、Javascriptが動かなくなるんです。

 

実際、ちょっとlayouts\app.blade.phpってファイルを開いてみて欲しいんですが、

ここに、<script src="{{ asset('js/app.js') }}" defer></script>ってファイルが入ってますよね。
これが、public\js\app.jsというファイルを呼び出してるんです。

仮にこのコードを削除すると、あなたのJavascriptは動くようになると思います(動かないなら原因は別にある)。

ただ、これを消してしまうと、Laravelサイトにログイン後、ログアウトするためのプルダウンメニューなどのapp.jsファイルで動いてる部分が動かなくなります。(というか、自分が確認した限りでは、ログイン後の画面でapp.jsが動かしてるのは、ログアウトボタンのプルダウンメニューだけです・・)


 

なので、app.jsを読まなくする事で起こる問題は、
このログアウト用プルダウンメニューが表示されなくなる
=ログアウトできなくなるって事です。

 

app.jsが原因でJavascriptが動かない場合の対処法3選

じゃあ、このapp.js問題をどうすればいいかですが、

  • app.jsなしでログアウトできるように、CSSを改造する
  • Javascriptを使うページだけ、app.jsを外す
  • Javascriptをそのまま使わず、node.jsで動かす

などの方法で対処します。

 

app.jsなしでログアウトできるように、CSSを改造する

一番簡単な方法です。

結局app.jsがログイン後のhome画面でやってる事で、
ログアウトボタンを表示するプルダウンメニューを動かす事だけです。

じゃあ、最初からログアウトボタンが表示されてる状態にしてしまえば、ログアウトができないという事にはなりません。

public/css/app.cssファイルを開いて、

この.dropdown-menu内にある、display:none;をコメントアウトしてみてください。

そうすると、ログアウトボタンがデフォルトで表示された状態になります。というか、ドロップダウンメニュー自体が機能しなくなります。

常時この表示状態になるので、ログアウトはできるようになります。
見た目が不格好ではあるので、app.cssとhome.blade.phpをイジって、形を変えるなりの対応をすれば、app.jsをlayouts\app.blade.phpから外しても、問題がなくなるというわけです。

 

Javascriptを使うページだけ、app.jsを外す

もしくは、Javascriptを使いたいページだけ、app.jsを外すという手もあります。

まず、ログイン後の最初の画面(home.bladeの画面)では、Javascriptを使わないページにします。
なので、ここではプルダウンメニューが普通に動きます。

ただ、ここから別のページ(別のblade)に移動後は、そこではapp.jsを外し、
プルダウンメニューも表示せず、
Back to Mypageというリンクに置き換えました。

こうする事で、この画面ではログアウトできないですが、back to My pageからhome.bladeのページに戻れば、ログアウトできますし、このページでは普通にJavascriptが動くようになりました。

どうやって、特定のページだけ、app.jsを動かないようにするかと言えば、
下の画像のような感じにif文を使って、特定のページだけ <script src="{{ asset('js/app.js') }}" defer></script>を表示しないようにすればいけますよね。

もしくは、単純に、app.blade.phpをコピーして、app2.blade.phpを作成。そしてapp2からは、 <script src="{{ asset('js/app.js') }}" defer></script>を削除して、Javascriptを使いたいページだけ、app2.blade.phpを代わりに使えば良いわけです。

 

Javascriptをそのまま使わず、node.jsで動かす

これはちょっと難易度がさらに上がりますが、そもそも普通のJavascriptを使わず、ログイン後の画面では全てnode.jsでコードを書いて使えば、そもそもバッティングしません。

node.jsにあなたが詳しい場合は、この方法が一番でしょう。

 

基本的には、自分でnode.jsを設定してない限りは、
app.blade.phpでしかapp.jsは呼ばれてないはずです。

(何か別のパッケージをインストールした結果、ログイン前のページでも動いてる可能性は十分ありますが・・)

 

なので、app.jsを使わずともLaravelを運用する事自体は可能です。

ただComposerでインストールするパッケージなどには、node.jsで動いてる機能も多々あるので、app.js自体を削除はしないでください。サイトが動かなくなったり、パッケージがインストールできないなどの弊害がでると思います。

逆にnode.js及び、npmをインストールしてない場合は、そもそもapp.jsが作られてないので、このJavascriptが動かない問題の原因ではないです。

 

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

稼げるって聞いたから?

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

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

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

 

  • この記事を書いた人

Neby

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

-PHP Laravel入門

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