ZAPAnet総合情報局 > ZAPAブログ2.0 > ニュータイプなJSライブラリjQueryを使ってみよう!

ニュータイプなJSライブラリjQueryを使ってみよう!

2007年12月21日 プログラミングTIPS
JavaScriptライブラリのニュータイプ「jQuery」。
jQuery is a new type of JavaScript library.

jQuery: The Write Less, Do More, JavaScript Library
ニュータイプと聞いては黙っていられないニュータイプファンの皆様こんにちは、公開APIを利用したサンプルサイトを作っていくよ管理人のZAPAです。

Web2.0やらAjaxやらの言葉が流行っていても、実際にそれっぽいものを作ろうと思ったところで、初心者は一体どこから手を付けて良いのかわからないのが現実だったりします。
そこで今回は、Web2.0っぽくAjaxを実現させることができるライブラリ「jQuery」の紹介をします。

Ajaxとは

ここで言うAjaxは、オランダの名門フットボールチーム「アヤックス」ではなく、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術「エイジャックス」のことです。
XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous (アシンクロナス/エイシンクロナス、非同期) JavaScript + XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。

Ajax - Wikipedia
このXMLHttpRequestという技術自体は、Webブラウザに実装されているJavaScriptのHTTP通信機能を利用しているだけで、実は古くから存在する枯れた技術です。
Ajaxというネーミングと、GoogleがGoogleMapsなどで今までにない優れたWebサービスを作ったことで大ブレークしました。(GmailやGoogleリーダーなどでも使われています)

ただ、XMLHttpRequestの実装がWebブラウザによって違うため、環境による挙動の違いから開発者を悩ませました。
そんな中、2006年にprototype.jsなどのAjaxフレームワークが登場したことで、クロスブラウザ対策や開発期間の短縮が可能になり、一層Ajaxアプリケーションが増えていきました。

Ajaxライブラリについて

なぜ、Webアプリ開発にAjaxライブラリが必要なのか、それはWebアプリに使えるAjaxライブラリ8選!に詳しく書かれています。
■クロスブラウザ対応
Ajaxの利点として、さまざまな環境における一般的なWebブラウザ上で実行できることが挙げられます。しかしWebブラウザの実装によりAjaxの解釈が異なるケースがあります。
各Webブラウザ間、さらには同じWebブラウザでもバージョン間によって解釈が異なることもあり、それぞれに対応したAjaxプログラミングを行うのは非本質的な作業です。
異なるWebブラウザでも同様に動作するように、実装間の差異を吸収してくれる機能を提供するのがAjaxライブラリの1点目の必要性です。

■豊富な機能の提供
Ajaxで利用するJavaScriptは、ほかのJavaやRubyのような言語と比べて標準で用意されている関数が少ないことが挙げられます。
特にAjaxでは非同期通信処理やDOM(Document Object Model)処理を標準で用意された関数のみで実装しようとなると煩雑なプログラムになりがちで、これもまた非本質的な作業です。開発効率を向上させる豊富な機能を提供するのがAjaxライブラリの2点目の必要性です。

Webアプリに使えるAjaxライブラリ8選! − @IT
というわけで、Ajaxライブラリを利用する前に、
  • 1. どのようなAjaxライブラリがあるのか?
  • 2. JavaScriptの構文はどうなっているのか?
  • 3. Ajaxはどのように実現されているのか?
を理解しておく必要があります。

下記サイトに詳しい情報が載っています。
Webアプリに使えるAjaxライブラリ8選!
150以上アルAjaxライブラリの中から、Prototype、jQuery、MochiKitscript.aculo.us、Rialto javascript API、Rico、Dojo、Yahoo! User Interface Libraryの8つのライブラリの解説。
あるSEのつぶやき: Ajaxライブラリまとめ
目的別ライブラリいろいろ。
JavaScriptist - javascript/ajax/サンプル/入門/リファレンス/ライブラリ
Ajax最新情報やJavaScriptプログラミング学習など。
Ajaxを勉強しよう
Ajaxの勉強。マイコミジャーナル記事一覧も併せて。
Javascriptまとめノート -つくるぶ まとめ
JavaScript関連サイトへの大量リンク集。

jQueryについて

