Hatena::ブログ(Diary)

ろば電子が詰まっている

2012-02-28

jQueryのscriptタグsrc指定

流行りに乗ってjQueryを始めてみようかと思ったのだけど、いきなりつまづいてしまった。それは、head内のscriptタグで、いったいどこをsrcとして読み込めばいいのか? ということ。

ググると見つかるWebのサンプルコードでは、多くの人がこういう書き方をしている。

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

でも私はこういうソースを見ると、「いやいや、こんなバージョン番号がモロに入ったパスなんて……数年経ったら古いバージョンあっさり消されるんじゃないのか……?」と、不安になってしまう。

また、ファイル名もjquery.min.jsとか、読み込むホストがcode.jquery.comだったりとか、混沌極まりない。ということで、一度整理してみた。

CDN (srcのホスト名)

どこから取ってくるかについては、jQueryのライブラリをインターネット上に公開して自由に使えるようにしてくれているサーバがあるので、ここを使わせてもらうと良い。これら、jQueryをホストしているのをCDN(Content Delivery Network)と呼ぶ。

CDNはいくつかあるようだが、以下3つから選ぶのが妥当宗教上の理由でMicrosoftは選べない人も多い(?)だろうし、ここはjQuery公式を素直に選んでおけば良いのではなかろうか。

jQuery公式
Google
Microsoft

MicrosoftについてはFQDNを「ajax.microsoft.com」と書いてある資料があるけど、それはOld Formatなので「ajax.aspnetcdn.com」の方を使うように、とMicrosoft Ajax Content Delivery Network | Microsoft Docsに書いてある。

生のソースかminか

jQueryのソースは240KBくらいあってちょっと大きすぎるので、ソースコードを直接読みたいという特殊な用途で無い限りは"min"の方を使うと良い。このMinifiedバージョンは、コメントや空行を削除して「圧縮」したもの。ソースを見れば分かるけど、単なる空行削除などだけでなく、ソースを解釈して長い変数名の書き換えなどまでやっているようだ。

バージョン1.7.1では、通常版が243KBでMinified版が92KBだった。

ファイル名

先に書いたとおり、ファイルパスに"1.7.1"とかバージョン番号そのまま書いてあるのが気持ち悪い人は、jQuery公式サイトからlatest(最新)ファイルを取ってくることで解決できる。

http://code.jquery.com/jquery-latest.min.js

このURLで、最新版のjQueryが返ってくる。

あるいは、自サイトに直接jquery.min.jsをコピーして置いて、それを読み込んでも良い。

まとめ

というわけで、方針的には以下2つかな。

個人で作るWebなら

最新版を使うようにする

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
商用サイトなどそれなりにきっちりしたところなら

必要なバージョンのjquery.jsをダウンロードして自サイト内にコピーして設置し、それを読み込む。jQueryのバージョンアップは、自前でjquery.min.jsを置き換えることで行う

<script type="text/javascript" src="http://yoursite.example.com/iib/jquery.min.js">
</script>

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/ozuma/20120228/p1