js_about_06 - 0x0b

Mozilla Javascriptの続き

定義済みコアオブジェクト

このセクションではコア JavaScript の定義済みオブジェクトについて説明します。

Array オブジェクト
Boolean オブジェクト
Date オブジェクト
Function オブジェクト
Math オブジェクト
Number オブジェクト
RegExp オブジェクト
String オブジェクト

Array オブジェクト

JavaScript には配列を表す明確なデータ型というものはありません。しかし、定義済みの Array オブジェクトとそのメソッドを使用することで、アプリケーションで配列を扱うことができます。Array オブジェクトにはさまざまな方法で配列を操作するメソッドがあります。例えば、配列の要素をつなぎ合わせたり、逆転したり、ソートしたりするものがあります。また、配列の長さを決定するプロパティや、正規表現とともに使用するプロパティもあります。

配列とは、その個々の値を名前やインデックスで参照する順序集合です。例えば、その従業員番号でインデックス付けした、従業員の名前からなる emp という配列を作ることができます。すると、emp[1] は従業員番号 1 を、emp[2] は従業員番号 2 を、というように指すようになります。

配列の作成

Array オブジェクトは次のようにして作成します。

1. arrayObjectName = new Array(element0, element1, ..., elementN)
2. arrayObjectName = new Array(arrayLength)

arrayObjectName は新しいオブジェクト名または既存のオブジェクトのプロパティ名です。Array のプロパティやメソッドを用いるときは arrayObjectName は既存の Array オブジェクトの名前または既存のオブジェクトのプロパティ名です。

element0, element1, ..., elementN は配列の要素の値からなるリストです。この形式で指定する際に、配列はその要素として指定した値で初期化されます。また、配列の length プロパティに引数の個数がセットされます。

arrayLength は配列の初期状態の長さです。次のコードは 5 つの要素を持つ配列を作成します。

billingMethod = new Array(5)

配列リテラルも Array オブジェクトです。例えば次のリテラルは Array オブジェクトです。配列リテラルの詳細については 配列リテラル をご覧ください。

coffees = ["French Roast", "Columbian", "Kona"]

配列要素の格納

値を要素に代入することで配列要素を格納することができます。

emp[1] = "Casey Jones"
emp[2] = "Phil Lesh"
emp[3] = "August West"

配列作成時に要素を格納することもできます。

myArray = new Array("Hello", myVar, 3.14159)

配列要素の参照

要素の順番を表す数を用いて配列の要素を参照することができます。例えば、次の配列を定義したとします。

myArray = new Array("Wind","Rain","Fire")

すると、その配列の最初の要素は myArray[0] として、第 2 の要素は myArray[1] として参照できるようになります。

要素のインデックスはゼロ (0) から始まりますが、配列の長さ（例：myArray.length）はその配列の要素数を直接表します。

Array のメソッド
Array オブジェクトには以下のメソッドがあります。

concat は 2 つの配列を結合し、新しい配列を返す。

   myArray = new Array("1","2","3")
   myArray = myArray.concat("a", "b", "c"); // myArray は ["1", "2", "3", "a", "b", "c"] となる

join(deliminator = ",") は配列の全要素を結合し、文字列にする。

   myArray = new Array("Wind","Rain","Fire")
   list = myArray.join(" - "); // list は "Wind - Rain - Fire" となる

pop は配列から最後の要素を取り除き、その要素を返す。

   myArray = new Array("1", "2", "3");
   last=myArray.pop(); // MyArray は ["1", "2"] となり、last = "3" となる

push は 1 つ以上の要素を配列の最後に追加し、追加された最後の要素を返す。

   myArray = new Array("1", "2");
   myArray.push("3"); // MyArray は ["1", "2", "3"] となる

reverse は配列の要素を逆順に並び替える。最初の配列要素は最後に、最後のものは最初に来る。

   myArray = new Array ("1", "2", "3");
   myArray.reverse(); // 配列を並び替え、myArray = [ "3", "2", "1" ] となる

shift は配列から最初の要素を取り除き、その要素を返す。

   myArray = new Array ("1", "2", "3");
   first=myArray.shift(); // MyArray は ["2", "3"] となり、first は "1" となる

slice (start_index, upto_index) は配列の一部分を抽出し、新しい配列を返す。

   myArray = new Array ("a", "b", "c", "d", "e");
   myArray = myArray.slice(1,4); //インデックス 1 からスタートし、インデックス 4 までの全要素を抽出し、[ "b", "c", "d" ] を返す。

