jQueryとは何か

jQueryは2006年に登場し、瞬く前にWeb制作の世界を席巻したJavaScriptのライブラリ。アメリカ在住のプログラマー、ジョン・レッシグが中心となって開発している。

jQueryが登場する前、prototype.jsやYUI Library(Yahoo User Interface Library)といったJavaScriptライブラリが人気を集めていた。jQueryは後発だったが、後から登場したゆえに、先に世に出たprototype.jsなどの欠点を初めから解消していた。また、使いやすさという点でも、先行するライブラリをはるかに上回っていた。このためjQueryは瞬く間に人気が爆発し、あっという間にWebの世界で最もよく使われるライブラリとなった。

jQueryの人気を後押ししたのは、単に分かりやすいということだけではなかった。プラグインという形で機能を拡張する仕組みを持たせたことで、次々に便利な機能を持ったプラグインが登場したことが、jQueryの普及に拍車を掛けた。プラグインを利用することで、Flashと同等レベルの効果をJavaScriptで実現することすら可能になった。容量が大きく動作も重く、そのうえ開発負荷が高いFlashに対し、jQueryの容量は小さく動作は軽快で開発は簡単だった。

さらに、html5が次世代のhtml規格として普及の兆しを見せ始めたこともjQueryの地位を押し上げることになった。html5は単なる情報の表示に留まらず、canvasやvideoといったmedia要素、ドラッグ＆ドロップなどの操作を仕様に含んでおり、これらの要素を利用するのにJavaScriptは必須だった。JavaScriptを使う機会が増えるということは、すなわちjQueryの使用頻度が増加するということだった。

分かりやすいコード

jQueryのコードは分かりやすい。ボタンクリックでメッセージを出すというコードがこんな感じ。

$("#click_this").click(function(){
  alert( "jQueryはとても分かりやすい。。" );
});

見たままですね。ID=’click_this’をクリックするとアラートを出すということです。この、目的のことをするために必要なコードが最小限で済んでしまうのがjQueryの魅力なわけです。

アニメーションなども自由自在です。

$("#animation_start").toggle(
  function(){
    $("#moving_box").animate({
      "margin-left":"440px"
    },500);
  },
  function(){
    $("#moving_box").animate({
      "margin-left":"5px"
    },2000);
  }
);

ID=animation_startをクリックすると、ID=moving_boxのレフトマージンが500ミリ秒かけて440pxの位置に移動し、もう一度クリックすると5pxの位置に2000ミリ秒かけて戻るという内容です。これも見たままですね。

こんな風に、jQueryを使うと簡単にさまざまなことができるというわけです。ここに書いたコードも、サンプルを動かすためのページすら作っていません。WordPressのエントリ上に、直接書き込んでいるわけです。この手軽さと、手軽にも関わらず極めれば複雑なこともできるようになるのがjQueryの素晴らしさです。