@ JavaScript

ビルトインオブジェクト

ビルトインオブジェクトとは

ビルトインオブジェクトとは、JavaScript にはじめから用意されている多くのメソッドやプロパティのオブジェクト郡です。ECMAScript の仕様に基づき JavaScript であらかじめ定義されているもので、特に何もしなくても使用することができます。ビルトインオブジェクトはつぎのようなオブジェクト郡として整理されています。

Object オブジェクト
Function ファンクション(関数)
Array 配列
String 文字列
Boolean 真偽値
Number 数値
Math 数学
Date 日付
RecExp 正規表現
Error エラー

たとえば、文字列の長さを調べるなら String オブジェクトの lengthプロパティ、現在の日付は Date オブジェクトの getDate() メソッドを使います。

Object オブジェクト

Object オブジェクトは単純なオブジェクトです。主に単純なデータを名前を持った配列(連想配列)のように使いたい場合に使われます。

作成方法は new を使う以外にも、{} を使って生成することができます。

example.js

myObj = new Object();

example.js

myObj = {};

Function オブジェクト

Function オブジェクトは function 定義によって作られるオブジェクトです。Function オブジェクトを作るにはつぎのような方法があります。

example.js

myFunc = function(){
  return 1;
}

他のオブジェクトのように new を使って function をつくることも可能です。つぎの例は上記と同じ機能を持つ function になります。

example.js

myFunc = new function("return 1");

Function オブジェクトは ()(実行演算子)を使って実行することができます。

example.js

myFunc = function(){
  return 1;
}
document.write(myFunc());

また () で実行する際、かならずしも変数に代入する必要はありません。以下のような記述(即時関数)も可能です。

example.js

test = (function(){
  return 1;
})();
alert(test);

JQuery では、function オブジェクトを引数として渡すというソースコードをかなり頻繁に使います。

Function オブジェクトの中で使われる this

function の中では this という変数が使えます。これは function を実行した際に自動的にオブジェクトが代入される変数です。代入されたオブジェクトは、function をどのオブジェクトのプロパティと解釈して呼び出したかによって決定されます。

具体例を見てみましょう。

example.js

function thistest(){
  alert(this);
}
thistest();

この例では thistest() は window オブジェクトのプロパティとしてよびだされているので、this に入るのは window オブジェクトになります。

つぎに thistest を他のオブジェクトのプロパティとして代入してみます。

example.js

function thistest(){
  alert(this);
}
otherObj = {};
otherObj.thistest = thistest;
otherObj.thistest();

この場合の this は otherObj になります。

DOM で取得したオブジェクトのイベントハンドラの場合も見て見ましょう。

example.js

anchorNode = document.getElementById('testlink');
anchorNode.onclick = function(){
  alert(this.href);
}

上記ではクリックイベントを testlink という id を持った要素に設定しています。この場合の this はその要素ノードになります。そのためクリックするとクリックされた要素ノードの href プロパティの値が表示されます。

Array オブジェト

Array は配列に関するオブジェクトです。複数の値を持つ配列に対して、数字のキーにより追加したり削除したりする命令が定義されています。

アイテムの数を調べる

配列にアイテムがいくつ含まれるかは、length プロパティで調べることができます。

プロパティ 説明
length 配列に含まれるアイテムの数

アイテムを追加・削除する

配列の最初や最後に1つまたは複数のアイテムを追加するメソッドがあります。

メソッド(引数) 説明 実行後に返す値
push(追加アイテム1, 追加アイテム2, …) 配列の最後に1つ、または複数のアイテムを追加する 追加された最後のアイテム
pop() 配列から最後のアイテムを取り除く 取り除いたアイテム
unshift(追加アイテム1 ,追加アイテム2, …) 配列の最初に1つ、または複数のアイテムを追加する 追加された最初のアイテム
shift() 配列から最初のアイテムを取り除く 取り除いたアイテム

配列の途中のアイテムを差し替える

配列の途中のアイテムを差し替える場合には splice() を使うと便利です。削除する数を 0 とすることで追加のみ、追加アイテムを指定しないことで削除のみ、といった使いかたもできます。

