今から始めるprototype.js／jQuery

prototype.jsの基本的な使い方

　prototype.jsは機能が豊富ですが、ここでは、HTMLの一部を書き換えながら、基本的な使い方を説明していきたいと思います。

　完成形は、index1.html（http://ajax.studynet.jp/samples/thinkit2/index1.html）になります。画面構成は、2008年5月に掲載した「やりなおしのJavaScript（http://thinkit.jp/article/358/1/）」に合わせて、違いがわかるようにしましたので、一緒に勉強していただけると理解が深まります。

　まずは、HTMLの方から説明していきましょう。HTMLのheadの中に、図2-1のようなJavaScriptを読み込むソースコードを入れます。注意点は、prototype.jsを先に読み込むようにすることです。

　次に、マウスのクリックイベントを設定するためのボタンを設置します（図2-2）。ここでは、ボタンを押すとHTMLの文字が書き換わるように設定します（後述のJavaScript内で設定）。id属性をbtnに設定しておきます。文字を書き換える領域は、図2-3のように、id属性を設定しておきます。

　prototype.jsでは、書き換えたい場所を指定する時に、「$("id名")」という形式で書きますので、HTML内にid属性を設定しておく必要があります。

　では、JavaScript（index1.js）の方を見ていきましょう。

　ページの読み込み後、JavaScriptをすぐに実行させるために、Event.observe()というメソッドを使います。図2-4はJavaScriptの構成が分かるように、不要な個所を削除したものです。外枠のEvent.observe()は、JavaScritp全体を覆っています。

　「dom:loaded（http://ajax.studynet.jp/libraries/prototypejs/dom-loaded）」とは、prototype.jsの拡張イベントで、DOMツリーが操作できるようになったら発生します。

　図2-4の（2）は、無名関数、または匿名関数と呼ばれるもので、function(){…}として、…に処理させたいことを書いていきます。実際には、図2-4の（3）の行から書きます。

　図2-4の（4）では、ボタン（idはbtn）にclickイベントハンドラを設定するために、Event.observe()を使用しています。ボタンを押した時に処理したい内容は、図2-4の（5）に記述します。

　図2-4の（5）で、HTMLを書き換える部分を抜き出したものが、図2-5になっています。「$("id名").innerHTMl = 書き換えたい文字」で記述します。ここでは、書き換えたい文字をあらかじめ、変数「article」「title」に代入しています。ソースコードは、index1.js（http://ajax.studynet.jp/samples/thinkit2/js/index1.js）をご覧ください。Event.observe()（http://ajax.studynet.jp/libraries/prototypejs/eventobserve）の詳細も参考にしてください。

jQeuryの導入

　jQueryは、Mozilla CorporationのJavaScript Evangelist、Resig氏（http://ejohn.org）とjQeury teamのメンバーが中心となって開発が進められているJavaScriptライブラリです。

　2006年1月に初めてjQueryが公開されましたが、現在では、prototype.jsと肩を並べて、人気度No1のライブラリになっています。MITとGPLのデュアルライセンスで配布されており、誰でも利用することができます。

　インストールは、jQuery公式サイトのdownloadボタンより、jQuery本体をダウンロードします。2008年12月現在では、jquery-1.2.6.min.jsが配布されています。このファイルを、prototype.jsと同じように、js/libsディレクトリ以下に保存して、HTMLのHEADタグの中に以下の1行を追加することで、jQueryが使えるようになります。



　では、prototype.jsのサンプルで紹介したものと全く同じものをjQeuryで作ってみましょう。