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

更新日:

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

 

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

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

 

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

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

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

 

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

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

 

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が動かない問題の原因ではないです。

 

写真で血圧記録

  • この記事を書いた人

Neby

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

-PHP Laravel入門