app.blade.phpでjavascriptを読み込むとイベントが動かなくなった

Laravelで掲示板アプリを開発しており、以下の方法でログイン機能を追加しました。

/(ルート）のページとして以下のファイル（main.blade.php）を作成しておりました。

resources/views/main.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
 〜省略〜
</head>
<body>
  <div class="container">
    〜省略〜
  </div>
  <script src="{{ asset('js/main.js') }}"></script>
</body>
</html>

public/js/main.js

'use strict';

const formWrap = document.querySelector('.formWrap');
const letsNew = document.getElementById('letsNew');

//クリックイベントでクラスの付け替えをしています
letsNew.addEventListener('click', ()=>{
  if(formWrap.classList.contains('closed')){
    formWrap.classList.remove('closed');
    formWrap.classList.add('opened');
  }else if(formWrap.classList.contains('opened')){
    formWrap.classList.remove('opened');
    formWrap.classList.add('closed');
  };
});

その後、以下のようにLogin機能の実装により自動生成されたapp.blade.phpへscriptタグを追記し、javascriptを読み込もうとしたところ、javascriptのクリックイベントが動作しなくなってしまいました。。。

resources/views/main.blade.php（修正後）

@extends('layouts.app')

@section('content')
  <div class="container">
    〜省略〜
  </div>
@endsection

resources/views/layouts/app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
〜省略〜
</head>
<body>
    <div id="app">
       〜省略〜
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    <!-- FIXME JSが動かない -->
    <script src="{{ asset('js/main.js') }}"></script>
</body>
</html>

main.blade.phpだけでjavascriptを読み込んでいたときはクリックイベントが動いていたのですが、app.blade.phpから読み込むと動かない状況です。

また、chromeのコンソールには以下のワーニングが表示されています。

DevTools failed to load SourceMap: Could not load content for http://localhost/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

なお、main.jsファイルにconsole.log('hello');と記載してみると、コンソールには

hello
DevTools failed to load SourceMap: Could not load content for http://localhost/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

と表示されるので、main.jsファイル自体は読み込めているものと推測しているのですが、なぜイベントリスナーが動作しないのか分からずにおります。
app.blade.phpでjavascriptを読み込むときには、何かしら設定の変更などが必要なのでしょうか。

どうかアドバイスのほど、よろしくお願いします。

yuki84web

2020/07/12 01:40

popper.js.mapのwarnは別ファイルなので関係ないです。 formWrapとletsNewの中身にDOMの情報は入っていますでしょうか。（NULLなら、そもそも要素を参照出来ていない）

T.Takeda

2020/07/12 03:50

ご連絡ありがとうございます。ワーニングは関係ないんですね。はい、DOM情報は入っていることは確認できています。

行動規範の内容に同意します

回答1件

ベストアンサー

何故動かないのか、という理由が説明出来なくて申し訳ないですが、

app.blade.php内の記述を下記のようにapp.jsの下に移動してみるとか。

php
1<script src="{{ asset('js/app.js') }}" defer></script>
2<script src="{{ asset('js/main.js') }}" defer></script>

あとは、Laravel Mixでapp.jsにまとめてみる（main.jsを読み込むscriptタグは外す）

resources/js/app.js

javascript
1require('./main');  //追加

下記コマンドでビルド

command
1$ npm run dev

また、下記に書くとビルド時に別ファイルとして出力出来ます。

javascript
1mix.js('resources/js/app.js', 'public/js')
2    .js('resources/js/main.js', 'public/js')
3    .sass('resources/sass/app.scss', 'public/css');

投稿2020/07/12 04:54

編集2020/07/13 01:35

yuki84web

総合スコア1857

T.Takeda

2020/07/13 00:50 編集

アドバイスありがとうございます。結果としては一つ目にご提案いただいた「app.blade.php内の記述をapp.jsの下に移動してみる」でイベントが動作するようになりましたが、今度は認証機能のjavascriptが一部動かなくなることが確認できました。（ログイン後、画面に表示されるユーザー名をクリックすると表示される小さなポップアップが開かなくなってしまった） Laravel Mixの理解が出来ていないので、二つ目のご提案を基に学習をしてみたいと思います。

yuki84web

2020/07/13 01:37

ごめんなさい、回答に間違いがありましたので修正しました。app.jsにまとめるにはresource/js/app.jsにrequireで作成したmain.js(※)を読み込ませます。 ※main.jsはresource/js/に置いてください。

T.Takeda

2020/07/13 03:34

ありがとうございます。一旦、app.blade.phpの</body>の直前で<script src="{{ asset('js/main.js') }}" defer></script>のみにしてみたところ、全て期待通りに機能することが確認できました。恐らくdefer属性がついたことが原因だと思われますが、これがどのような効果を発揮しているのか分からないので、調べてみたいと思います。また、Laravel-Mixについても新たな知識ですので、勉強になりました。ベストアンサーにさせていただきます。ありがとうございました。

行動規範の内容に同意します