splice(index, count_to_remove, addelement1, addelement2, ...) は配列に要素を追加し、かつ/または配列から要素を取り除く。

   myArray = new Array ("1", "2", "3", "4", "5");
   myArray.splice(1,3,"a","b","c", "d"); // MyArray は ["1", "a", "b", "c", "d", "5"] となる
  // このコードはインデックス 1（"2" があるところ）からスタートし、そこの 3 要素を取り除き、その場所に連続した要素をすべて挿入する

sort は配列の要素をソートする。

   myArray = new Array("Wind","Rain","Fire")
   myArray.sort(); // 配列をソートし、myArrray = [ "Fire", "Rain", "Wind" ] となる

sort は配列の内容をどうソートするかを決定するコールバック関数をとることもできます。関数は 2 つの値を比較し、3 つの値のうちの 1 つの値を返します。

ソートシステムにとって a が b より小さい場合、-1（または任意の負数）を返す
ソートシステムにとって a が b より大きい場合、1（または任意の正数）を返す
a と b が等価と見なされる場合、0 を返す
例えば、次のコードは配列の最後の文字についてサポートします。

   var sortFn = function(a,b){
       if (a[a.length - 1] < b[b.length - 1]) return -1;
       if (a[a.length - 1] > b[b.length - 1]) return 1;
       if (a[a.length - 1] == b[b.length - 1]) return 0;
       }
   myArray.sort(sortFn); // 配列をソートし、myArray = ["Wind","Fire","Rain"] となる

unshift は 1 つ以上の要素を配列の先頭に追加し、その配列の新しい長さを返す。
2 次元配列

次のコードは 2 次元配列を作成します。

a = new Array(4)
for (i=0; i < 4; i++) {
   a[i] = new Array(4)
   for (j=0; j < 4; j++) {
      a[i][j] = "["+i+","+j+"]"
   }
}

この例では次の行を持つ配列が作成されます。

0 行目：[0,0][0,1][0,2][0,3]
1 行目：[1,0][1,1][1,2][1,3]
2 行目：[2,0][2,1][2,2][2,3]
3 行目：[3,0][3,1][3,2][3,3]

配列と正規表現
配列が正規表現と文字列との間のマッチ結果であるとき、その配列はそのマッチについての情報を持つプロパティと要素を返します。配列は RegExp.exec、String.match、String.split の戻り値です。正規表現とともに配列を使用することに関する情報は、第 4 章の 正規表現 をご覧ください。

Boolean オブジェクト

Boolean オブジェクトはプリミティブな真偽値型のラッパです。Boolean オブジェクトを作成するには次のような構文を使用します。

booleanObjectName = new Boolean(value)

プリミティブな真偽値の true と false を Boolean オブジェクトの true や false という値と混同しないでください。undefined や、null、0、NaN、空文字列のどれでもない値を持つどんなオブジェクトも、そして false という値を持つ Boolean オブジェクトも、条件文に通されると true に評価されます。詳しくは if...else 文 を参照してください。

Date オブジェクト

JavaScript には日付を表すデータ型がありません。しかしながら、Date オブジェクトとそのメソッドを使用することで、アプリケーションで日付と時刻を扱うことができます。Date オブジェクトには日付をセット、取得、操作するためのメソッドがたくさんあります。プロパティは一切ありません。

JavaScript は Java と同じように日付を扱います。2 つの言語には共通する日付に関するメソッドが多くあります。また、両言語ともに日付を 1970 年 1 月 1 日 00:00:00 からのミリ秒数として保持します。

Date オブジェクトの範囲は 1970 年 1 月 1 日 (UTC) を基準に -100,000,000 日から 100,000,000 日です。

Date オブジェクトは次のようにして作成します。

dateObjectName = new Date([parameters])

ここで dateObjectName は作成する Date オブジェクトの名前です。すなわち、新しいオブジェクトの名前か、既存のオブジェクトのプロパティ名です。

上記の構文で、parameters は次のどの形式で指定してもかまいません。

引数なし：今日の日付と時刻を作成する。例えば、today = new Date()。
次の形式 "月 日, 年 時:分:秒" で日付を表した文字列。例えば、Xmas95 = new Date("December 25, 1995 13:30:00")。時、分、または秒を省略するとその値はゼロにセットされる。
年、月、日を表す整数値のセット。例えば、Xmas95 = new Date(1995,11,25)。
年、月、日、時、分、秒を表す整数値のセット。例えば、Xmas95 = new Date(1995,11,25,9,30,0)。
JavaScript 1.2 以前
Date オブジェクトは次のように振る舞います。

