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

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

ただいまの
回答率

90.35%

  • jQuery

    7090questions

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

  • jQueryプラグイン

    539questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

  • jQuery UI

    167questions

    jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQueryのヘッダでの記述について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 586

Naggy

score 24

質問したいこと

jQueryを使い始めた初心者です。
jQueryやそのプラグイン、jQuery UIの使い方として、scriptを指定することが必須だと思います。
しかし、プラグインを入れることで他のjavascriptが作動しなくなることがあります。
例えば、下の例ならbxsliderを入れることでjQuery UIを使ったindex.jsがうまく動きませんでした。

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="./index.js"></script>

<link href="./jquery.bxslider.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="./jquery.bxslider.min.js"></script>

</head>


例えば、上記のコードだと、下から2番目の

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 


を取り除くことでうまく作動したのですが、なぜ動かなかったのかがわかりません。

そこで、教えていただきたいことがあります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
を記入することでどういう役割を果たしているのか、

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
で違うverの記述のものが重複することで不具合はあるのか、

1番上のコードの記述の中で、他におかしな点はあるか、また、それはなぜか。

を教えていただきたいのです。

よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

複数のバージョンのJqueryを読み込む理由がわかりません。
当然不具合にもつながるでしょう。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
を記入することでどういう役割を果たしているのか、

>>1.8.2バージョンのJqueryを読み込んでいます。

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 
と 
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js 
で違うverの記述のものが重複することで不具合はあるのか、

>>不具合は起きます。

おそらく、プラグイン使用例のサイトからコピペして、結果複数バージョンのJqueryを読み込んでいるのでしょう。
Jqueryは1ページにつき1つのバージョンを1回だけ読み込みます。
仮に複数の「Jqueryに依存したプラグイン」を同ページ内で使用する場合は、
使用する全てのプラグインが許容するバージョンのJqueryを1回だけ読み込みます。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/02 08:15

    ご回答ありがとうございます。なんとなく予想している通りでした。
    >おそらく、プラグイン使用例のサイトからコピペして、結果複数バージョンのJqueryを読み込んでいるのでしょう。
    その通りでして、プラグインはそのverのjQueryにだけ依存しているのか、それ以外のverでも対応しているのかが分からなかった次第です。

    ところで、jQueryを読み込む役割を果たしていることは理解できたのですが、はじめの2行の
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    と、次の2行の
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    ではjQueryとjQuery UIを読み込んでいる先のドメインが違っていますが、ここでも重複しており、不具合が発生する可能性があると考えてよいのでしょうか。
    それともhttp://ajax.googleapis.com/とhttps://code.jquery.com/では別物として考え、重複があっても構わないのでしょうか。

    キャンセル

  • 2017/03/02 12:01 編集

    これは、「何処」から「どのバージョン」の「何」を読み込んでいるのかという考えで、
    上の二行では「//ajax.googleapis.com/ajax/libs/」から、JqueryとJqueryUiを読み込んでいる。
    下の二行では「https://code.jquery.com」から読み込んでいるわけで、
    読み込み元は違えど、複数のバージョンの同プラグインを読み込むべきではないです。
    ※httpからか、httpsからか、そのどちらでも、と3通りの読み込み方をしているのです。

    この部分は、自サーバー上に上記ファイルを置いて読み込んでも構いませんし、
    そもそも、script srcにはどういった意味があるのか?を学ぶべきです。

    例えば使いたいプラグインがJqueryの1.8.7に対応と書かれていたとします。
    この場合、作成者はJquery1.8.7での動作を確認したという意味でして、
    仮にプラグインの中で1.8.7以前にはなかった機能を使用していれば、1.8.7以前のJqueryでは当然動きません。
    また、1.8.8以降のJqueryでも動作は保証されないと言う意味です。
    プラグインを使う際にはそれらを考慮した上で選択し、同ページ内で読み込むプラグイン全てで動作確認が取れたバージョンのJqueryを読み込むべきです。

    キャンセル

  • 2017/03/02 13:34

    わかりやすい説明で理解できました。
    また、初歩的な質問すぎて申し訳有りませんでした。
    大方予想していた通りだったのですが、自分の理解と実際では、実はこういう部分だけは例外でこういう記述が特別必要だという事態に出くわすことがあるので、確認することができてよかったです。
    ありがとうございました!

    キャンセル

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

  • jQuery

    7090questions

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

  • jQueryプラグイン

    539questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

  • jQuery UI

    167questions

    jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。