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

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

ただいまの
回答率

88.78%

jQueryが認識されない

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 1,393

Yhaya

score 370

解決したい問題

今、jQueryとjQuery-uiを使ったコードを書いています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <link rel="stylesheet" href="static/jquery-ui.css">
    <link href="static/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="js/data.js" async></script>
    <script type="text/javascript" src="js/fft-data.js" async></script>
    <script type="text/javascript" src="js/draw.js" async></script>
    <title>Graph Viewer</title>
    <link rel="stylesheet" href="static/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="col-md-12">
        <h1>Graph Viewer</h1>
      </div>
      <div class="col-md-12 mb-5">
        <label>
          <span class="btn btn-primary" id="upload">
            Choose File
            <input type="file" id="upload-file" style="display: none" />
          </span>
        </label>
        <input
          type="submit"
          class="btn btn-primary"
          id="draw-graph"
          value="Draw"
        />
        <script type="text/javascript" src="js/main.js" async></script>
      </div>
      <div class="col-md-6 graphs">
        <h3>Row Data</h3>
        <canvas id="data-row"> </canvas>
      </div>
      <div class="col-md-6 graphs">
        <h3>Analyzed Data</h3>
        <canvas id="data-ana"> </canvas>
      </div>
      <div class="slider-wrapper col-md-6">  <!-- ここでjquery-uiを使う -->
        <div>cut data point from right:</div>
        <div id="slider"></div>
        <div id="slidervalue"></div>
      </div>
    </div>
  </body>
</html>


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/05/29 12:47

    https://qiita.com/pirosikick/items/72d11a8578c5c3327069

    ↑これは当てはまりますか?

    キャンセル

  • x_x

    2019/05/29 12:53

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

    キャンセル

  • miyabi_takatsuk

    2019/05/29 12:55

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

    キャンセル

回答 4

+1

jquery-uiが「jQuery is not defined」と返してきているなら

<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>

のpath指定が間違えているか、提示されている(もしくは提示されていない)
なんらかのjsが競合処理をしているかではないでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/29 11:40

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

    キャンセル

  • 2019/05/29 12:11

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

    キャンセル

  • 2019/05/29 12: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>
    を挟んでちゃんと読めているか確認するとか・・

    キャンセル

check解決した方法

0

miyabi_takatsukさんのコメントを見て、jqueryとjquery-uiのバージョンを確認してみたところ、どうやらjquery-ui 1.12.1はjquery-3.4.1には対応していないことが原因であることがわかりました。jqueryを1.9.1まで落としたところ正常に動きました。

多くの回答をいただきありがとうございます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/29 13:40

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

    キャンセル

  • 2019/05/29 13:54

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

    キャンセル

  • 2019/05/29 14:22

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

    キャンセル

  • 2019/05/29 14:28

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

    キャンセル

-1

jQueryファイルをローカルにおく必要があるとのことなので、
含め、回答させていただきます。

ご指摘をいただきましたので、回答を修正いたします。
改めて調査いたしましたところ、src属性にて、外部ファイルを読み込む場合、
読み込みの速さに関係なく、HTMLに書いた順に処理が行われることがわかりました。
よって、本回答の前半の可能性は必然なくなります。
なので、本回答の後半から、ご参考いただければと思います。
誤回答、大変に失礼しました。

-------- 誤回答ここから --------
原因はおそらく、
jQueryファイルの内容が完全に読み込まれる前に、jQuery-uiの読み込みが開始されているかと思います。
基本的に、script要素で外部ファイルを読み込みをする場合、
同期的に上から順番に読み込まれるので、本質問の現象はおきませんが、
もしかしたら、jQueryは、レンダリングブロックを防ぐために、非同期で処理を読み込むようになっているかもしれません。
そうであった場合、CDNだと動く理由は明快で、CDNは読み込みが速いものなので、下手しい、同サーバー上のローカルファイルより読み込みが速くなっているのかもしれません。
ですが、上記が原因でない場合、
-------- 誤回答ここまで --------

そのjQueryファイルになんらかの原因があるので、
本家サイトより、再度ダウンロードを行い、ファイルを置き直すのがよろしいかと思います。
(コピペで、はっつけた場合など、何かコピペ漏れがある可能性もあります)

それでもうまくいかないなら、あまりよろしくないですが、HTMLに直接jQueryの内容書いちゃいましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript">
    // ここにjQueryの中身を打っ込む
    </script>
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <link rel="stylesheet" href="static/jquery-ui.css">
    <link href="static/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="js/data.js" async></script>
    <script type="text/javascript" src="js/fft-data.js" async></script>
    <script type="text/javascript" src="js/draw.js" async></script>
    <title>Graph Viewer</title>
    <link rel="stylesheet" href="static/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="col-md-12">
        <h1>Graph Viewer</h1>
      </div>
      <div class="col-md-12 mb-5">
        <label>
          <span class="btn btn-primary" id="upload">
            Choose File
            <input type="file" id="upload-file" style="display: none" />
          </span>
        </label>
        <input
          type="submit"
          class="btn btn-primary"
          id="draw-graph"
          value="Draw"
        />
        <script type="text/javascript" src="js/main.js" async></script>
      </div>
      <div class="col-md-6 graphs">
        <h3>Row Data</h3>
        <canvas id="data-row"> </canvas>
      </div>
      <div class="col-md-6 graphs">
        <h3>Analyzed Data</h3>
        <canvas id="data-ana"> </canvas>
      </div>
      <div class="slider-wrapper col-md-6">  <!-- ここでjquery-uiを使う -->
        <div>cut data point from right:</div>
        <div id="slider"></div>
        <div id="slidervalue"></div>
      </div>
    </div>
  </body>
</html>


そうすれば、読み込みはほぼほぼjQueryが先になるはずです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/29 12:57

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

    キャンセル

  • 2019/05/29 13:40

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

    キャンセル

  • 2019/05/29 13:47

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

    キャンセル

-3

ファイルを正しく配置して読み込めない初心者の方であれば
以下のようにCDNで読み込むことをオススメします。
この方法ならオンラインであれば確実に読み込み可能です。

<!-- 現在のコード -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="static/jquery-ui.css">
<link href="static/bootstrap.min.css" rel="stylesheet" />

<!-- このように変更する -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る