1970 年より前の日付は許されない。
JavaScript はプラットフォーム特有の日付の便宜や挙動に依存する。つまり、Date オブジェクトの挙動はプラットフォームごとに異なる。

Date オブジェクトのメソッド
Date オブジェクトの日付や時刻を扱うメソッドは、大まかに次のカテゴリに分けることができます。

"set" メソッド：日付や時刻の値を Date オブジェクトにセットする。
"get" メソッド：Date オブジェクトから日付や時刻の値を取得する。
"to" メソッド：Date オブジェクトから文字列の値を返す。
parse および UTC メソッド：Date 文字列をパースする。
"get" および "set" メソッドを用いることで、秒、分、時、日にち、曜日、月、年を別々に取得したりセットしたりすることができます。曜日を返す getDay メソッドというものがありますが、これに対応する setDay メソッドというものはありません。なぜならば、曜日は自動的にセットされるからです。これらのメソッドはこれらの値を表すのに整数を用います。

秒および分：0 から 59
時：0 から 23
曜日：0（日曜）から 6（土曜）
日にち：1 から 31
月：0（1 月）から 11（12 月）
年：1900 年から数えた年
例えば、次の日付を定義したとします。

Xmas95 = new Date("December 25, 1995")

すると、Xmas95.getMonth() は 11 を返し、Xmas95.getFullYear() は 1995 を返します。

getTime メソッドや setTime メソッドは日付を比較するのに便利です。getTime メソッドは 1970 年 1 月 1 日 00:00:00 からのミリ秒数を返します。

例えば、次のコードはその年の残りの日数を表示します。

today = new Date()
endYear = new Date(1995,11,31,23,59,59,999) // 日と月をセット
endYear.setFullYear(today.getFullYear()) // 今年が何年かをセット
msPerDay = 24 * 60 * 60 * 1000 // 1 日のミリ秒数をセット
daysLeft = (endYear.getTime() - today.getTime()) / msPerDay
daysLeft = Math.round(daysLeft) // その年の残り日数を返す

この例では今日の日付を保持する today という名前の Date オブジェクトを作成します。そして endYear という名前の Date オブジェクトを作成し、その年が何年かという値をセットします。さらに、1 日のミリ秒数を用いて今日と endYear の間の日数を算出します。これには getTime を使用し、さらに全体の日数に丸めます。

parse メソッドは、日付を表す文字列から既存の Date オブジェクトに値を代入するのに便利です。例えば、次のコードは parse と setTime を用いて日付の値を IPOdate オブジェクトに代入します。

IPOdate = new Date()
IPOdate.setTime(Date.parse("Aug 9, 1995"))

Date オブジェクトの使用例
次の例では、関数 JSClock() はデジタル時計のような形式で時刻を返します。

function JSClock() {
   var time = new Date()
   var hour = time.getHours()
   var minute = time.getMinutes()
   var second = time.getSeconds()
   var temp = "" + ((hour > 12) ? hour - 12 : hour)
   if (hour == 0)
      temp = "12";
   temp += ((minute < 10) ? ":0" : ":") + minute
   temp += ((second < 10) ? ":0" : ":") + second
   temp += (hour >= 12) ? " P.M." : " A.M."
   return temp
}

JSClock 関数はまず time という新しい Date オブジェクトを作成します。引数は与えられないため、現在の日付と時刻から time が作成されます。そして getHours、getMinutes および getSeconds メソッドを呼び出し、現在の時間、分、秒の値を hour、minute、second にそれぞれ代入します。

その次の 4 つの文はその時刻を元に文字列の値を構築します。最初の文は変数 temp を作成し、それに条件式を用いて値を代入します。hour が 12 よりも大きい場合は (hour - 12) を、それ以外の場合は単純に hour をそれぞれ代入します。ただし hour が 0 の場合は 12 とします。

その次の文は minute の値を temp に付け加えます。minute の値が 10 より小さい場合、条件式は区切りのコロンと分の先頭のゼロを追加し、そうでない場合は区切りのコロンだけを追加します。そして同様にして秒の値を temp に付け加えます。

最後に、条件式は hour が 12 以上の場合は "PM" を、そうでない場合は "AM" をそれぞれ temp に付け加えます。

Function オブジェクト

定義済みの Function オブジェクトは、関数としてコンパイルさせたい JavaScript コードの文字列を指定します。

Function オブジェクトを作成するには次のようにします。

functionObjectName = new Function ([arg1, arg2, ... argn], functionBody)

