[ThinkIT] 第1回：Prototype.jsを使う準備 (1/2)

TOP＞システム開発＞はじめに

JavaScriptを洗練させるPrototype.js

第１回：Prototype.jsを使う準備
著者：ガイアックス天野仁史 2007/2/22

1 2 次のページ

はじめに

   筆者がPrototype.jsに初めて出会ったのは、2005年9月ごろだったと思います。この頃、オブジェクト指向JavaScriptはまだまだ黎明期で、オブジェクト指向の書き方もさまざまな我流が存在していたことを覚えています。

   もちろん、筆者も我流のオブジェクト指向で書いていました。しかし、すべてのエンジニアが我流の書き方をしていては、JavaScriptのオブジェクト指向は普及しません。

   そんな時にさまざまなブログで取り上げられ始めたのがPrototype.jsでした。Prototype.jsにはクラスを定義するという機能があり、すべてのエンジニアが同じ方法でクラスを定義できるのです。それは、大きなインパクトでした。しかし、その当時Prototype.jsにはまとまったドキュメントが無く、目利きのJavaScripterたちはこぞってソースを読んでいました。

   そして、そのことが図らずともJavaScripterを育てていったのです。筆者もそんなJavaScripterの一人でした。現在のJavaScriptの発展はPrototype.jsがあってこそだ、と言っても過言ではないと思います。本記事では、そんなPrototype.jsの代表的な機能を紹介していきたいと思います。

準備

それでは、まずPrototype.jsを使う準備をしましょう。

ダウンロード

   Prototype.jsの本稿執筆時の最新バージョンは1.4.0です。が、まもなく1.5.0がリリースされると思いますので、本記事では一足先に最新の開発バージョンである1.5.0_rc2を前提として紹介していきたいと思います。この記事の内容を直接試す場合は、Prototype.jsの1.5.0_rc2が必要です。

   開発版を手に入れるには、直接最新リポジトリからソース一式をダウンロードし、rakeコマンドを使ってビルドしなければなりません。少しめんどくさいので、Prototype.jsの兄弟プロジェクトであるscript.aculo.usのリポジトリにあるビルド済みのPrototype.jsを使うことにしましょう。

   script.aculo.usの最新のPrototype.jsは現時点で以下のURLからダウンロードできます。

http://dev.rubyonrails.org/svn/rails/spinoffs/scriptaculous/lib/prototype.js

※注1：本連載の公開時（2007年2月）では、prototype.js 1.5.0がリリースされていますので、以下のURLからダウンロードしてください。
http://prototypejs.org/assets/2007/1/18/prototype.js

使いかた

実際にダウンロードしたファイルを使うにはどのようにしたらいいのでしょうか。それはとても簡単です。普通のJavaScriptファイルと同様にscriptタグによって読み込めばいいのです。ただし、prototype.jsに依存するコードはprototype.jsの後に読み込む必要があります（リスト1）。

リスト1：Prototype.jsを読み込む


		<script type="text/javascript" src="prototype.js"></script>

		

		<!-- hoge.js の中でPrototype.jsの機能を使えます。-->

		<script type="text/javascript" src="hoge.js"></script>

		

		<!-- このscript タグの中でもPrototype.jsの機能が使えます。-->

		<script type="text/javascript">

		if (window.Prototype) { alert("Enjoy Prototype.js!") }>

		</script>

1 2 次のページ

著者プロフィール
株式会社ガイアックス天野仁史
渋谷で働くWebプログラマ。出身は石川県金沢市。21歳でプログラミングに出会い、IT戦士になることを決意。それからというもの、寝ても覚めてもプログラムを書き続け今に至る。はてなでamachangというidでブログを書いてます。

IT戦記
http://d.hatena.ne.jp/amachang/

INDEX
第1回：Prototype.jsを使う準備
	はじめに
	JavaScriptの復習