*prototype.jsとは何か [#db4ffb34]

#contents

** prototype.jsとは何か [#a982ec2b]
- Ajaxを利用する際にコレを使うと便利みたいな風に言われている prototype.jsだけど~
コレの本質はなんだろう？ということを説明していこうと思う。


** prototype.jsのオフィシャル [#o904b633]

- http://prototype.conio.net/
-- 動的Webアプリの開発に緩和することを目標としたJavaScriptのフレームワークなんだ!

- 具体的に何をしてくれるのかを見ていく。

#blikimore
** Ajaxをラップしてくれる [#e63fb550]

*** 手動でAjaxを使った例 [#a0c5d97d]
- http://staff.ark-web.jp/~takemura/public/js/ajax/simple/
-- 普通にAjaxを使ったアプリを作るんならこうするでしょう

*** prototype.jsを利用した例 [#k01b767b]
- http://staff.ark-web.jp/~takemura/public/js/ajax/use_prototype_js/
-- prototype.jsを利用するといくつかの利点が見つかる~
それを以下でまとめた

*** ここで分かったこと [#p74f284b]
- クラスの定義を行える

- Ajax.Requestメソッドでブラウザに関係なくリクエストを送れる
-- IE系では ''new ActiveXObject('Msxml2.XMLHTTP')''とか''new ActiveXObject('Microsoft.XMLHTTP')''とか使うんでしたね

- 状態によって実行する関数を変更できる
-- 状態は、''Loading, Loaded, Interactive, Complete''の4つ＋''onSuccess, onFailure''の計6つ

- document.getElementById('id')は、''$('id')''と短縮して書ける

*** リクエスト先で処理した結果だけを指定IDのタグ中に入れる場合 [#l5eeeeab]

- Ajax.Updaterメソッドを利用する
-- 実は、先ほどの[[prototype.jsを利用した例>http://staff.ark-web.jp/~takemura/public/js/ajax/use_prototype_js/]]で使っていました
 <h4>送信側クラスの変更点</h4>
 <textarea cols="100" rows="20" id="send_changeCode"></textarea>
 <script>
 <!--
 new Ajax.Updater('send_changeCode', './Sender.js', {method: 'get'});
 //-->
 </script>

-- send_changeCodeというIDが付けられた<textarea>タグ中にSender.jsの中身を出力するには上記コードだけでいいんです！


** HTMLの編集などに役立つ [#ccdb044d]

*** Elementを操作するユーティリティ [#l1d7d5d9]

- 通常はAjaxでレスポンスが帰ってきたら、そのXMLの内容をHTMLの任意のタグを操作して出力するが、~
prototype.jsには、その場合のいくつかのユーティリティを定義している

- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Element
-- 以下は抜粋
-- toggle: Elementのvisibleをshow / hideする
--- COLOR(red){''注意：''CSSの常識だが、visibleをshow / hideしても''レイアウトが変わらないので、非表示するなら通常はstyle.displayを使う''}
-- hide: style.displayで非表示にする
-- show: style.displayで表示にする

*** 内容を追記する時のユーティリティ [#tc12afeb]

- HTMLの操作としてよく使うのは、innerHTMLだと思う。これはタグ内の内容を''書き換える''わけだが、~
内容を追記する時のユーティリティが用意されている

- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Insertion
-- 指定したIDタグの前後、IDタグの内容の前後にそれぞれセットできる


** イベントの制御がしやすい [#g38a6716]

- はてなの勉強会と同じ資料を使いますが許してｗ
-- [[技術勉強会>http://hatena.g.hatena.ne.jp/hatenatech/20050929/1128057760]]
-- [[こども（てれび）>http://d.hatena.ne.jp/wanpark/20050821]]

- JavaScriptはイベントハンドラの制御がブラウザ依存している箇所がある~
prototype.jsはそのラッパーを持っている

*** イベントのハンドラ側のthis [#be8c4e69]

- 通常、イベントを実行するとハンドラ側のthisはハンドラ自身となるので~
イベントを呼んだ側のメソッドやメンバ変数が使えなくて困るが、~
prototype.jsにはイベントを呼んだ側のthisを見えるようにする仕組みがある

- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html
-- bindAsEventListenerがソレ

*** イベントハンドラの追加 [#ue38596f]

- 通常の <body onLoad="hogehoge"> の''onLoad''はイベントなわけだが、~
これに独自のイベントハンドラを追加することができる

- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Event
-- observe: イベントに対して、イベントハンドラを追加

- 上記資料では、''Event.observe(window, 'load', function() {...}, false);''の部分など


** フォームの制御が簡単 [#a2f8b81e]

*** 入力フィールドの制御 [#nc7ea491]

- フォームのある入力項目にフォーカスを当てたいとか、フォームの内容を消したいときなどの~
ユーティリティを提供している

- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Field


*** Formタグ系の制御 [#pf01941d]

- Form内容のシリアライズ（これ、はてなのヒト絶賛）や、入力の許可/不許可の設定するなどの~
ユーティリティを提供している

- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Form

*** Formタグ系のイベント操作 [#a72a3dec]

- ラジオボタンやチェックボックスをonClickした場合のイベントとコールバック関数を定義できる

- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Form.Element.EventObserver
-- 詳しい資料などが無いのでちょっと詳細は不明。。


** 謎のPositionオブジェクト [#zccc074e]

- 参考にしているドキュメントが仮ドキュメントなので、詳しくはわからないが、~
座標配置に便利なユーティリティらしい

- http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Position

- はてなの勉強会でもここはうやむやだった。。


** まとめ [#p28bb95e]

- Ajaxに使われるイメージが強かったprototype.jsだが、実はいろんなユーティリティを提供している~
シンプルな関数群なんだ…ということが分かった

- これを使った利点として、ブラウザ依存をある程度ラップしているのでブラウザテストが楽になる
- また、ブラウザ依存の箇所が出てきても、prototype.jsはバージョンがあがっていくので~
使う側としてはこのファイルの最新版をアップデートするだけで済むのでメンテナンス性が上がる

#blikifooter(竹村)

#comment
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら

サービス
Zen Cartソリューション
Movable Typeソリューション
その他ソリューション
アークウェブのCSR(企業の社会的責任)