functionObjectName は変数名または既存のオブジェクトのプロパティ名です。オブジェクトに小文字のイベントハンドラ名を続けて、window.onerror のようにして指定することもできます。

arg1, arg2, ... argn は関数が仮引数名として使用する引数です。それぞれが JavaScript の識別子として妥当な文字列である必要があります。例えば、"x" や "theForm" などです。

functionBody は関数の本体としてコンパイルさせたい JavaScript コードを表す文字列です。

Function オブジェクトはそれが使用されるたびに評価されます。これは関数を宣言し、それをコード内で呼び出す方法よりも非効率的です。宣言された関数はコンパイルされるからです。

ここで説明した関数の定義方法に加えて、function 文と関数式を用いることもできます。詳しくは コア JavaScript 1.5 リファレンス を参照してください。

次のコードは関数を変数 setBGColor に代入します。この関数は開いている文書の背景色をセットします。

var setBGColor = new Function("document.bgColor='antiquewhite'")

Function オブジェクトを呼び出すには、それがあたかも関数であるかのように変数名を指定すればいいのです。次のコードは setBGColor 変数で指定された関数を実行します。

var colorChoice="antiquewhite"
if (colorChoice=="antiquewhite") {setBGColor()}

次のどちらかの方法を使用することでイベントハンドラに関数を代入することができます。

1. document.form1.colorButton.onclick=setBGColor
2. <INPUT NAME="colorButton" TYPE="button"
      VALUE="Change background color"
      onClick="setBGColor()">

上記の変数 setBGColor を作成することは次の関数を宣言することと同じようなことです。

function setBGColor() {
   document.bgColor='antiquewhite'
}

関数を変数に代入することは関数を宣言することと似ていますが、異なる点もあります。

var setBGColor = new Function("...") のようにして関数を変数に代入すると、setBGColor は new Function() を用いて作成した関数への参照がその値であるような変数になります。
function setBGColor() {...} のようにして関数を作成すると、setBGColor は変数ではなく関数の名前になります。
関数を関数の中に入れ子にすることができます。内側の関数は外側の関数に対してプライベートになります。

内側の関数には外側の関数の文からしかアクセスできません。
内側の関数は外側の関数の引数や変数を使用できます。外側の関数は内側の関数の引数や変数を使用できません。

Math オブジェクト

定義済みの Math オブジェクトには数学的な定数や関数を実現するプロパティやメソッドがあります。例えば、Math オブジェクトの PI プロパティは円周率の値 (3.141...) を表します。これはアプリケーションでは次のように使用します。

Math.PI

同様に、標準的な数学関数が Math のメソッドになっています。これは三角関数、対数関数、指数関数などがあります。例えば、三角関数のサインを使用したい場合は次のように書きます。

Math.sin(1.56)

Math の三角関数のメソッドはすべてラジアンの引数をとります。

次の表で Math オブジェクトのメソッドを簡単に説明します。

メソッド	説明
abs	絶対値
sin, cos, tan	標準的な三角関数。引数はラジアン
acos, asin, atan, atan2	逆三角関数。ラジアンの値を返す
exp, log	指数関数と自然対数。底は e
ceil	引数以上の整数のうち、最小のものを返す
floor	引数以下の整数のうち、最大のものを返す
min, max	2 つの引数のうち、大きいもの、小さいものをそれぞれ返す
pow	累乗。第 1 引数は底、第 2 引数は指数
random	0 から 1 までの乱数を返す
round	引数を直近の整数に丸める
sqrt	平方根

他の多くのオブジェクトとは異なり、決して自分用の Math オブジェクトを作成してはいけません。常に定義済みの Math オブジェクトを使用してください。

Number オブジェクト

Number には、最大値、非数、無限大といった数値定数を表すプロパティがあります。これらのプロパティの値を変更することはできません。これらは次のように使用します。

biggestNum = Number.MAX_VALUE
smallestNum = Number.MIN_VALUE
infiniteNum = Number.POSITIVE_INFINITY
negInfiniteNum = Number.NEGATIVE_INFINITY
notANum = Number.NaN

常に上記のようにして定義済みの Number オブジェクトのプロパティを参照します。自分で作成した Number オブジェクトのプロパティとして参照するのではありません。

次の表では Number オブジェクトのプロパティについて簡単に説明します。

プロパティ	説明
MAX_VALUE	最大の表現可能な値
MIN_VALUE	最小の表現可能な値
NaN	特殊な "not a number"（非数）の値
NEGATIVE_INFINITY	特殊な負の無限大。オーバフロー時に返される
POSITIVE_INFINITY	特殊な正の無限大。オーバフロー時に返される

