The other way round

ARTICLE PAGE

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

author photo

Byvanillaice (Akira)

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

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

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

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

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

まずhead内にJquery本体を読み込み 続いてスライダーのJSを読み込みます


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


大抵こんな感じですよね
これはこれで正しいのですが
言われるがままに書いてはダメです


Jqueryファイルとはなんぞや


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

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

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

フレームワークというのは簡単に言うと「枠組み」「骨組み」「設計」
"その枠組の中でのみ動作するもの"
と捉えれば良いと思います
本来のJavascript(以下 vanilla JSと称す)というのはとっても難解でして
素人ではとても手が出せる代物ではありません
一方Jqueryの記述の仕方というのは 頑張ればなんとかなりそうな雰囲気を醸しております(笑)

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

Jqueryファイルが必要なのは
Jqueryの枠組みを使えるようにするため
ということになります

ですから
Jqueryファイルはひとつあれば良い
んです (´・ω・`)
ひとつ入っていればJqueryに関連するプラグインを動かせる準備は整います
ところがハウツーを読むと
「まずJqueryファイルを入れて...」
なんて書いてあるもんだから プラグインひとつ追加する毎にひとつ入れてしまう方が多いんですね
バージョン違いのファイルをいくつもいくつもテンプレートに追加してしまうんです
例えば

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

この3つを入れたので Jqueryファイルが3つある!
みたいな方が結構多いんです(笑)
もっと言うと FC2で配布されているテンプレートで最近のものは
既にJquery本体が導入されている と思った方が良いですね
動きがリッチ&ゴージャスなものはもう間違いなく最初から入ってます
つまりそもそもが 追加する必要が無いんです

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

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


Jqueryのバージョン


ブラウザやOSと同じで Jqueryにもバージョンが存在します
日々進化しておりますので当然っちゃー当然
ここまで「ファイルはひとつだけ!」
と書いてきましたが
バージョンが異なると動かないプラグイン
というのも出てきます
これはブラウザでもそうですよね わかりやすくIEを説明に使いますが
alpha opacity などという装飾がIEにはありました(懐かしいな)
これはIE8あたりではバンバン使われていましたが 現在最新(つっても古いが)のIE11では動作しません
Microsoftが廃棄したからです
互換設定を入れれば見られますけどね (´・ω・`)
Jqueryでも 機能の削除や追加が新バージョンをリリースするごとに行われています

と こうなるとですね
バージョン新しくなったら動かんなった... ( ;∀;)
ってのも起こるんですね これ
その場合どうするかは後述


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


Jqueryファイルの内容がごちゃ混ぜになってしまう
ということは起こりません
一番後に書いてあるものが適用されます
3つのバージョンが存在すれば 最後の3つ目以前の2つのファイルについては
全くの無駄
ってことになります
ところが読み込み・内容解釈自体は行われますので
ページの表示が無駄に遅くなる
というわけです
最後のファイルだけが適用されるのはそれまで読み込んだ内容に対して 上書きが行われるからです

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

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

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

・Jqueryファイルが重複してるんだろうなー
・新しい方のスライダーと一緒に追加したJqueryファイルの方がバージョンが新しいんだろうなー
・古い方のスライダーで必要な機能が新しいファイルの方では削除されてるんやろなー

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

<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と称す」とか言っちゃって
それ以降一度も出てこないという事実
関連記事

Comments 0

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
利用上のお願い (3)
ご質問の前に (2)
よくあるご質問 (1)
FC2不具合情報 (15)
割と重要なお知らせ (34)
テンプレート (68)
ブログ内限定配布 (6)
リリーステンプレート早見表 (1)
テンプレート固有機能説明 (1)
配布終了・旧作 (5)
テンプレ不具合・修正など (57)
カスタマイズ (90)
SNS (5)
FC2ブログのあれこれ (21)
webのあれこれ (8)
装飾枠 (3)
装飾枠使い方とお願いごと (1)
雑記 (32)
洋楽 (103)
50 Cent (1)
Akon (1)
All American Reject (1)
Amy Winehouse (1)
Andain (1)
A Perfect Circle (1)
Aura Dione (1)
Balint Adam (1)
Billy Talent (1)
Bliss (1)
Boyce Avenue (1)
Breaking Benjamin (3)
Breathe Carolina (1)
Catfish And The Bottlemen (0)
Damien Rice (2)
Danny Elfman (1)
Dave Matthews Band (1)
David Lee Roth (1)
Death Cab For Cutie (1)
Diary Of Dreams (2)
Digital Summer (1)
Disturbed (3)
Drowning Pool (1)
Eminem (1)
Five For Fighting (1)
Flo Rida (2)
Fort Minor (1)
Get Scared (2)
Goodnight Nurse (1)
Gotye (1)
Hoobastank (1)
InMe (1)
Ivy (1)
Jamiroquai (3)
Jeniffer Lopez (3)
Jet (1)
Kelly Clarkson (1)
Kelly Sweet (0)
Kula Shaker (1)
Late night almuni (4)
Led Zeppelin (1)
Lenny Kravitz (0)
Limp Bizkit (3)
Linkin Park (1)
Lorde (1)
Lou Reed (2)
Magic! (1)
Maroon 5 (1)
Michiko (1)
Mindless Self Indulgence (1)
Mindy Gledhill (0)
Miss Jane (1)
Muse (2)
N.E.R.D. (1)
Nickelback (1)
Nirvana (1)
Oasis (1)
Panic! At The Disco (1)
Papa Roach (1)
Pharrell Williams (1)
Radiohead (1)
Rage Against The Machine (1)
Red (1)
Red Hot Chili Peppers (3)
Rhye (2)
Rumer (1)
Sade (1)
Sarah Brightman (1)
Shakira (1)
Sixpense None The Richer (0)
Soulja Boy (1)
Steven Cooper (1)
Sting (1)
Sum 41 (2)
Taio Cruz (1)
The Fratellis (0)
The Pretty Reckless (1)
The Weepies (1)
Three Days Grace (1)
Tom Waits (2)
Travie McCoy ft. Bruno Mars (1)
TRUSTcompany (1)
Ty Stone (1)
U2 (1)
Westlife (1)
未分類(個人的テスト等) (48)