質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

4528閲覧

jQueryが認識されない

Yhaya

総合スコア439

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

3クリップ

投稿2019/05/29 02:15

編集2019/05/29 02:36

解決したい問題

今、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を使わない方法をお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/05/29 02:24

jquery-uiのバージョンをご確認し、記載お願いします。 バージョン不都合の可能性もあるっちゃあるので。 CDNに変えると動くとのことなので、ダウンロードしてきた(のでしょうか?)jQueryファイルの中に原因があるとは思いますが、一応確認です。
m.ts10806

2019/05/29 02:26

回答にするか悩んだのですが、jQuery本体に手を入れることがないのでしたらCDNでいいように思います。 手を入れることがないファイルが自サーバーにあるのは容量の無駄にもなるので。
Yhaya

2019/05/29 02:31

@miyabi_takatsuk 様 jquery-ui はv1.12.1です。
Yhaya

2019/05/29 02:33

@mts10806様 ネットワークのない環境での使用を考えているので(electronでのパッケージ化)、どうしてもダウンロードする必要があります、、、。
m.ts10806

2019/05/29 02:34

要件として質問本文に追記願います。
x_x

2019/05/29 03:53

Chrome を使っているのであれば、Network タブを開いてエラーが出るときにどのような順で読まれたか見てもらえるでしょうか?
miyabi_takatsuk

2019/05/29 03:55

Lhankor_Mhyさん>なるほど、そこは見落としていました・・・! 質問者さん、質問本文にElectronでパッケージ化しているということも、記載お願いします。
guest

回答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

Yhaya

総合スコア439

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/05/29 04:40

なるほど・・・。 私自身、大変に勉強になりました。 ありがとうございます。
miyabi_takatsuk

2019/05/29 04:54

しかし、もしかしたら、パッケージ後のファイルで、読み込まれない可能性がありますので、(Lhankor_Mhyさんの質問修正依頼コメントに記載のURL要参照) そこも確認した方がいいかも・・・。
yambejp

2019/05/29 05:22

「CDNに変えるとちゃんと動きます」は一体なんだったのでしょう?
Yhaya

2019/05/29 05:28

それは、私の凡ミスで、CDNで読み込んでいたほうがバージョンが低かったことがわかりました。すみません
guest

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

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yhaya

2019/05/29 02:40

ブラウザでhtmlを見て、js/jquery-3.4.1.min.jsにアクセスするとちゃんと表示されるので、パスはあっていると考えています。競合についてはよく分からないのですが、CDNだと表示されてダウンロードだとだめというのは競合の結果として起こりうるのでしょうか?
yambejp

2019/05/29 03:11

ただしくダウンロードできていないという可能性もあります。 CDNでソースをブラウザ上に開き、コピペでローカルの jQueryに上書きして保存してみてはどうでしょうか?
yambejp

2019/05/29 03:21

あと、 <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> を挟んでちゃんと読めているか確認するとか・・
guest

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

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/05/29 03:31

その原因はちょっとありえないと思いますので、実例や信頼できるドキュメントなどが出てくるまでマイナス評価させていただきたく。 miyabi_takatsukさんが正しかった、という結果になりましたら平謝りしますので、どうかご容赦を。
miyabi_takatsuk

2019/05/29 03:33

Lhankor_Mhyさん>ご指摘ありがとうございます。 再度私自身調査いたします。
miyabi_takatsuk

2019/05/29 03:43

Lhankor_Mhyさん>調査いたしましたところ、下記の出典がありました。 https://analogic.jp/external-js-execute-timing/ 読み込みの速度は関係なく、処理自体は、順番になされるようですね・・・。 回答を修正いたします。
Lhankor_Mhy

2019/05/29 03:50

修正ありがとうございます。評価を戻しました。
miyabi_takatsuk

2019/05/29 03:57

Lhankor_Mhyさん>こちらこそ大変にありがとうございます。 基本的な部分ですが重要な部分を改めて勉強させていただくことができました。
hentaiman

2019/05/29 04:40

もしかして、いつぞやかの業務で読み込みにasync使われてるソースに出会われたことがあるんでしょうかヒィ
miyabi_takatsuk

2019/05/29 04:47

hentaimanさん>度々ありますw もしかしたら、その記憶が原因もあるかもです。 しかし、私自身のコメントの出典の内容もどっかで見たこともあるきがするので、なにかと記憶ごっちゃになってたこともあるかも。 ようは、記憶に頼らずソース自分で動かせって話なんですよね・・・。 いつも自分でそう言っといてお恥ずかしい 汗
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問