jQuery

JavaScriptのライブラリとして最近人気あるjQueryというものがあります。jQueryとはWikipediaによると

JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。John Resig が2006年1月に開催された BarCamp NYC でリリースした。

と書かれているとおり、非常に軽量なのにすごく強力なライブラリです。ここ最近、このjQueryについて独学ですが勉強してみましたので、下記のその学んで思ったことを書いてみます。

jQueryはJavaScriptで書かれたライブラリでサイズが55.9KBしかない非常に小さなライブラリです(Developmentタイプの場合120KB)。しかし、たった56KBしかないファイル一つなのですが、学んでみてビックリするほどの機能が数多く盛り込まれているのです。

jQueryの存在はだいぶ前から知っていて、jQueryを利用したライブラリ(プラグイン)が数多く出ていることも知っていました。それらライブラリを使用することによって今までFlashを使用するか、JavaScriptでゴリゴリとプログラムを書くしか方法はなかったのが、比較的簡単にクリエイティブなサイト作成ができるようになりました。

しかし、そのライブラリの元となるjQueryが実際どのようなことができるライブラリなのかは恥ずかしながら全然知らなかったのです。今回、そのjQueryを知って正直、Webに作る人間としては早くに学んでおくべきライブラリであったことに後悔しました。

実際にjQueryでどのようなことができるのかというと、簡単なサンプルとして下記のような物を作ってみました。下記のサンプルは「投げる」ボタンをクリックするとボールを投げるという簡単なプログラムです。まずは下記プログラムを実行してみてください。

ピーン
( -_・)σ

・・・◎
((((((BOMB))))))

上記のお遊びは下記のようなJavaScriptで作ってみました。

<script type="text/javascript">
$(document).ready(function(){
$("button.throw").click(function(){
  $(".jq_comment").css("color", "#000000");
  $(".bomb").css("display", "none");
  $(".ball").css("display", "inline").animate({
   left: "+=400px"
  },
  {
   duration: "slow",
   easing: "linear",
   complete: function(){
    $(".jq_comment").css("color", "#FFFFFF");
    $(".ball").css("display", "none").css("left", "0px");
    $(".bomb").css("display", "inline");
    $("button.throw").text("もう一回");
   },
   step: function(s){$("#steps").text(s)}
  });
});
});
</script>

今回作った物はお遊びで、たいした物ではありませんが、それでもプログラムとしてはたったこれだけです。実際にはこれ以外にHTMLとCSSが必要になりますが、これだけのプログラムでボタンを押した時にボールを投げはじめ、それと共に「ピーン」というコメントとボールが爆発する「BOMB」が表示されるのです。今までJavaScriptを知っているプログラマーならどれだけ短いかは理解できると思います。もちろん、画像やCSSを駆使した物を作ればもっとすごい物を作れます。ちなみに私がフリーで公開しているG AnalyticsもjQueryを使用しています。(ライブラリを使用していますが・・・)

今回、このjQueryを学んで感じたことはこの軽量なライブラリでこれだけ強力な機能が盛り込まれていることも驚きだったのですが、それと共にデザイナー、特にWebデザイナーがこのライブラリを学ぶべきだということをひしひしと感じました。

jQueryは今まで大変だった「プログラム」をできるだけ書かないでCSSを使用したデザインや動作を簡単に行えるようになっています。デザイナーであれば

「このサイトはこの様なデザインで、こんな風に動かしたい」

という要望が数多くあるはず。jQueryが出る前まではJavaScriptなどのプログラムができないデザイナーにとっては、おそらくやりたいけどできるかわからない。できたとしても費用が・・・。と言うことがあったはずです。しかし、jQueryを覚えてしまえば確実にデザインの世界を広げることができます。今までできなかったことが数行のプログラムで実行することができるのだから。

そうは言っても「関数がどうの・・・」という言葉があるとどうしても拒否反応が出てしまう方もいると思いますので、もし良ければ私のところに連絡してくれればご相談にのらせて頂きます。連絡をお待ちしていますよ(^_-)

長くなってしまいますのでこの辺にしておきますが、それにしても、このjQueryはすごい物です(こればかりですが・・・(^_^;))。これを作ったJohn Resig氏に敬意を表します。

jQuery: The Write Less, Do More, JavaScript Library

アマゾンのサーバでエラーが起こっているかもしれません。
一度ページを再読み込みしてみてください。