Q&A
jquery-uiのバージョンをご確認し、記載お願いします。
バージョン不都合の可能性もあるっちゃあるので。
CDNに変えると動くとのことなので、ダウンロードしてきた（のでしょうか？）jQueryファイルの中に原因があるとは思いますが、一応確認です。
解決したい問題
今、jQueryとjQuery-uiを使ったコードを書いています。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <script src="js/jquery-3.4.1.min.js" type="text/javascript"></script> 6 <script src="js/jquery-ui.js" type="text/javascript"></script> 7 <link rel="stylesheet" href="static/jquery-ui.css"> 8 <link href="static/bootstrap.min.css" rel="stylesheet" /> 9 <script type="text/javascript" src="js/data.js" async></script> 10 <script type="text/javascript" src="js/fft-data.js" async></script> 11 <script type="text/javascript" src="js/draw.js" async></script> 12 <title>Graph Viewer</title> 13 <link rel="stylesheet" href="static/style.css" /> 14 </head> 15 <body> 16 <div class="container"> 17 <div class="col-md-12"> 18 <h1>Graph Viewer</h1> 19 </div> 20 <div class="col-md-12 mb-5"> 21 <label> 22 <span class="btn btn-primary" id="upload"> 23 Choose File 24 <input type="file" id="upload-file" style="display: none" /> 25 </span> 26 </label> 27 <input 28 type="submit" 29 class="btn btn-primary" 30 id="draw-graph" 31 value="Draw" 32 /> 33 <script type="text/javascript" src="js/main.js" async></script> 34 </div> 35 <div class="col-md-6 graphs"> 36 <h3>Row Data</h3> 37 <canvas id="data-row"> </canvas> 38 </div> 39 <div class="col-md-6 graphs"> 40 <h3>Analyzed Data</h3> 41 <canvas id="data-ana"> </canvas> 42 </div> 43 <div class="slider-wrapper col-md-6"> <!-- ここでjquery-uiを使う --> 44 <div>cut data point from right:</div> 45 <div id="slider"></div> 46 <div id="slidervalue"></div> 47 </div> 48 </div> 49 </body> 50</html> 51
jsフォルダにここからダウンロードしたjQueryを入れています。これを実行すると、
Uncaught ReferenceError: jQuery is not defined at jquery-ui.js:14 at jquery-ui.js:16 main.js:28 Uncaught ReferenceError: $ is not defined at main.js:28
というエラーが出て、jQueryがうまく読み込めていない状況です。jQuery-3.4.1.mi.jsが見つからないというエラーは出ていないので、見つけられているとは思うのですが、、、。jQueryの部分をCDNに変えるとちゃんと動きます。
JavaScript初心者ですがよろしくお願いします。
追記
jquery-uiのバージョンはv1.12.1です。
また、ネットワークのない環境での使用を考えているので、CDNを使わない方法をお願いいたします。
回答にするか悩んだのですが、jQuery本体に手を入れることがないのでしたらCDNでいいように思います。
手を入れることがないファイルが自サーバーにあるのは容量の無駄にもなるので。
@miyabi_takatsuk 様
jquery-ui はv1.12.1です。
@mts10806様
ネットワークのない環境での使用を考えているので(electronでのパッケージ化)、どうしてもダウンロードする必要があります、、、。
要件として質問本文に追記願います。
https://qiita.com/pirosikick/items/72d11a8578c5c3327069
↑これは当てはまりますか？
Chrome を使っているのであれば、Network タブを開いてエラーが出るときにどのような順で読まれたか見てもらえるでしょうか？
Lhankor_Mhyさん>なるほど、そこは見落としていました・・・！
質問者さん、質問本文にElectronでパッケージ化しているということも、記載お願いします。
回答4件
0
自己解決
miyabi_takatsukさんのコメントを見て、jqueryとjquery-uiのバージョンを確認してみたところ、どうやらjquery-ui 1.12.1はjquery-3.4.1には対応していないことが原因であることがわかりました。jqueryを1.9.1まで落としたところ正常に動きました。
多くの回答をいただきありがとうございます。
投稿2019/05/29 04:36
総合スコア439
なるほど・・・。
私自身、大変に勉強になりました。
ありがとうございます。
しかし、もしかしたら、パッケージ後のファイルで、読み込まれない可能性がありますので、（Lhankor_Mhyさんの質問修正依頼コメントに記載のURL要参照）
そこも確認した方がいいかも・・・。
「CDNに変えるとちゃんと動きます」は一体なんだったのでしょう？
それは、私の凡ミスで、CDNで読み込んでいたほうがバージョンが低かったことがわかりました。すみません
0
jquery-uiが「jQuery is not defined」と返してきているなら
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
のpath指定が間違えているか、提示されている（もしくは提示されていない）
なんらかのjsが競合処理をしているかではないでしょうか？
投稿2019/05/29 02:34
総合スコア117601
ブラウザでhtmlを見て、js/jquery-3.4.1.min.jsにアクセスするとちゃんと表示されるので、パスはあっていると考えています。競合についてはよく分からないのですが、CDNだと表示されてダウンロードだとだめというのは競合の結果として起こりうるのでしょうか？
ただしくダウンロードできていないという可能性もあります。
CDNでソースをブラウザ上に開き、コピペでローカルの
jQueryに上書きして保存してみてはどうでしょうか？
あと、
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
の間に
<script>console.log(jQuery);</script>
を挟んでちゃんと読めているか確認するとか・・
0
ファイルを正しく配置して読み込めない初心者の方であれば
以下のようにCDNで読み込むことをオススメします。
この方法ならオンラインであれば確実に読み込み可能です。
HTML
1<!-- 現在のコード --> 2<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script> 3<script src="js/jquery-ui.js" type="text/javascript"></script> 4<link rel="stylesheet" href="static/jquery-ui.css"> 5<link href="static/bootstrap.min.css" rel="stylesheet" /> 6 7<!-- このように変更する --> 8<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/> 9<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> 10<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 11<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
投稿2019/05/29 03:41
総合スコア2939
0
jQueryファイルをローカルにおく必要があるとのことなので、
含め、回答させていただきます。
ご指摘をいただきましたので、回答を修正いたします。
改めて調査いたしましたところ、src属性にて、外部ファイルを読み込む場合、
読み込みの速さに関係なく、HTMLに書いた順に処理が行われることがわかりました。
よって、本回答の前半の可能性は必然なくなります。
なので、本回答の後半から、ご参考いただければと思います。
誤回答、大変に失礼しました。
-------- 誤回答ここから --------
原因はおそらく、
jQueryファイルの内容が完全に読み込まれる前に、jQuery-uiの読み込みが開始されているかと思います。
基本的に、script要素で外部ファイルを読み込みをする場合、
同期的に上から順番に読み込まれるので、本質問の現象はおきませんが、
もしかしたら、jQueryは、レンダリングブロックを防ぐために、非同期で処理を読み込むようになっているかもしれません。
そうであった場合、CDNだと動く理由は明快で、CDNは読み込みが速いものなので、下手しい、同サーバー上のローカルファイルより読み込みが速くなっているのかもしれません。
ですが、上記が原因でない場合、
-------- 誤回答ここまで --------
そのjQueryファイルになんらかの原因があるので、
本家サイトより、再度ダウンロードを行い、ファイルを置き直すのがよろしいかと思います。
（コピペで、はっつけた場合など、何かコピペ漏れがある可能性もあります）
それでもうまくいかないなら、あまりよろしくないですが、HTMLに直接jQueryの内容書いちゃいましょう。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <script type="text/javascript"> 6 // ここにjQueryの中身を打っ込む 7 </script> 8 <script src="js/jquery-ui.js" type="text/javascript"></script> 9 <link rel="stylesheet" href="static/jquery-ui.css"> 10 <link href="static/bootstrap.min.css" rel="stylesheet" /> 11 <script type="text/javascript" src="js/data.js" async></script> 12 <script type="text/javascript" src="js/fft-data.js" async></script> 13 <script type="text/javascript" src="js/draw.js" async></script> 14 <title>Graph Viewer</title> 15 <link rel="stylesheet" href="static/style.css" /> 16 </head> 17 <body> 18 <div class="container"> 19 <div class="col-md-12"> 20 <h1>Graph Viewer</h1> 21 </div> 22 <div class="col-md-12 mb-5"> 23 <label> 24 <span class="btn btn-primary" id="upload"> 25 Choose File 26 <input type="file" id="upload-file" style="display: none" /> 27 </span> 28 </label> 29 <input 30 type="submit" 31 class="btn btn-primary" 32 id="draw-graph" 33 value="Draw" 34 /> 35 <script type="text/javascript" src="js/main.js" async></script> 36 </div> 37 <div class="col-md-6 graphs"> 38 <h3>Row Data</h3> 39 <canvas id="data-row"> </canvas> 40 </div> 41 <div class="col-md-6 graphs"> 42 <h3>Analyzed Data</h3> 43 <canvas id="data-ana"> </canvas> 44 </div> 45 <div class="slider-wrapper col-md-6"> <!-- ここでjquery-uiを使う --> 46 <div>cut data point from right:</div> 47 <div id="slider"></div> 48 <div id="slidervalue"></div> 49 </div> 50 </div> 51 </body> 52</html>
そうすれば、読み込みはほぼほぼjQueryが先になるはずです。
投稿2019/05/29 02:50
編集2019/05/29 03:49総合スコア9555
その原因はちょっとありえないと思いますので、実例や信頼できるドキュメントなどが出てくるまでマイナス評価させていただきたく。
miyabi_takatsukさんが正しかった、という結果になりましたら平謝りしますので、どうかご容赦を。
Lhankor_Mhyさん>ご指摘ありがとうございます。
再度私自身調査いたします。
Lhankor_Mhyさん>調査いたしましたところ、下記の出典がありました。
https://analogic.jp/external-js-execute-timing/
読み込みの速度は関係なく、処理自体は、順番になされるようですね・・・。
回答を修正いたします。
修正ありがとうございます。評価を戻しました。
Lhankor_Mhyさん>こちらこそ大変にありがとうございます。
基本的な部分ですが重要な部分を改めて勉強させていただくことができました。
もしかして、いつぞやかの業務で読み込みにasync使われてるソースに出会われたことがあるんでしょうかヒィ
hentaimanさん>度々ありますw
もしかしたら、その記憶が原因もあるかもです。
しかし、私自身のコメントの出典の内容もどっかで見たこともあるきがするので、なにかと記憶ごっちゃになってたこともあるかも。
ようは、記憶に頼らずソース自分で動かせって話なんですよね・・・。
いつも自分でそう言っといてお恥ずかしい 汗
あなたの回答
tips
プレビュー
