Javascript

【Javascript】jQueryの魔法

Javascript関連情報

更新日：2007年10月27日

jQueryの魔法

高橋登史朗

最近急速に人気を増してきているJavaScriptライブラリjQueryについて取り上げます。短いコードで多くの処理を簡単で安全に実行できる優れたライブラリのひとつです。

jQueryのダウンロード

jQueryを入手するには、まず、http://jquery.com/へ行きます。

このサイトのダウンロードページには、 YUI Compressor による圧縮版(jquery-1.2.xx.min.js )と Packedによる圧縮版(Packed jquery-1.2.xx.pack.js )とここに非圧縮版(Uncompressed jquery-1.2.xx.js )が置かれています。

非圧縮版はソースを確認するのに便利ですが、実際に使用するときは圧縮版を使用します。圧縮率自体ではPacked(27k)が優れていますが、 Packerの冗長減少アルゴリズムでは実行時にevalも必要であるため多少実行に遅れが出ます。 jQueryのダウンロードトップに置かれているYUI Compressorによる圧縮＋gzipによるHTTP圧縮 (14k) という手も優れた選択肢だと思います(参照 Gzip Your Minified JavaScript Files )。また、Git や SVNでの取得も可能です。

さて、jQueryの本体は、わずかにこの小さなjsファイルひとつです。この中に、さまざまなエフェクトを含むメソッドが入っています。これを、自分のスクリプトの前に読み込めば使えるようになります。

また、jQueryは、それ単独でもAjax機能はもとより、prototype.jsのscript.aculo.usやYUIのアニメーションクラスに一部相当するフェイドインやスライド、アニメイト機能が備わっていますが、それらをさらに拡張するライブラリとして、 jQuery UIとプラグインが用意されています。

jQuery UIには、ドラッグドロップ、リサイズ、アコーディオン、ピッカー、ダイアログ、ソーターテーブルなどのウィジェットが含まれており、プラグインには、ユーザーが自分で拡張できる仕組み(Plugins)を利用したさまざまなジャンルのスクリプトが登録されています。

これらも、それぞれのサイトでダウンロードできますので、jQuery本体と組み合わせて利用することになります。

設置

ダウンロードしたファイルはHTML内で次のように読み込み利用します。

  <html>
  <head>
    <script type="text/javascript" 
            src="path/to/jquery.js"></script>
    <script type="text/javascript">
      // ここに自分のコードを書きます
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

(「path/to/」の部分は、そのファイルへのパスを書きます)

もし、プラグインやjQuery UIなどの.jsを使うなら次のようにjquery.jsの後に記述します。

  <html>
  <head>
    <script type="text/javascript" 
            src="path/to/jquery.js"></script>
    <script type="text/javascript" 
            src="path/to/プラグインやjQuery UIなどの.js"></script>
    <script type="text/javascript">
      // ここに自分のコードを書きます
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

これで、設置は完了で、もうjQueryを使い始めることができます。

jQueryのライセンスは、MITとGPLのデュアルライセンスで自分のプロジェクトに合うライセンスを選んでそれに従って使用できるという、最近はやりのスタイルです。ライセンス文言はダウンロードしたファイルにすでに書いてありますので、そのまま利用する側が特にすることはありません。

次回もjQueryについて書いてみます。実は、このシンプルなjQueryを実現する水面下には多くのJavaScript Tipsが隠されているのです。

P.S. jQueryのAPIリファレンスとサンプル本として、当ガイド(高橋登史朗)が執筆した「jQuery入門～魔法のJavaScriptリファレンス&サンプル～」が発刊されています。手元でめっくって探せるリファレンスとして便利です。表紙カバーの裏には、全命令の一覧表(チートシート)と目次が印刷されています。

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！