DATE : 2006/07/09 (Sun)
Maven プロジェクトを作る
プロジェクトを配置したいディレクトリ（例えば、Eclipse のワークスペースディレクトリなど）で以下のコマンドを実行します。
「<～>」の部分は、作成したいプロジェクトによって置き換えてください。
mvn archetype:create -DgroupId=<groupId> -DartifactId=<artifactId> -DarchetypeArtifactId=maven-archetype-webapp
コマンドを実行すると、Maven プロジェクトが作成されます。作成されるディレクトリは、 artifactId と同じ名前になります。
Eclipse のプロジェクトファイルの生成
作成したプロジェクト内で、以下のコマンドを実行します。すると、Eclipse のプロジェクトファイルが生成されます。
mvn eclipse:eclipse
なお、Eclipse に m2eclipse プラグインをインストールしておくと便利です。
依存するライブラリの設定
ここでは、単純なサーブレットを開発することを前提に話を進めます。
サーブレットを開発するには、サーブレット API が必要です。
そこで、pom.xml に以下の内容を追記します。
なお、「...」は省略部分を表します。
<project>
...
<dependencies>
...（他の依存ライブラリがある場合）
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.4</version>
<scope>provided</scope>
</dependency>
<dependencies>
...
</project>
サーブレット API は、ビルド時には必要ですが、配置時には必要ない（サーブレットエンジンが API を持っている）ため、スコープを provided としています。
ディレクトリ構成
Maven を用いてウェブアプリケーションを開発する際のディレクトリ構成で主なものを以下に挙げます。
- src/main/java
- サーブレットなどのソースコードを格納するディレクトリです。
- src/test/java
- テストコードを格納するディレクトリです。
- src/main/resource
- リソースを格納するディレクトリです。ビルド時に、クラスファイルと同じディレクトリにコピーされます。
- src/main/webapp
- JSP ファイルや HTML ファイルなどのページを格納するディレクトリです。直下に WEB-INF ディレクトリがあります。
Maven2 Jetty Plugin を使う
これでウェブアプリケーションを開発できるようになりました。しかし、開発したウェブアプリケーションを試しに実行する環境がまだ整っていません。
Maven2 Jetty Plugin を使うと、ソースコードや JSP ファイルなどの変更を監視し、自動的にサーブレットエンジンに再配置してくれます。また、 Maven2 Jetty Plugin そのものがサーブレットエンジンなので起動が早く、試しに実行するには最適です。
Maven2 Jetty Plugin を使用するには、まずプラグインのインストールが必要です。そのために、Maven2 Jetty Plugin のある Maven リポジトリを pom.xml に記述します。
<project>
...
<pluginRepositories>
<pluginRepository>
<id>mortbay-repo</id>
<name>mortbay-repo</name>
<url>http://www.mortbay.org/maven2/snapshot</url>
</pluginRepository>
</pluginRepositories>
...
</project>
そして、Maven2 Jetty Plugin の設定を記述します。
<project>
...
<plugins>
...
<plugin>
<groupId>org.mortbay.jetty</groupId>
<artifactId>maven-jetty-plugin</artifactId>
<configuration>
<scanIntervalSeconds>10</scanIntervalSeconds>
</configuration>
</plugin>
...
</plugins>
...
</project>
「scanIntervalSeconds」は、ファイルの変更を監視する間隔を秒単位で表したものです。ここでは、10秒間隔で監視するように設定しています。
Maven2 Jetty Plugin を実際に使用するには、Maven プロジェクトのディレクトリ内で以下のコマンドを実行します。
mvn jetty:run
このコマンドを実行すると、Jetty サーバが立ち上がります。
なお、mvn に「-e」オプションを付けると、例外が発生した場合に、スタックトレースを表示させることができます。
標準では、「http://localhost:8080/<artifactId>」にアクセスすると、ウェブアプリケーションにアクセスできます。
Jetty サーバを終了するには、コマンドを実行したコンソールで「Ctrl+C」を押します。
参考文献
- Maven - Guide to Webapps
- Maven2 War Plugin - Rapid testing during development with the jetty6 plugin
- Maven2 の Tips を集める Wiki
- Maven2 Jetty Plugin
- Better Builds with Maven
DATE : 2006/07/08 (Sat)
コンストラクタからオブジェクトを生成するには、次のようにします。
ここでは、人を表す Person オブジェクトを定義し、生成しています。
function Person(name) {
this.name = name;
}
var aPerson = new Person("Taro");
「this」は、そのオブジェクトそのものを指します。つまり、上の例では、生成したPerson オブジェクトの name プロパティに引数の name を格納しています。
aPerson.name === "Taro"
コンストラクタ内でプロパティに関数を格納すれば、オブジェクトにメソッドを定義することもできます。しかし、この方法では、インスタンスが生成されるたびに関数も生成されることになります。メソッドはインスタンスごとに共通なことが多いため、毎回生成するとメモリの無駄になります。そこで、メソッドをオブジェクトに定義するには、そのオブジェクトの prototype プロパティにメソッドを定義します。
例えば、人の名前を返す getName メソッドを定義するコードは、以下のようになります。
function Person(name) {
this.name = name;
}
Person.prototype.getName = function() {
return this.name;
};
メソッドを使用する方法は、次の通りです。
ここでは、ブラウザに名前を出力してみます。
document.write(aPerson.getName());
複数のメソッドを定義するには、以下のように書くと簡単かもしれません。
ここでは、名前を取得するメソッドと設定するメソッドを設定してみます。
Person.prototype = {
getName = function() {
return this.name;
},
setName = function(name) {
this.name = name;
}
};
なお、オブジェクトに直接定義されたメソッドがある場合は、prototype プロパティに定義されたメソッドよりも優先されます。
ちなみに、プロパティのアクセス制限はできません。つまり、 Java で言う private, protected, package なプロパティは存在しません。全て public なプロパティとなります。
あえて private のようなプロパティを作りたければ、次のように、隠蔽したいプロパティの先頭に「_」を付けるなど、変名を用いるのも一つの手かもしれません。
function Person(name) {
this._name = name;
}
Person.prototype = {
getName = function() {
return this._name;
},
setName = function(name) {
this._name = name;
}
};
DATE : 2006/07/07 (Fri)
オブジェクトは、次のように生成します。
var a = new Object();
上のコードでは、変数 a にオブジェクトを格納しています。
JavaScript でのオブジェクトはプロパティの組からできています。
プロパティとは、識別子とその値からできています。
例えば、変数 a に格納したオブジェクトの「name」プロパティにアクセスするには、次のように記述します。
a.name = "n"
ここでは、name プロパティに「n」という文字列を格納しています。関数も格納できます。
プロパティは、あらかじめ宣言しておく必要はありません。次のように、自由に追加できます。
var a = new Object();
a.p1 = 1;
a.p2 = 2;
プロパティも変数と同様に、格納できる型に制限はありません。
定義されていないプロパティを参照すると、undefined が返されます。
また、次のような方法でプロパティにアクセスすることもできます。
var a = new Object();
a.p1 = 1;
a["p2"] = 2;
JavaScript で連想配列を実現する場合は、上の方法を使います。
var hash = new Object();
a["p1"] = 1;
なお、次のようにオブジェクトを生成することもできます。
var a = { p1 : 1, p2 : 2 };
この方法をとると、簡潔にオブジェクトを初期化できます。
ちなみに、追加したプロパティを削除するには、delete 演算子を使います。
delete a.p1;
DATE : 2006/07/04 (Tue)
配列
配列を生成するには、次のようにします。
var a = new Array();
次のように生成することもできます。
var a = [];
配列にアクセスするには、以下の通りです。
要素番号は0から始まります。
a[0] = 0; // 0番目の要素にアクセス
a[1] = 1; // 1番目の要素にアクセス
push メソッドを使うと、配列の末尾に値を追加できます。
var a = new Array();
a.push(1);
a.push(2, 3, 4);
push メソッドは、値を追加後の配列の長さを返します。
なお、値のない要素を参照すると、undefined が返されます。
また、length プロパティを用いることで、配列の長さを取得できます。
a.length
以下のようにすると、配列の要素を要素数分だけ確保できます。
var a = new Array(10);
この例では、要素数が10の配列を宣言しています。
ただし、配列の大きさは自動的に変化します。つまり、最大を越えた要素番号に値を格納すると、それだけ配列は大きくなります。
var a = new Array(2);
a[5] = 3;
この場合、配列の大きさは6に変化します。
なお、次のようにすると、配列の宣言と同時に値を格納できます。
var a = new Array(1, 2, 3, 4, 5);
var b = new Array(1, 2, 3, 4, "five");
次のようにも書けます。
var a = [1, 2, 3, 4, 5];
var b = [1, 2, 3, 4, "five"];
配列の要素においても、格納できる型は自由です。
つまり、以下のようにすれば、関数を実行する配列も作れます。
func1 = new function() {
（省略）
}
func2 = new function() {
（省略）
}
var a = new Array(func1, func2);
for (var i = 0; i < a.length; i++) {
a[i]();
}
また、Array オブジェクトには様々なメソッドが定義されています。詳細は、仕様書の「15.4 Array オブジェクト」（邦訳）を参照してください。
連想配列
以下のようにすると、連想配列を生成できます。
var a = new Object();
a["a"] = 1;
a["b"] = 2;
連想配列は、新たに生成したオブジェクトのプロパティとして設定されています。例えば、上のコードは、以下のように書き換えられます。
var a = new Object();
a.a = 1;
a.b = 2;
また、以下のように初期化して生成することもできます。
var a = {a : 1, b : 2}
連想配列の全要素にアクセスするには、for-in 文を使うと便利です。
for-in 文は、そのオブジェクトに定義されているプロパティ名を返します。
for (var i in a) {
var v = a[i];
if (v.hasOwnProperty(i)) {
（要素 v に対する処理）
}
}
変数 i に、 オブジェクト a のプロパティ名が設定されます。
通常は、「v.hasOwnProperty()」を実行する if 文がなくても問題ありません。ただし、ライブラリなどによって Object にプロパティが追加されている場合、そのプロパティ名まで変数 i に設定されてしまいます。
Object 型の hasOwnProperty メソッドを使用することで、そのオブジェクトそのものに設定されているプロパティかどうかを確かめることができます。
DATE : 2006/07/03 (Mon)
分岐
分岐を表す制御文として、JavaScript には if 文があります。
if (a == 3) {
var b = 3;
}
if の後のカッコの中の式が true になれば、 if 文に指定されたブロックが実行されます。
また、switch 文もあります。
var b;
switch(a) {
case 0 :
b = "a":
break;
case 1 :
b = "b";
break;
default :
b = "c";
break;
}
case の後に指定できる値の型は自由です。switch 文の対象となる値と case の後に指定した値が「===」で等しくなる（型も同じで、値も同じ）場合、case 文で指定された処理が実行されます。
繰り返し文
for 文
C や Java などの for 文と同様です。ただし、繰り返しの継続条件は、第2式が true になることです。
var sum = 0;
for (var i = 0; i < 10; i++) {
sum += i + 1;
}
for-in 文については、ここでは省略します。
while 文
var i = 0;
var sum = 0;
while (i <= 10) {
sum += i;
i++;
}
while の後のカッコの中が true である間、ブロック内の処理を繰り返します。
do-while 文
var i = 0;
var sum = 0;
do {
i++;
sum += i;
} while(i < 10);
繰り返し制御
繰り返し文の中では、break 文や continue 文が使用できます。
また、繰り返し文にラベルを付けることで、break 文や continue 文が動作する範囲を決めることもできます。
LOOP :
while (true) {
while (true) {
if (a < 0) {
break LOOP;
}
（省略）
}
}
そのため、goto 文はありません。
return 文
関数の動作を止め、値を返します。
function func() {
（省略）
return 1;
}
値を指定しない場合は、undefined を返します。
例外
throw 文
例外を投げます。例外は、Error オブジェクトで生成できます。Error オブジェクトについては、ECMAScript の仕様書を参照してください。
function func() {
（省略）
throw new Error("error");
}
try 文
例外オブジェクトを受け取り、処理を行うための文です。try 文には、以下の組み合わせがあります。
try-catch
例外を catch 文で受け取り、処理する文です。catch の後のカッコ内にある名前が、 catch 文で処理を行う例外が格納される変数名となります。
try {
（省略）
}
catch (e) {
document.write(e.message);
}
try-finally
try 文のブロックの途中で例外が発生したとしても、必ず実行される文が finally 文です（例外が発生しなくても実行されます）。後処理などを記述しておくと便利です。
try {
（省略）
}
finally {
（後処理）
}
try-catch-finally
try {
（省略）
}
catch (e)
{
（例外処理）
}
finally {
（後処理）
}
with 文
with 文でオブジェクトを指定すると、続くブロック内では、そのオブジェクト名を省略することができます。
以下のコードは、with 文を使用しない場合で Math オブジェクトの PI 定数の値をブラウザに表示するコードです。
document.write(Math.E);
以下のコードは with 文を使用する場合です。
with(Math) {
document.write(PI);
}
