Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

jQueryを利用するには?

2014年10月30日

jQueryの特徴を簡単に紹介。jQueryライブラリをCDNから、もしくはローカルにダウンロードしてから利用する方法を説明する。

  • このエントリーをはてなブックマークに追加

 このシリーズでは、何回かにわたって、jQueryの基本機能を目的別リファレンスの形式でまとめていきます。

 jQueryとは、John Resig氏によって開発されたJavaScriptライブラリで、以下のような特徴を持っています。

  • 「Write less, do more」(より少ないコードで、もっとたくさんのことを)がモットー
  • 基本的なページ操作から、イベント処理、エフェクト、非同期通信、標準JavaScriptの拡張など、JavaScriptによるWebページ開発に必要な機能をあまねくサポート
  • Internet Explorer 6以上、Chrome、Firefox、Safari 5.1以上、Opera、iOS 6.1以上、Android 2.3/4.0以上など、主要なブラウザーをサポート*1
  • ダウンロードサイズは32KBytesと、ごく軽量(minified版をGzip圧縮した場合)
  • jQuery UIjQuery Mobileをはじめ、プラグインが豊富
  • *1 バージョンを明記していないものは、最新バージョン-1、最新バージョンをサポートします。

 ちなみに、「BuiltWith」というサイトで提供されているJavaScriptライブラリの利用統計を見てみると、じつにインターネット全体の35%ものサイトでjQueryが利用されており*2、jQueryがJavaScriptライブラリのデファクトスタンダードとしての地位を占めていることが実感できます。

  • *2 jQueryとjQuery Cycleプラグインを合わせた数字です。

jQueryの導入

 jQueryでは、動作に必要なライブラリをCDN(Content Delivery Network)で提供しています。「事前準備が不要」「(一般的には)パフォーマンスに優れる」という理由から、まずはこちらでの利用をお勧めします。

 CDNを利用するには、ページに以下のようなコードを含めるだけです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
……ページ本体……
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
……jQueryを利用したコード……
</script>
</body>
</html>
CDN経由でjQueryを利用するためのコード例

 「1.11.1」の部分はバージョン番号なので、利用するバージョンによって置き換えてください。

 src属性が「http://~」ではなく、「//~」で始まるのは、現在のページで利用しているプロトコルに応じて、ライブラリをインポートするプロトコルも切り替えるためです(=ページが「https://~」であれば、ライブラリも「https://~」でインポートしようとします*3)。

 「//~」に対応したCDNには、以下のようなものがあります。

CDNURL
jQuery CDN //code.jquery.com/jquery-1.11.0.min.js
Google CDN //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
Microsoft Ajax CDN //ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js
HTTP/HTTPSに対応したCDN
  • *3 ただし、以降のサンプルではWindowsエクスプローラーから.htmlファイルを直接開いたときに正しく動作するよう、「http://~」でインポートするようにしています。さもないと、「file://~ 」でアクセスしようとするからです。

オフラインでの利用

 もちろん、あらかじめダウンロードしたライブラリをインポートすることで、オフライン環境でjQueryを利用することもできます。ダウンロードページは、以下です。

 ダウンロードするのは[Download the compressed, production jQuery 1.11.1](圧縮版)です。圧縮(minified)版は、オリジナルのソースコードから改行や空白/コメントなどを取り除いた小サイズの形式であることから、ダウンロード時間も短く、実運用に向いています。半面、開発時にソースコードを確認したいなどの用途には不向きなので、そのような場合には[Download the uncompressed, development jQuery 1.11.1](非圧縮版)をダウンロードしてください*4

  • *4 CDNでも「~/jquery-1.11.0.js」(.minなし)にアクセスすることで非圧縮版を取得できます。

 ダウンロードした「jquery-1.11.0.min.js」ファイルは、任意のフォルダーに配置した上で、以下のようにインポートします。パスは配置先に応じて読み替えてください。

HTML
<script src="jquery-1.11.1.min.js"></script>
ダウンロードしたjQueryライブラリを利用するためのコード例

障害時のフォールバック

 ダウンロードパッケージを利用するのは、オフライン環境の場合だけではありません。CDNに障害があってファイルを取得できなかった場合に備えて、以下のようなフォールバック(=ある機能が使えないときに代替機能に切り替えること)用のコードを記述すると、より安全です。

HTML
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
window.jQuery || document.write('<script type="text/javascript" src="jquery-1.11.1.min.js"><\/script>');
</script>
CDNの障害時にローカルからのインポートに切り替える例

 これによって、window.jQueryオブジェクトが存在しない場合(=CDNからのデータ取得に失敗して、jQueryを利用できない場合)に、ローカルからライブラリをインポートできます。

処理対象:ライブラリインポート カテゴリ:コア
処理対象:ライブラリフォールバック カテゴリ:コア
API:window.jQueryオブジェクト カテゴリ:Types(型)

※以下では、本稿の前後を合わせて5回分(第1回~第5回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
1. 【現在、表示中】≫ jQueryを利用するには?

jQueryの特徴を簡単に紹介。jQueryライブラリをCDNから、もしくはローカルにダウンロードしてから利用する方法を説明する。

jQuery逆引きリファレンス
2. 現在利用しているjQueryのバージョンを確認するには?

現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明する。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介。

jQuery逆引きリファレンス
3. 以前のバージョンで開発したアプリを最新のjQueryで動作させるには?

基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。

jQuery逆引きリファレンス
4. 要素配下のテキストを取得/設定するには?(text/html)

textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。

jQuery逆引きリファレンス
5. 要素のスタイルプロパティを変更するには?(css)

背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。

サイトからのお知らせ

Twitterでつぶやこう!