Q&A
エラーの内容も書いてください
タイトルの通りなのですが、laravelのプロジェクトでjqueryのプラグインを使いたいのですが検索しても参考になるものが見つからなかったので質問させていただきます。
japanmapというプラグインを使おうとしています。
/js/jquery-3.4.1.min.jsと/js/japanmap/jquery.japan-map.min.jsはpublicディレクトリのjsフォルダに入っています。
jQuery自体はしっかりと動作するようですがプラグインのメソッドが使えません。
プラグインファイルを置く場所はpublicディレクトリではないのでしょうか。
どなたか知恵をお貸ししていただけたら幸いです。よろしくお願いします。
html
1<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script> 2<script type="text/javascript" src="/js/japanmap/jquery.japan-map.min.js"></script> 3<script> 4 $(function(){ 5 6 $("#map-container").japanMap({ 7 onSelect : function(data){ 8 alert(data.name); 9 } 10 }); 11 12 }); 13</script>
デベロッパーツールで見たエラーログはこのような感じです。
jQuery.Deferred exception: $(...).japanMap is not a function TypeError: $(...).japanMap is not a function at HTMLDocument.<anonymous> (http://192.168.33.10:8000/home:27:24) at e (http://192.168.33.10:8000/js/jquery-3.4.1.min.js:2:29453) at t (http://192.168.33.10:8000/js/jquery-3.4.1.min.js:2:29755) Uncaught TypeError: $(...).japanMap is not a function at HTMLDocument.<anonymous> (home:27) at e (jquery-3.4.1.min.js:2) at t (jquery-3.4.1.min.js:2)
htmlをクライアントに渡したあとに動作するものがなぜLaravel（サーバーサイド）は影響しないから
検索条件にLaravelを含めないでください
ありがとうございます。
ただ通常のlaravelを使わない環境だとしっかりと作動するのでlaravel内での操作を誤っていると考えられるため関連キーワードにlaravelを使わせていただきました。
回答2件
0
HTML
1<script type="text/javascript" src="/js/japanmap/jquery.japan-map.min.js"></script> 2 3 4から 5 6<script type="text/javascript" src="/js/jquery.japan-map.min.js"></script>
投稿2020/01/28 23:23
編集2020/01/28 23:59
総合スコア10429
（ごしごし）変更されてないように見える
ご指摘ありがとうございます。teratailのバグで反映されていなかったようでした。
CDN避ける人が多いのはなぜだろう
完全ローカルで開発ができないからとか（自分は、オフラインでも作業したいからローカルに入れてる
業務のばあいだとCDNが死ぬばあいの担保が出来ない
業務要件やオフライン環境なら私も自前に置くのですけどそうでないのに自分のものでないのに自前に置こうとしてトラブってる人多いなと思って。そこで悩むのもったいないと感じての嘆きでした
回答ありがとうございます。
これはつまりにjapanmapフォルダを作らずに直接public/jsにファイルを置くということでしょうか。
今試したところ結果は変わりませんでした。
> jQuery自体はしっかりと動作するようですがプラグインのメソッドが使えません。
jQuery(function(){
alert('Hello');
});
でアラートは出ますか？
はい、しっかりと動作しています。
0
Laravelでって部分で回答すると
まずファイルをpublic以下に置いてscriptで読み込むような使い方はやめて欲しい。
LaravelではjQueryもnpmとwebpack通して使う。
6.0以降はデフォルトでは消えてるけどlaravel/ui追加すれば以前と同じになる。
https://readouble.com/laravel/6.x/ja/frontend.html
これでjQuery使える所まで準備できたらjapan-map
https://github.com/takemaru-hirai/japan-map
2014で止まってnpmにも対応してないのは使わないほうがいいとは思うけどどうしても使うなら
resources/js/jquery.japan-map.min.jsにファイルを置いて
resources/js/bootstrap.jsで読み込む。
require('./jquery.japan-map.min.js');
古すぎてこれでは使えなかったら諦めてpublicに置くしかないけど。
Laravel以外ならhtmlにscriptで読み込んでいいけどLaravelでは不可。
投稿2020/01/29 03:42
総合スコア10377
回答ありがとうございます。
バージョンはLaravel Framework 5.8.36を使用しています。
その場合、laravel/uiを追加せずにjqueryプラグインを使うことが出いますでしょうか。
たった今その方法で試してみたら成功しました。ありがとうございます。
ただ、jqueryそのものは質問させていただいた時と同じでpublic/jsに置いてあり、bladeページ内の<head>の中で<script src="/js/japanmap/jquery.japan-map.min.js"></script>で呼び出してます。
しっかりと動作しておりますが、この状況に何か問題はありますでしょうか。
あなたの回答
tips
プレビュー
