prototype.js ～入門記事、サンプルコード集などのまとめ

2009年3月10日

タグ： Ajax

prototype.jsは、本格的なAjaxライブラリとして最初に普及したソフトウェアです。JavaScriptでアプリケーションを記述する際に何度も繰り返し記述される命令群をまとめて1つの関数として簡単に記述することができたり、文字列の操作やDOMの操作、サーバとの非同期通信などの強力な機能をJavaScriptに追加します。

prototype.jsの公式Webサイト

prototype.jsは数字や文字列、オブジェクト、通信といったプログラミングロジックの部分の拡張に特化しており、ユーザーインターフェイスや視覚効果はscript.aculo.usやそのほかのライブラリに任せています。

RubyのアプリケーションフレームワークであるRuby on Rilsは、標準ライブラリとしてprototype.jsとscript.aculo.usを採用しているため、Ruby on Rails経由で利用されることも多いようです。

以下からは、prototype.jsを利用するうえで参考になるWebサイトを紹介していきましょう。

prototype.jsのリファレンス

まずは公式サイトと、公式サイト内にあるマニュアル関係です。prototype.jsの最新版および開発中の版などもここからダウンロードできます。

Prototype API Documentation

Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications （英語）
公式サイト
Prototype JavaScript framework: API.Prototype API Documentation （英語）
公式サイトのAPIリファレンス
Prototype JavaScript framework: Prototype Tips and Tutorials （英語）
公式サイトのTipsとTutorials

prototype.jsのリファレンスはネット上にいくつかありますが、最新版をつねにフォローしている点で古籏氏のものがいつも安心して参照できます。

prototype.jsの入門記事と解説記事

prototype.jsの内容を手っ取り早く知るための入門記事として4本紹介します。特にマイコミジャーナルの記事はポイントを押さえていてお勧めです。

いまからはじめるPrototype.js

【連載】いまからはじめるPrototype.js (1) Prototype.jsの概要と$で始まるメソッド | エンタープライズ | マイコミジャーナル
数値と文字列、クラスとオブジェクト、配列と関数、HTMLとフォーム、Ajaxと分野ごとに分かれている章立てを見るだけでprototype.jsの概要が分かる
[ThinkIT] 第1回：Prototype.jsを使う準備 (1/2)
prototype.js流のオブジェクト指向プログラミング、拡張されたDOM機能のチュートリアル
Prototype.jsコトハジメ - builder by ZDNet Japan
PHPのサンプルコードも示しながら、サーバとの非同期通信機能にフォーカスしたチュートリアル
Prototype.jsとは何か - アークウェブシステム開発SandBox

prototype.jsを用いたサンプルコード

実際にプログラミングをはじめると、このケースではどう記述すればいいのか？といった具体的なサンプルコードを参照したくなるものです。ここではそうした際に参考になる記事を集めました。

prototype.js逆引きサンプル集

JavaScriptistの逆引きサンプル集は種類が豊富です。こんなことができるのか、という参考にもなるので、ざっと目を通しておくといいでしょう。

prototype.js逆引きサンプル集 - JavaScriptist
Ajax、数値、エレメントなど分野別に分けられた合計100以上のサンプルコードが参照できる
prototype.js v1.5.0 の使い方 - S2factory
prototpyeのおもな関数について使い方とサンプルコードを示している記事
Using prototype.js v1.5.0 - Sergio Pereira （英語）
上記の英語版オリジナル
prototype.js を利用してコンテンツをインクルードする - codess - builder by ZDNet Japan

prototype.jsのソースコードを読む

prototype.jsとJavaScriptをさらに使いこなすために、ライブラリのソースコードを解説した記事も紹介しましょう。

prototype.jsおすすめ書籍

Prototype & script.aculo.us JavaScriptライブラリによるAjaxアプリケーション開発
サンプルコードを多用することでAjaxライブラリの実践的な使い方を解説。DOM操作、フォーム操作、ヘルパーオブジェクト、Script.aculo.usの視覚効果など、プログラマに必要な知識をまとめた一冊（目次）

実践!Ajaxフレームワーク Prototype.js/Script.aculo.us
サンプル中心のprototype.jsとScript.aculo.usの解説書。サーバとのデータのやりとりについても言及し、付録ではRuby on Railsからの利用方法にも触れている（目次）

ソースコード検索

prototype.jsのプログラミングで、だれか他のプログラマのコードを参考にしたいときにはソースコード検索サービスが役に立つかもしれません。

Googleソースコード検索は日本語化されていますが、英語版のソースコード検索サイトとして下記などがあります。

Koders - Open Source Code Search Engine （英語）
codefetch{ （英語）
Code Search - O'Reilly Labs （英語）
オライリーの書籍中のソースコードを検索できる

次の記事≫ メディアにもアーキテクチャがある。だからアーキテクトが必要だ
前の記事≪ HTML 5でセマンティックWebが進むと困る人たち