laravel js使いたい

laravel初心者です。

laravelでjsを使いたいのですができなくて困っています
以下のエラーがwebの検証のコンソールで発生しております。
GET http://127.0.0.1:8000/js/jquery-3.5.0.tgz.js net::ERR_ABORTED 404 (Not Found)
edit:19
GET http://127.0.0.1:8000/Shop/64/js/shop.js net::ERR_ABORTED 404 (Not Found)
shop/edit.blade.php

npm run devやnpm run watchを使って下記のようにしたらいけると思っていたのですが、いけませんでした。

わかる方教えていただきたいです。
よろしくお願いいたします。

<!-- @extends('layouts.app') -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<script type="text/javascript" src="/js/jquery-3.5.0.tgz.js"></script> 
<script src="{{ asset('js/shop.js') }}" defer></script>
@section('content')
<form method="POST" action="{{url('Shop/update')}}" enctype="multipart/form-data">
    {{ csrf_field() }}
    <!-- @method('PUT') -->
    
    <label for="name">
        店名
    </label>
    <input
        id="name"
        name="name"
        class="shop-name"
        value="{{ old('name', $shop->name) }}"
        type="text"
    >

    <div class="con">追加</div>


    <!-- <input type="file" name="image"> -->
    <!-- <input type="file" name="video"> -->
    <div class="mt-5">
    <a class="btn btn-secondary" href="{{ action('ShopController@show', $shop->id) }}">
        キャンセル
    </a>
    <button type="submit" class="btn btn-primary">
        更新する
    </button>
    <input type="hidden" name="_token" value="{{csrf_token()}}">
    <input type="hidden" name="id" value="{{$shop->id}}">
</form>
</div>
@endsection

resource/js/shop.js

$(function(){
  const buildFileField = (index)=> {
    const html = 
    `<div class="com-data" data-index="${index}">
    <label for="com-name">
      商品
    </label>
    <input
    id="com-name"
    name="com-name"
    class="com-name"
    value="{{ old('com-name') }}"
    type="text"
    >

    <div class="con">追加</div>

    </div>
    </div>
    </div>
      <div class="exhibition__detail__des__cou__tag">削除</div>
    </div>`;
    return html;
  }

  const buildImg = (index, url)=> {
    const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
    return html;
  }

  let fileIndex = [1,2,3,4,5,6,7,8,9,10];

  lastIndex = $('.com-data:last').data('index');
  fileIndex.splice(0, lastIndex);

  $('.hidden-destroy').hide();
  $('.con').on('click', '.c', function(e) {
    console.log("ok");
    const targetIndex = $(this).parent().data('index');
    const file = e.target.files[0];
    const blobUrl = window.URL.createObjectURL(file);
    if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
      img.setAttribute('images', blobUrl);
    } else {  
      $('.b').append(buildImg(targetIndex, blobUrl));
      $('.a').append(buildFileField(fileIndex[0]));
      fileIndex.shift();
      fileIndex.push(fileIndex[fileIndex.length - 1] + 1);
    }
  });

  $('.exhibition__detail__image__in__fis').on('click', '.exhibition__detail__des__cou__tag', function() {
    const targetIndex = $(this).parent().data('index');
    const hiddenCheck = $(`input[data-index="${targetIndex}"].hidden-destroy`);
    if (hiddenCheck) hiddenCheck.prop('checked', true);
    $(this).parent().remove();
    $(`img[data-index="${targetIndex}"]`).remove();
    if ($('.exhibition__detail__image__in__fis__out__ind__fil').length == 0) $('.exhibition__detail__image__in__fis').append(buildFileField(fileIndex[0]));
  });
});

public/js/shop.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	
------一部省略--------

