jQueryファイル読み込みの誤解

jQueryファイル読み込みの誤解

カスタマイズ
2016/04/17 4
vanillaice (Akira)
vanillaice (Akira)
jQuery トラブル対処 初心者向け
sample

jQuery?ああ なんかページ内でいろいろやるやつね。スライダーとかページ内スクロールとか、要はJavascriptとかいうやつでしょう?

まあそうなんだけども (´・ω・`)
テンプレートカスタマイズで例えばそれこそスライダーを追加する、だとか、外部サイトのRSSを読み込んで表示させる、だとか。
色々「追加」をしていく際に jQueryライブラリ というのが一体なんなのかを知っておかないとよくありがちな間違いを犯すことになります。

jQueryでよくありがちな間違いとは?

よくありがちな間違い = ひとつのテンプレートにバージョンの異なるJqueryファイルがてんこもり

これからご説明ですがここで言う「プラグイン」とは「FC2のプラグイン(メールフォームとか最新記事とか)」という狭義ではなくweb一般のプラグインを指します。

自分で例えばスライダーを追加してみよう と思ったとき、大抵はその手の紹介サイトさんなんかを参照されますよね。するとこう書いてある。

まずhead内にjQuery本体を読み込み、続いてスライダーのJSファイルを読み込みます。

大抵そんな感じですよね。これはこれで正しいのですが、利用テンプレート内に既にjQueryファイルが含まれている場合には新たにjQueryを入れてはいけない という点。

そもそもjQueryとはなんなのか

URL中に /ajax/libs/jquery/数字/ の文字列を持つスクリプトファイル、この役割が一体なんなのか ですけれども。

Javascritp(じゃゔぁすくりぷと) というのは聞いたことがありますよね。数あるプログラミング言語のひとつです。
現在では各ブラウザに当たり前に組み込まれています。htmlやCSSでは表現しきれない凝った(複雑な)動きを実現することができたり、セキュリティ面でも一役買っています(個人情報入力時など)
「ウイルス感染経路になりやすいのは JAVA」
とよく目にするかと思いますが これはJavascriptとは全く別のものです。コーヒーから湯気が出てるマークのアレです。

じゃあ jQuery とはなんなのか。
Javascriptをもっと簡単に使えるようにするためのライブラリでありフレームワーク です。

フレームワークというのは簡単に言うと「枠組み」「骨組み」「設計」で、その枠組の中でのみ動作するもの と捉えれば良いと思います。
つまりjQueryのシステムや書式を使えるようにする車で言うとエンジン的な役割です。エンジンがかからなければ車は動きません。
本来のJavascript(以下 vanilla JSと称す)というのはとっても難解で素人ではとても手が出せる代物ではありません。
一方jQueryの記述の仕方というのは素人でも頑張ればなんとかなります。そのために開発されたようなものです。

* vanilla JS(ゔぁにらじぇいえす) = 通常のJavascriptのことをこう呼んだりします vanilla = なんてことない, とりたててどうってことない の意 私のアカウント名はここから来ています(余談)

車に例えましたが、車を動かすにはエンジンが一つあれば良いわけです(そうじゃないものもあるかもしれんが)
要するに jQueryファイルはテンプレート内にひとつあれば良い んですね。ひとつ入っていれば関連プラグインを動かせる準備は整います。 ところがハウツーを読むと「まずJqueryファイルを入れて...」なんて書いてあるもんだから プラグインひとつ追加する毎にひとつ入れてしまう方が意外と多く、その結果バージョン違いのファイルがいくつも混在してしまう ことがあります。
例えば

  • スライダー
  • ドロップダウンメニュー
  • 画像拡大スクリプト

この3つを入れたのでjQueryファイルが3つある!みたいな方がFC2ブログには実際多くいらっしゃいます。
FC2ブログテンプレートは制作自由度がかなり高いものですから、テンプレートによって仕様にばらつきがあります。
ただ最近リリースされているものについては公式・共有を含め、ほとんどがjQueryファイル導入済みではないかと思います。

  • Jqueryファイルは基本的にテンプレートひとつにひとつだけ
  • プラグインひとつにつきひとつづつ必要なわけではない

というのをまず知ってください。
言ってみりゃパソコンに於けるOSみたいなものです。OSひとつ入っていればブラウザも使えますしメールだって開けます。
ブラウザ用にWindows7ひとつ メール用にWindows8ひとつ DVD再生用にWindows10ひとつ...なんて必要は無いわけよ。

jQueryにはいくつものバージョンが存在します

ブラウザやOSと同じでjQueryにもバージョンが存在します。日々進化していますので当然っちゃー当然。
ここまで「ファイルはひとつだけ!」と書いてきましたが、バージョンが異なると動かないプラグイン というのも出てきます。
これはブラウザでもそうですよね。
jQueryは機能の削除や追加が新バージョンをリリースするごとに行われています。

そうなるとですね、「バージョン新しくなったら動かんなった... ( ;∀;)」という事態も起こりうるんですね。その場合どうするかは後述。

バージョン違いが複数あるとどうなるか

jQueryファイルの中身がごちゃ混ぜになってしまうということは起こりません。
htmlソース内でより後方に書いてあるものが前方の内容を上書きします。
3つのバージョンが存在すれば 最後の3つ目以前の2つのファイルについては全くの無駄になります。
ところが読み込み・内容解釈自体は行われますので ページの表示がやたらに遅くなる というわけです。

Q&Aでよくあるパターン

「もともとスライダーがひとつ入っていますが 別のスライダーを追加したところ、新しい方は動きますが古い方が動かなくなりました。新しい方を削除するとまた動くようになります。
どうすれば良いでしょうか」

ここまでの記事内容をご理解頂けた方はもう推測できるかと思います。

  • jQueryファイルが重複している
  • 新しい方のスライダーのためのJSファイルと同時に追加したjQueryファイルの方がバージョンが新しい
  • 古い方のスライダーで必要な機能が新しいバージョンのjQueryでは削除 or 改正されている

このぐらいはたぶんぱっと見当がつくかと。 こんな感じか↓

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js'></script>
<script src='//スライダー①.js'></script>

〜いろんな内容〜

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script>
<script src='//スライダー②.js'></script>

単なる例としてですよ emoji
こうしてプラグインと一緒にjQueryファイルがくっついてるのが大方のパターンです。
このソース内容とQ&Aを照らしあわせて導き出せるのは

  • スライダー①は 1.6.0では動く 2.2.3では動かない
  • スライダー②は 2.2.3では動く それ以前のバージョンでは動くか不明

理屈わかりますでしょうかね。「上書き」されているというのがわかるとこういう図式になることもわかりますよね。
じゃあどうするか、なんですけれど。

① 1.6.0以降 2.2.3までの間のバージョンで 双方が動かせるものを探す
これが一番です。共通で使えるものが見つかれば万々歳 それが一番良い。

② マージ(混合, 合成)する
共通で使えるファイルが見つからない場合

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
  var $160 = $.noConflict(true);
  (function($){
    $(function(){
      console.info("jQuery = " + $.fn.jquery);
    });
  })(jQuery);
  (function($){
    $(function(){
      console.info("$223 = " + $.fn.jquery);
    });
  })($160);
</script>

こうして異なるバージョン同士をmergeします。 めんどくさいね 実にめんどくさい (´・ω・`)
共通バージョンを探すのが先決。