メソッド(引数) 説明
splice(index, 削除する数, 追加アイテム1, 追加アイテム2, …) 配列の最後に1つ、または複数のアイテムを追加する

つぎにこれら Array オブジェクトの各メソッドを使ったサンプルコードを示します。

example.js

var nlist = [1,2,3,4,5];
var shiftitem = nlist.shift();
nlist.push(6);
nlist.splice(1,3);
alert(nlist);

配列を操作するメソッドには、他にも以下のようなものが用意されています。

アイテムを並び替える

メソッド(引数) 説明
reverse() 配列のアイテムを逆順に並べ替える
sort() 配列のアイテムをソートする。通常は文字ならアルファベット順。

sort と reverse は並び替えた配列を返すのではなく、実行するとその配列そのものを並び変える点に注意してください。

新しい配列を作る

メソッド(引数) 説明
concat() 2つの配列を結合する
slice() 配列の一部を取り出す

文字列に変換する

メソッド(引数) 説明 実行後に返す値
join(結合される文字列) 配列の全アイテムを結合し、文字列にする 結合した文字列

String オブジェト

String は文字列操作に関するオブジェクトです。文字列を数えたり、文章の一部を置換したりする機能がまとめられています。

指定した位置の文字を取得する

メソッド 説明
charAt() 指定した位置の文字をかえします

文字の位置を調べる

メソッド 説明
indexOf() 文字列を検索し、最初に見つかった位置を返す
lastIndexOf() 文字列を検索し、最後に見つかった位置を返す

文字列から一部を抜き出す

メソッド 説明
slice() 文字列から最初と最後を指定して選択した一部を抜き出し、新しい文字列を返す
substring() 文字列から一部を抽出して、新しい文字列を返す
subStr() 文字列から一部を抽出して、新しい文字列を返す

文字列が含まれているか調べる、置換する(正規表現を使う)

メソッド 説明
match(正規表現) 引数に正規表現で指定して、該当する最初の文字列を返す
replace(正規表現, 置き換える Srting オブジェクト) 引数に正規表現でして、該当する箇所を書き換える
search(正規表現) 引数に正規表現でして、該当する箇所の位置を返す

大文字や小文字にかえる

メソッド 説明
toLowerCase() String オブジェクトを小文字にして返す
toUpperCase() String オブジェクトを大文字にして返す

配列に変換する

メソッド 説明
sprint(区切り文字, 配列の個数) String オブジェクトを小文字にして返す

Math オブジェト

Math オブジェクトには数学で使われるメソッドやプロパティがあります。他のオブジェクトと違いインスタンスを作成しないで、そのまま利用します。

example.js

var p = Math.PI;
var q = Math.floor(p);

上記のように Math オブジェクトの定数 PI を使うには Math.PI、メソッド floor() を使うには Math.floor() のように記述します。

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() 平方根

Date オブジェクト

Date オブジェクトは日付と時刻を扱うことができます。

つぎのようにして作成します。

example.js

today = new Date();

このようにすることで今日の日付を待った Date オブジェクトを作ることができます。作成された Date オブジェクトには getFullYear() などのそのオブジェクトが持つ日付や時刻を、文字列や数字で受け取るメソッドが用意されています。

RegExp オブジェクト

RegExp は正規表現を行うためのオブジェクトです。正規表現は文字列のマッチなどに使われる非常に強力な機能ですが、特殊な文法を必要とするため、習得しづらい技術かもしれません。正規表現を使うと文字列がメールアドレスの形式であるか、といったことや、4桁の数字で頭に\が付くもの、などのチェックが可能です。

example.js

var str = "JavaScript";
var pattern = /S(cript|CRIPT)/;
if( pattern.match(str) ){
  console.log("マッチしました");
}else{
  console.log("マッチしませんでした");
}

Script または SCRIPT にマッチするもの

example.js

/S(cript|CRIPT)/

4桁の数字で頭に \ がつくもの

example.js

/\\[0-9]{4}/

メールアドレス形式のチェック

example.js

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/