「prototype.js」と呼ばれるJavaScriptフレームワーク。多くのAjaxを応用したサービスで使われている「Ajaxフレームワークのデファクト」だ。
このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」では、これまでにAjaxの概要(第1回)から発展系としてどのような取り組みあるのか(第2回)、そして、効率的な組み込み方法の一つとしてJSONと呼ばれるデータ形式のやり取り(第3回)、Webサービスとの連携(第4回)について解説した。
Ajaxアプリケーションの開発では、Webブラウザ依存の問題を解消したり、DOMツリーを操作するといった必要性がある。しかし、開発者が一からコード記述していくのは現実的ではない。そこで一般には、何かしらオープンスタンダードとなっているライブラリを利用することになる。今回は、Ajaxアプリケーション開発においてよく使われる「prototype.js」を使った開発手法について解説していこう。
prototype.jsは(関連リンク)、Sam Stephenson氏によって書かれたJavaScriptフレームワークだ。フリーのライブラリであり、MITライセンスに準拠されている。
prototype.jsが提供するのは、Ajaxの機能だけではない。JavaScriptの組み込みクラスに幾つかのメソッドを加えて機能を追加したり、DOM操作を容易にするショートカット関数などを提供する機能も備えた基礎的なフレームワークとなっている。
実際、Ajaxアプリケーションに限らず、多くのJavaScriptプログラミングで使われており、デファクトスタンダードともいえる。
例えば、「Ruby on Rails」や「script.aculo.us」など、ほかの幾つかのWebアプリケーションフレームワークや、Ajax用クラスライブラリがこのprototype.jsを基本的なフレームワークとして採用している。
prototype.jsが正式に対応しているWebブラウザは、次の通りだ。
prototype.jsは、http://prototype.conio.net/からダウンロードすることができる。原稿執筆時点での最新版はバージョン1.40だ。また、prototype.jsは、クライアントサイドのライブラリであり、「prototype.js」というただひとつのファイルによって構成される。
利用するにあたっては、prototype.jsをWebサーバーに置き、HTMLソース中で、次のように読み込めばよい。
<script type="text/javascript" src="https://image.itmedia.co.jp/enterprise/articles/0608/28/prototype.js">
</script>
注意点として、src属性で指定するファイル名は、実際には、配置したパスも指定することになる。
prototype.jsには、ドキュメントが含まれていない。そのため、どのような関数があり、どのような動作をするのかを理解するには、「ソースを読む」というのが基本となる。
しかしインターネット上には、Sergio Pereira氏による「Developer Notes for prototype.js」というコンテンツがある。日本語訳もあるので、prototype.jsを使い始める際には、まず、このコンテンツに目を通すことをお勧めする。
prototype.jsの主な機能は、「ショートカットやユーティリティ関数」と「Ajax機能」の2つに大きく分類できる。
Copyright © ITmedia, Inc. All Rights Reserved.