Number のプロトタイプは Number オブジェクトから情報を様々な形で取り出すメソッドを備えています。次の表では Number.prototype のメソッドについて簡単に説明します。

メソッド	説明
toExponential	数値を指数表示の文字列にして返す
toFixed	数値を固定小数点表示の文字列にして返す
toPrecision	数値を指定した精度の固定小数点表示の文字列にして返す
toSource	指定した Number オブジェクトをオブジェクトリテラルにして返す。この値を利用して新しいオブジェクトを作成できる。Object.toSource メソッドを上書きする
toString	指定したオブジェクトを文字列にして返す。Object.toString メソッドを上書きする
valueOf	指定したオブジェクトのプリミティブ値を返す。Object.valueOf メソッドを上書きする

RegExp オブジェクト

RegExp オブジェクトを用いることで正規表現が使用できるようになります。これは第 4 章の 正規表現 で説明しています

String オブジェクト

String オブジェクトにはプロパティが 1 つあります。それは length で、これは文字列中の文字の数を表します。例えば、次のコードは x に 13 という値を代入します。"Hello, World!" は 13 文字だからです。

mystring = "Hello, World!"
x = mystring.length

String オブジェクトには 2 種類のメソッドがあります。これは、substring や toUpperCase のような、その文字列そのものを変形させたものを返すものと、bold や link のような、その文字列を HTML として整形したものを返すものです。

例えば先の例を流用すると、mystring.toUpperCase() も "hello, world!".toUpperCase() も、"HELLO, WORLD!" という文字列を返します。

substring メソッドは 2 つの引数をとり、その 2 つの引数の間の文字列のサブセットを返します。先の例を流用すると、mystring.substring(4, 9) は "o, Wo" という文字列を返します。詳しくは コア JavaScript リファレンス の String オブジェクトの substring メソッドを参照してください。

String には自動的に HTML に整形するメソッドも多くあります。これは太字のテキストを生成する bold や、ハイパーリンクを生成する link などがあります。例えば、link メソッドを用いてある架空の URL へのハイパーリンクを作成するには次のようにします。

mystring.link("http://www.helloworld.com")

次の表で String オブジェクトのメソッドについて簡単に説明します。

メソッド

説明

|anchor HTML の名前付きアンカを作成する。
|big, blink, bold, fixed, italics, small, strike, sub, sup HTML の整形済み文字列を作成する。
|charAt, charCodeAt 文字列中の指定した位置の文字または文字コードを返す。

indexOf, lastIndexOf	文字列中の指定した部分文字列の位置や指定した部分文字列の最後の位置をそれぞれ返す
link	HTML のハイパーリンクを作成する
concat	2 つの文字列を連結し、新しい文字列を返す
fromCharCode	指定した Unicode 値の連続から文字列を構成する。これは String クラスのメソッドであり、String インスタンスのものではない

|split|String オブジェクトを文字列の配列に分配する。文字列を部分文字列に分割することで行う。
|slice|文字列から一部分を抽出し、新しい文字列を返す。

substring, substr	文字列の指定したサブセットを返す。開始および終了のインデックス、または開始のインデックスおよび長さのいずれかを指定する
match, replace, search	正規表現を取り扱う
toLowerCase, toUpperCase	文字列をすべて小文字に、またはすべて大文字にしてそれぞれ返す

文字列リテラルは String オブジェクトとは別物

String オブジェクトは文字列のプリミティブデータ型のラッパです。文字列リテラルと String オブジェクトを混同してはいけません。例えば、次のコードでは文字列リテラルの s1 と String オブジェクトの s2 を作成します。

s1 = "foo" // 文字列リテラルの値を作成
s2 = new String("foo") // String オブジェクトを作成

文字列リテラルの値でなら、String オブジェクトのどんなメソッドでも呼び出すことができます。JavaScript が自動的に文字列リテラルを一時的な String オブジェクトに変換し、メソッドを呼び出し、その一時的な String オブジェクトを破棄するのです。String.length プロパティを文字列リテラルで使うこともできます。

特に String オブジェクトを使う必要がない場合は文字列リテラルを使うようにしてください。String オブジェクトは直観的ではない挙動をとることがあるからです。次の例をご覧ください。

s1 = "2 + 2" // 文字列リテラルの値を作成
s2 = new String("2 + 2")// String オブジェクトを作成
eval(s1) // 数値 4 を返す
eval(s2) // 文字列 "2 + 2" を返す