Ajaxライブラリとして一番有名なのはprototype.jsです。
prototype.jsは便利ですが、最新安定版prototype.js1.6はファイルサイズが約128キロバイトもあります(圧縮すればもっと小さくなりますが)。
例えば、1ページ10〜30キロバイトのHTMLページくらいしか開発しない人にとっては、少し大げさとも言える容量です。

そこで登場するのが、JavaScriptライブラリのニュータイプ「jQuery」。
軽量で高速なAjaxライブラリとして有名で、2007年9月にjQuery 1.2が発表されました。
jQueryのライセンスは、次のようにMITとGPLの2つのライセンスが用意されています。
jQuery is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can choose the license that best suits your project, and use it accordingly.

License - jQuery JavaScript Library
MITライセンスであれば、著作権表示などの規約を守る限り、誰でも無償で無制限に扱って良いライブラリということになります。

最新のjQuery 1.2.1は、元のソースコードを短縮し圧縮したタイプのものが公式で用意されていて、このファイルはたった14キロバイトで通信可能です。
短縮&圧縮したJSファイルのほか、もとのJSファイル、短縮したJSファイルなどいくつかの種類が配布されています。
タイプ 容量 説明
Download jQuery 1.2.1
(Minified and Gzipped)
14kb Great for production use.
Download jQuery 1.2.1
(Uncompressed)
77kb Great for testing, learning and development.
Download jQuery 1.2.1
(Packed)
26kb For those that can't Gzip their JavaScript.

jQueryの情報が少なければ、利用も控えてしまいますが、公式のドキュメントを始め、日本語の情報もたくさんあります。
次のリンクから、jQueryの勉強をすることができます。
jQuery: The Write Less, Do More, JavaScript Library
公式サイト。
Main Page - jQuery JavaScript Library
公式ドキュメント(英語)。
jquerydocs - jQuery 1.2 ドキュメント日本語訳
ver 1.2基準の日本語リファレンス
jQuery リファレンス
ver 1.0.3基準の日本語リファレンス。
jQuery入門 (ver 1.2.1)
ver 1.2.1の入門解説ページ。
jQuery 開発者向けメモ
大量のサンプルやリファレンスなど。
jQueryの魔法 - [JavaScript]All About
初心者向けjQueryの解説。
jQuery を使って Ajax 開発を単純化する
IBMの紹介ページ。
超イカしたJavascriptライブラリ jQuery (1)
プレゼンで確認。
ウノウラボ Unoh Labs: jQueryのパフォーマンス最適化に関するTips
最適化について。簡単Ajaxライブラリ「jQuery」と便利なプラグインたちJavaScriptライブラリといえば jQuery(入門編)も併せて。
jQuery超初心者にありがちな7つ6つの間違い - あじゃぱー
ある程度使いこなせるようになったら、一度確認。
使えそうなjQueryプラグイン - Emotional Web
使えそうなプラグインいろいろ。
[JS]jQuery 1.2リリース&変更点など | コリス
Ver 1.2での変更点など。
[JS]jQueryのプラグイン33+1選 -2007年11月 | コリス
プラグインいろいろ。
jQuery で JSONP 2通り - てっく煮ブログ
JSONPを使う方法。

解説本

基本的にはインターネット上の情報で事足りますが、洋書でjQuery解説本も発売されています。
Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques Jquery in Action Jquery Reference Guide

また、JavaScriptやAjaxの勉強を一から勉強したいときは、次の最新解説本も発売されます。
標準DOMスクリプティング JavaScript+DOMによるWebアプリデザインの基礎
羽田野 太巳
ソフトバンククリエイティブ
2007-01-16
Ajaxライブラリリファレンス
古籏 一浩
ビー・エヌ・エヌ新社
2007-01
基礎 Ajax + JavaScript
佐藤 和人
インプレスジャパン
2006-12

by [Z]ZAPAnetサーチ2.0

続き

jQueryを利用したサンプルなどは、また今度作って発表します。
お楽しみに。


追記:
ニュータイプなjQueryその2-jQuery導入方法
ニュータイプなjQueryその3-HTML要素アクセス

このあとも、CSS操作、Ajax、イベント、jQueryエフェクトなどの解説が続く予定です。