で 実際にお困りの方(Q&Aでの質問者さん)に「バージョン確認しろー 重複は避けろー」ってなことをお伝えするのですが、そもそもJqueryファイルの意味を理解していないので伝わらないんですよ。
「だってあの有名サイトの手順どおりにやってるんだから...」
みたいな固定観念。それゆえちょろっと回答読んだだけで却下してしまいます。聞く耳を持たないというか。だから試しもしない人のなんと多いこと。
人間は激昂している時と思い込んでいる時は他人の言葉を理解することができないものでありますemoji
なので「ああ この人理解する気ねーな」と思ったらあとは答えず素通りすることにしています(微笑み)
文章でなんとなくわかるのよね (´・ω・`)

記述する場所

一般的には <head></head> の間 あるいは </body> の直前です。
JSというのはhtml内に記述があるとhtmlのパースを一旦中断してJS解釈に集中しますので、html内容の後方に書いた方がページの描画自体は早いという理屈になります(レンダリングの開始が速いため)
ただ使用するJSの種類や実行のタイミングの関係もありますので一概にはどちらがより良いとは言えません。
私の場合は大抵body終了タグの直前にまとめています。参考までに。

ともかくテンプレート内にjQueryファイルが存在するのかどうかをまず確認し、無ければ上記に記したいずれかの箇所に追加した上でプラグインの内容はそのファイルの に書きます。
ファイルよりも前にプラグインのファイルや実行コードを書いても動作しません。

まとめ

  • テンプレートでJqueryファイルが重複していないかチェックしましょう
  • 重複を前提としてプラグイン増やしたら元あるのが動かなくなった! な方は何をしようと一生動きませんので共存できるバージョン探し → 無ければマージ

jQueryファイルの意味と重複時の上書き事実を知っていれば1分で原因が解る。知らないと1日2日、下手すりゃ1週間経ってもわからずに結局諦める、なんてことも。ねー (´・ω・`)

