初心者がjQuery導入前に知っておくと役立つ知識

jQuery, WEB制作

WEB制作において動きのあるページを表現するのに非常に役立つjavascriptライブラリの一つjQuery。今ではjQueryを使っていないサイトは殆ど見受けられなくなるほど使われています。

これからjQueryを使ってみようとする方に向け、コードを書き始める前にまず、知っておくと役立つ知識をまとめてみました。

スポンサーリンク

jQueryとは

jQuery

ブラウザ上で動作するjavascriptライブラリの一つ。
ライブラリとは汎用性のある複数のコードをまとめたもの。

特にjQueryは学習コストが低く、HTMLやCSSを把握していれば直感的に分かるコードの記述で動作する。

javascriptのネイティブなコードでjQueryの動作を実現する事も出来るが、クロスブラウザ対策等も考慮するとコードの記述が非常に長くなってしまう。

下記のコードはどちらも同じ動作をするものです。
jQueryを使えば以下のような記述も大分省略して書ける。

// javascriptでの記述

i=0
  function img_effect(){
    i++;
    document.getElementById("img").style.opacity = i/100;
    document.getElementById("img").filters['alpha'].opacity = i;
    if (i >= 100){
      clearInterval(mt);
    }
  }

// jQueryでの記述
(function ($) {
    $("要素名").fadeIn(3000);
}(jQuery));

jQuery1,x系と2.x系

現在jQueryは1.x系と2.xが同時リリースされており、今後もそれぞれで同時に最新版がリリースされていきます。

WEBサイトにjQueryを導入するとき、違いを知っておかないと予期せぬエラーに遭遇してしまう事になるので、違いを把握しておきましょう。

1.x系はIE8以前をサポートする
レガシーブラウザ向けのバージョンであり、その為ファイルサイズや動作も2.xに比べ劣る。

2.x系はIE8含む以下のサポートを切り捨てている。
IE6,7,8の対応コードが含まれていないため、ファイルサイズの縮小、動作の高速化が実現されています。

バージョン1.9以降での注意点

恐らく一般的なWEBサイトでは、まだIE8を切り捨てるわけには行かないので、1.x系を使う場合が多いと思います。但し1.9以降のバージョンではAPIの排除やコードの変更が多くなされているので、1.9以前で使えていたコードやplugin等が使用できなくなるパターンがあります。

【どうしてもこのplugin使いたいな!】
そんな状況ありますよね。

既に更新が途絶えているpluginなんかも結構あります。
それが古いjQueryのバージョン時代に生み出さされた物で、現バージョンで動かない時はどうすればいいか?

対応としては下記のいずれかになります。
1.変更点の把握
2.jquery/jquery-migrateを使用する。

1は変更点を把握しコードを書き換える。勉強になる。
2はjQuery本体を読み込ませた後に、jQuery Migrateを読み込ませるだけ。

2の方法であれば以下の記述でOKです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

CDNを使い、ファイルの転送速度を上げる

CDN(コンテンツデリバリーネットワーク)を使うことにより、高速でのファイルの読み込み、またより圧縮されたファイルサイズで扱えるようになります。

同じファイルでの比較
jQuery1.7.2の圧縮版をCDNで利用した場合→32.9 KB
ダウンロードして使う場合→92.6 KB
これだけの差があります。

詳しくは以前書いた記事を参照
jQueryを導入する時に知っておくといい基本的な豆知識 | CreativeLife

実際に使う場合の記述

結構簡易的に実装できるコードを書いてみました。

PHPでIE判別してjQueryを導入する

PHPが使える場合の記述です。
記述位置はなるべくbodyの閉じタグ直前がいいでしょう。
ページのレンダリングを阻害させずに読み込ませるためです、

$agent = getenv("HTTP_USER_AGENT");
if(mb_ereg("MSIE", $agent){
//IEの時の処理
print<<<EOF
<!--[if gt ie 8]><!-- IE8以上の場合 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<![endif]-->
<!--[if lte ie 8]><!-- IE8を含むIE8以下の場合 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<![endif]-->
EOF;
}else{
//IE以外の処理
print<<<EOF
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
EOF;
}

javascriptでIE判別してjQueryを導入する

何らかの理由でPHPが使えない環境の場合。
例えばjavascriptしか使えない場合の記述は以下。
こちらはhead内にscript要素が追加されるようになっています。

if (typeof document.documentElement.style.maxHeight != "undefined") {
    if (!/*@cc_on!@*/false){
        // IE以外
        var script = document.createElement("script");
        script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js");
        document.getElementsByTagName("head")[0].appendChild(script);
    }else if (document.documentMode >=8) {
        // IE8以降
        var script = document.createElement("script");
        script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js");
        document.getElementsByTagName("head")[0].appendChild(script);
    }else {
        //IE8以下
        var script = document.createElement("script");
        script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js");
        document.getElementsByTagName("head")[0].appendChild(script);
    }
} else {
  // IE6以下
}

どちらのコードも、IE8以上とIE以外のブラウザでjQuery2.1.1を読み込ませ、IE8以下ではレガシーブラウザ対応の1.11.1を読み込ませるようにしています。

あとがき

いかがでしたでしょうか?
jQueryを導入する前にこれらの事を知っておくと、後々バージョンの違いやコードの記述の違いでのエラーに悩まされることがなくなります。

jQueryの記述方法なんかは、比較的ネットに情報が溢れているので、簡単な動作の習得もそんなに難しいものでは無いと思います。慣れてきたら自作pluginを作ったりなど楽しみもありますので、地道に勉強していきましょう。

この記事が気に入ったら
『いいね』しよう!