$(function () {
  var buildFileField = function buildFileField(index) {
    var html = "<div class=\"com-data\" data-index=\"".concat(index, "\">\n    <label for=\"com-name\">\n      \u5546\u54C1\n    </label>\n    <input\n    id=\"com-name\"\n    name=\"com-name\"\n    class=\"com-name\"\n    value=\"{{ old('com-name') }}\"\n    type=\"text\"\n    >\n\n    <label for=\"com-price\">\n      \u91D1\u984D\n    </label>\n    <input\n    id=\"com-price\"\n    name=\"com-price\"\n    class=\"com-price\"\n    value=\"{{ old('com-price') }}\"\n    type=\"text\"\n    >\n\n    <label for=\"description\">\n        \u5546\u54C1\u7D39\u4ECB\n    </label>\n    <textarea\n        id=\"description\"\n        name=\"description\"\n        class=\"com-description\"\n        rows=\"4\"\n    >{{ old('description') }}</textarea>\n\n    <div class=\"con\">\u8FFD\u52A0</div>\n\n    </div>\n    </div>\n    </div>\n      <div class=\"exhibition__detail__des__cou__tag\">\u524A\u9664</div>\n    </div>");
    return html;
  };

  var buildImg = function buildImg(index, url) {
    var html = "<img data-index=\"".concat(index, "\" src=\"").concat(url, "\" width=\"100px\" height=\"100px\">");
    return html;
  };

  var fileIndex = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  lastIndex = $('.com-data:last').data('index');
  fileIndex.splice(0, lastIndex);
  $('.hidden-destroy').hide();
  $('.con').on('click', '.c', function (e) {
    console.log("ok");
    var targetIndex = $(this).parent().data('index');
    var file = e.target.files[0];
    var blobUrl = window.URL.createObjectURL(file);

    if (img = $("img[data-index=\"".concat(targetIndex, "\"]"))[0]) {
      img.setAttribute('images', blobUrl);
    } else {
      $('.b').append(buildImg(targetIndex, blobUrl));
      $('.a').append(buildFileField(fileIndex[0]));
      fileIndex.shift();
      fileIndex.push(fileIndex[fileIndex.length - 1] + 1);
    }
  });
  $('.exhibition__detail__image__in__fis').on('click', '.exhibition__detail__des__cou__tag', function () {
    var targetIndex = $(this).parent().data('index');
    var hiddenCheck = $("input[data-index=\"".concat(targetIndex, "\"].hidden-destroy"));
    if (hiddenCheck) hiddenCheck.prop('checked', true);
    $(this).parent().remove();
    $("img[data-index=\"".concat(targetIndex, "\"]")).remove();
    if ($('.exhibition__detail__image__in__fis__out__ind__fil').length == 0) $('.exhibition__detail__image__in__fis').append(buildFileField(fileIndex[0]));
  });
}); // $(function() {
//   alert('sample');
// });

/***/ }),

/***/ 1:
/*!************************************!*\
  !*** multi ./resources/js/shop.js ***!
  ************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(/*! C:\Users\wi031\Desktop\laravel\laplace\resources\js\shop.js */"./resources/js/shop.js");


/***/ })

/******/ });

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
mix.js('resources/js/shop.js', 'public/js');

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

回答1件

ベストアンサー

404なのでファイルがないっていうエラーなのですが

GET http://127.0.0.1:8000/js/jquery-3.5.0.tgz.js net::ERR_ABORTED 404 (Not Found) edit:19
こっちのエラーは
<script type="text/javascript" src="/js/jquery-3.5.0.tgz.js"></script>
に対応しそうだからいいのですが、

GET http://127.0.0.1:8000/Shop/64/js/shop.js net::ERR_ABORTED 404 (Not Found) shop/edit.blade.php
のリンク設定がないんですよねぇ…

ruuutaさんの過去の質問
https://teratail.com/questions/264268

でhttp://127.0.0.1:8000/Shop/64/review/createこういうの書かれてるので、記載されているソース以外でそういうjsソースのリンクを張ってる感じがします。

とりあえずファイル存在チェックをしてみてください

※実際にブラウザに出してブラウザのソースを追記で貼り付けてもらったほうがいいかも
(って書いてるのでlayouts.appもかなぁ…一番最初に示されてるソースがedit.blade.phpであってるのかなぁ…

投稿2020/05/26 16:36

rururu3

総合スコア5545

退会済みユーザー

2020/05/27 03:33

ご回答ありがとうございます。こちらは<script type="text/javascript" src="/js/jquery-3.5.0.tgz.js"></script> 　　　　　　　　　　　↓ <script type="text/javascript" src="//code.jquery.com/jquery-3.5.0.min.js"></script> にしたらいけました。 https://www.buildinsider.net/web/jqueryref/001 このサイトを参考にしました。合っているかわかりませんが... またこれを<script src="{{ asset('js/shop.js') }}" defer></script> 　　　　　　　　　　　↓ <script src="{{ asset('/js/shop.js') }}" defer></script> にしたらいけました。今は無事非同期通信できています。また、layouts.appはめんどくさかったので消しました。色々教えてくださり誠にありがとうございます。とても助かりました。

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