それにしても全然関係ないけど最近集中力が保ちません。テンプレート制作はちょっと鈍足になるかもしれません。
それと「以下 vanilla JSと称す」とか言っちゃってそれ以降一度も出てこないという事実。

 4

There are no comments yet.
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2019/05/13 (Mon) 17:35
vanillaice (Akira)
Akira
To TOCの件 内緒さん

こんにちは。

まず確認です。そのTOCスクリプトは私が制作したもの「ではない」ですよね。

参考記事: 見出し目次を生成するTOCスクリプト
https://vanillaice000.blog.fc2.com/blog-entry-826.html

現在お使いのものは私が制作したわけではないので仕様は存じません。ただわかっているのは「jQueryファイルが必要」という点です。上記時記事内で提供しているコードはvanilla JS(ネイティブJS)なのでjQueryには依存しません。

で、第三者が制作したコードの修正等は致しませんので、仕様の確認もしていません。ただ今回の場合はjQueryファイルのバージョンは無関係だと思いますので、既に行った「マージ(合成)」も必要ありません。

現状の問題点
・「スムース」スクロールが効かない(瞬時移動してしまう)
・スクロールの頭出しが狂う

この2点で合ってますでしょうか。

-----
こちらはJSの実行順序の関係です。TOCスクリプトはhtml内容が全て表示されてからでないと実行できませんので、スムーススクロールよりも「後」に動作します。そのためテンプレートに設置しているスムーススクロールからは対象外になってしまいます。

①テンプレートのスムーススクロールJSに、TOCの移動を対象外にするよう明示
②TOCスクリプトJSにスムーススクロールを追加

テンプレート内の
a[href^="#"]
を検索すると1箇所あります。この文字列を
a[href^="#"]:not(#toc a)
に修正。

続いてTOCのスクリプト内容の </script> の直前に、テンプレートのスムーススクロールを複製します。一部修正の上で複製なので元の内容を削除しないようにしてください。
コピペするのは先程の
a[href^="#"]
も文字列を含む <scrip> 〜 </script> に挟まれている内容です。そして a[href^="#"] を
#toc a
に変更します。

以上です。
頭出しについてもこれで解消されるはずです。数字を45から75に変更した、とのことですがこれはデフォルト値に戻してください。

・TOCスクリプトがテンプレートのjQueryファイルよりも「後」になっていること
・jQueryファイルの重複がないこと(テンプレート内のもののみ)

この2点に気をつけてください。

2019/05/13 (Mon) 19:34
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2019/05/14 (Tue) 15:37
vanillaice (Akira)
Akira
To TOCの件 内緒さん(完了のご報告)

こんにちは。

まず、どのスクリプトを利用するかはユーザーさんの任意ですから全く問題ありません。
サポート範囲の確認だけなのでどうぞお気になさらず(笑)

-----
最初の手順
「TOCスクリプトの</script>の直前に複製〜」
については本来は実行コードではなく本体スクリプトの方だったんですが、本体コードが外部化されていますので今回はこれでも良いかな、と思います。説明が言葉足らずでした。ごめんなさい。

リンクの件はご自由になさってくださいね。お気遣いありがとうございます。
お疲れ様でした :)

2019/05/14 (Tue) 15:56

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