第1章 JavaScript導入ガイド

ビルトインオブジェクト

2017年10月29日

3種類のオブジェクト

JavaScriptには、ビルトインオブジェクト、DOMオブジェクト、Webブラウザオブジェクトの3つの組み込みオブジェクトがあります。

ビルトインオブジェクト
ECMAScriptでJavaScriptの標準仕様として規定されているオブジェクトです。
DOMオブジェクト
HTML要素を操作するためのオブジェクトです。
Webブラウザオブジェクト
ブラウザが提供するオブジェクトです。

この章ではビルトインオブジェクトを紹介します。

ビルトインオブジェクトの種類

JavaScriptの実行環境には、あらかじめ組み込まれているビルトインオブジェクトがあります。ビルトインオブジェクトには、文字列や数値、日付の操作など、様々な処理を行うためのオブジェクト郡が用意されており、簡単に利用することができます。

JavaScriptの標準仕様として規定されているビルトインオブジェクトには、以下の様なものがあります。

オブジェクト 説明
Object すべてのオブジェクトの元になる基本オブジェクト
Function 関数を作成するためのオブジェクト
Boolean true、falseといった論理値を扱うためのオブジェクト
String 文字列操作をするためのオブジェクト
RegExp 正規表現を表すオブジェクト
Array 配列を扱うためのオブジェクト
Number 数値を扱うためのオブジェクト
Math 数学計算を行うオブジェクト
Date 日付や時刻を扱うためのオブジェクト

ビルトインオブジェクトはいつでもnew演算子を使って呼び出せます。
それでは、new 演算子を使ってインスタンスを作り、Dateクラスの機能を使ってみましょう。ビルトインオブジェクトが提供するメソッドやプロパティはドット演算子( . )を使ってアクセスできます。

// Dateクラスのインスタンスを作成
var d = new Date();
// getFullYear()で年を出力
d.getFullYear();

2017

ビルトインオブジェクトとオブジェクトリテラル

Array、やNumber、Stringオブジェクトなどはnew演算子を使わず、リテラルやfunctionキーワードを使って生成することができます。この方が簡単で、実行速度も速いです。

x = new Array();
x = [];
x = new Boolean(); // プリミティブ値はfalse
x = false;
x = new Function();
x = function(){};
x = new Number(); // プリミティブ値は0
x = 0;
x = new Object();
x = {};
x = new RegExp();
x = /(?:)/;
x = new String();
x = "";

プリミティブ値は、文字列や数値など、プロパティやメソッドを持たない値です。JavaScriptでは、プリミティブ値であっても必要な際にオブジェクトに変換され、プロパティやメソッドにアクセスすることができます。

たとえば、StringオブジェクトのtoLowerCase()メソッドを使いたい際、プリミティブ値からtoLowerCase()メソッドを呼び出すことができます。
まずは、Stringオブジェクトから普通にtoLowerCase()メソッドにアクセスしてみましょう。

// Stringオブジェクトを作成
var obj = new String("Hello");
// typeof演算子を使ってデータ型を出力
console.log(typeof obj);
// toLowerCase()メソッドの呼び出し
obj.toLowerCase();
object
hello

次は、プリミティブ値からStringオブジェクトのtoLowerCase()メソッドにアクセスしてみます。

// プリミティブ値を作成
var txt = "Hello";
// typeof演算子を使ってデータ型を出力
console.log(typeof txt);
// toLowerCase()メソッドの呼び出し
txt.toLowerCase();
string
hello

文字列を代入したtxt変数は、typeof演算子にかけると「string」が返されます。この時点ではプリミティブ値ですが、toLowerCase()にアクセスしようとすると自動的にオブジェクトに変換されます。処理が終わった後は、また自動的にプリミティブ値に戻ります。
このように、JavaScriptではオブジェクトをあまり意識せずに利用できるように工夫されています。

このあとそれぞれのビルトインオブジェクトに用意されたプロパティやメソッド、使い方を紹介していきますが、Function、Boolean、RegExpはほとんどの場合使うメリットがないため紹介を省きます。

Object

Objectオブジェクトは基本オブジェクトとしてすべてのオブジェクトに継承されています。Object.prototypeは他のオブジェクトにも引き継がれ、prototypeからいくつかのメソッドやプロパティにアクセスすることができます(引き継ぎ先で上書きされている場合があります)。

// インスタンスを作成
var obj = new Object();

ArrayオブジェクトはObjectのtoString()メソッドを上書きし、配列をカンマ区切りで結合します。

var array = ["A", "B", "C"];
array.toString( array );
A,B,C

String

Stringオブジェクトは、文字列を操作するためのプロパティやメソッドの集まりです。

プロパティ

String オブジェクトのプロパティの使用例と一覧を紹介します。

var s = "ABCDE";
// 文字列の長さを返す
s.length;
5
プロパティの一覧
length 文字列の長さを返します。

メソッド

Stringオブジェクトのメソッドの使用例と一覧を紹介します。

var s = "ABCDE";
// 文字列の一部を出力
s.substr(2,2);
CD

Stringオブジェクトのメソッドはリテラルから直接アクセスすることができます。

// 文字列の一部を出力
"ABCDE".substr(2,2);
CD
メソッドの一覧
charAt(n) n番目の文字を返します。
charCodeAt(n) n番目の文字のUnicodeの値を表す整数を返します。
concat() 2 つの文字列を結合し、その文字列を返します。
indexOf(文字列 [,開始位置]) 指定された文字列の位置を返します。
lastindexOf(文字列 [,開始位置]) 指定された文字列が最後に現れる位置を返します。
match(パターン) パターンにマッチした文字列を返します。
replace(パターン, 置換文字列) パターンにマッチした文字列を置換します。
search(パターン) パターンにマッチした文字列の位置を返します。
slice(開始位置 [, 終了位置]) 指定した位置にある文字列を返します。マイナスを指定すると後ろから数えます。
split(パターン) パターンで文字列を分割します
substr(開始位置 [, 長さ]) 開始位置から指定した文字数の文字を返します。
substring(開始位置 [, 終了位置]) 指定した位置にある文字列を返します。
toLocaleLowerCase() toLowerCase() 大文字を小文字に変換して返します。
toLocaleUpperCase() toUpperCase() 小文字を大文字に変換して返します。
toString() オブジェクトの文字列を返します。
trim() 文字列の最初と最後にある空白を削除します。 IE9以上。
valueOf() オブジェクトのプリミティブ値を返します。

Array

Arrayオブジェクトは、配列を操作するためのプロパティやメソッドの集まりです。

プロパティ

Array オブジェクトのプロパティの一覧を紹介します。

プロパティの一覧
length 配列の要素数です。

関数

Arrayオブジェクトの関数の使用例と一覧を紹介します。
Array関数はオブジェクトを生成せずそのまま使えます。

Array.isArray([0,1,2])
true
関数の一覧
isArray()
※IE9以上
オブジェクトが配列かどうかを判別します。

メソッド

Array オブジェクトのメソッドの一覧を紹介します。主な使い方は配列の章を参照してください。

メソッドの一覧
concat([要素1 [, ...要素N]]) 配列を連結して返します。
every(コールバック関数 [,オブジェクト]) ※IE9以上
配列のすべての要素がコールバック関数のテストを満たすかを判定します。
filter(コールバック関数 [,オブジェクト])
※IE9以上
コールバック関数の条件を満たす要素を返します。
forEach(コールバック関数 [,オブジェクト]) ※IE9以上
配列の各要素を一つずつ関数に渡します。
indexOf(要素 [, インデックス]) ※IE9以上
指定された値とマッチした最初の要素のインデックス添字を返します。
join(文字列) 配列のすべての要素を結合した文字列を返します。
lastIndexOf()
※IE9以上
指定された値とマッチした最後の要素のインデックス添字を返します。
map(コールバック関数[, オブジェクト])
※IE9以上
配列の各要素に対してコールバック関数を呼び出し、その結果の配列を返します。
pop() 配列から最後の要素を削除し、その要素を返します。
push([要素1 [, ...要素N]]) 配列の末尾に要素を追加し、要素数を返します。
reduce(コールバック関数[, 値])
※IE9以上
配列の各要素に対してコールバック関数を呼び出し、その戻り値の累積結果を返します。
reduceRight()
※IE9以上
配列の各要素に対して降順でコールバック関数を呼び出し、その戻り値の累積結果を返します。
reverse() 配列の要素の順番を反転させます(最初の要素は最後に、最後の要素は最初)。
shift() 配列から最初の要素を削除し、その要素を返します。
slice(開始, 終了) 配列から指定した位置の要素を抜き取って返します。
some(コールバック関数[, オブジェクト])
※IE9以上
配列の要素が1つ以上コールバック関数のテストを満たすかを判定します。
sort(比較関数) 比較関数に従って配列の要素を整列し、その配列を返します。
splice(インデックス, 数, [要素1][, ..., 要素N]) 古い要素を取り除いて新しい要素を追加します。
unshift(要素1 [, ...要素N]) 配列の最初に要素を追加し、新しい配列の長さを返します。
toString() 配列とその要素を表す文字列を返します。
toLocaleString() 配列の要素をロケールに従った文字列で返します。

Date

Dateオブジェクトは、日付と時刻を操作するためのプロパティやメソッドの集まりです。

構文
// 引数が空だと今日の日付を持ったDateオブジェクトが生成される
new Date();
// UTCからの経過時間からのミリ秒を指定
new Date(経過時間);
// 日付を表す文字列を指定
new Date(dateString);
// 年や月をそれぞれ引数として渡す
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);

Dateオブジェクトをnewすると、指定した日付を持ったDateインスタンスを生成します。

var d = new Date(2009, 2, 17);

生成されたインスタンスから様々なメソッドにアクセス可能です。

d.getFullYear();

2009

関数

Date オブジェクトの関数の使用例と一覧を紹介します。

// 現在時刻(UTCからの経過時間)を出力
Date.now();

1509083659996

関数の一覧
now()
※IE9以上
UTC(UTC(協定世界時))の 1970年1月1日0時0分0秒 から現在までの経過時間をミリ秒単位で返します。
UTC(year, month[, day[, hour[, minute[, second[, millisecond]]]]]) UTC(UTC(協定世界時))の 1970年1月1日0時0分0秒 から引数までの経過時間をミリ秒単位で返します。

メソッド

Date オブジェクトのprototypeメソッドの使用例と一覧を紹介します。

var d = new Date('March 17, 2009 00:00:00');
d.getDate();

17

メソッド(ゲッター)の一覧
getDate() 日付(1~31)を返します。
getDay() 曜日(0~6)を返します。
getFullYear() 西暦(4桁)を返します。
getHours() 時(0~23)を返します。
getMilliseconds() ミリ秒(0~999)を返します。
getMinutes() 分(0~59)を返します。
getMonth() 月(0~11)を返します。
getSeconds() 秒(0~59)を返します。
getTime() UTC(協定世界時) の 1970年1月1日0時0分0秒 からのミリ秒単位で返します。
getTimezoneOffset() ローカル時と協定世界時 (UTC)の差を分単位で返します。
getUTCDate() UTC(協定世界時)の日付(1~31)を返します。
getUTCDay() UTC(協定世界時)の(0~6)を返します。
getUTCFullYear() UTC(協定世界時)の西暦(4桁)を返します。
getUTCHours() UTC(協定世界時)の時(0~23)を返します。
getUTCMilliseconds() UTC(協定世界時)のミリ秒(0~999)を返します。
getUTCMinutes() UTC(協定世界時)の分(0~59)を返します。
getUTCMonth() UTC(協定世界時)の月(0~11)を返します。
getUTCSeconds() UTC(協定世界時)の秒(0~59)を返します。
メソッド(セッター)の一覧
setDate(日) 日を設定します。
setFullYear(年) 時間を設定します。
setHours(時 [, 分 [, 秒 [, ミリ秒]]]) 西暦(4桁)を設定します。
setMilliseconds(ミリ秒) ミリ秒を設定します。
setMinutes(分) 分を設定します。
setMonth(月) 月を設定します。
setSeconds(秒) 秒を設定します。
setTime(経過時間) DateオブジェクトをUTC(協定世界時)の 1970年1月1日0時0分0秒 からのミリ秒単位に設定します。
setUTCDate(日付) UTC(協定世界時)の日を設定します。
setUTCFullYear(年 [, 月 [, 日]]) UTC(協定世界時)の西暦(4桁)を設定します。
setUTCHours(時 [, 分 [, 秒 [, ミリ秒]]]) UTC(協定世界時)の時を設定します。
setUTCMilliseconds(ミリ秒) UTC(協定世界時)のミリ秒を設定します。
setUTCMinutes(分 [, 秒 [, ミリ秒]]) UTC(協定世界時)の分を設定します。
setUTCMonth(月 [, 日]) UTC(協定世界時)の月を設定します。
setUTCSeconds(秒 [, ミリ秒]) UTC(協定世界時)の秒を設定します。
メソッド(変換ゲッター)の一覧
toDateString() Dateオブジェクトの日付を英語表記で返します。
toISOString()
※IE9以上
日付をISO 8601形式の文字列に変換します。
toJSON() Dateオブジェクトを表す文字列を返します。
toLocaleDateString([ロケール [, オプション]])
※IE11以上
現在、もしくは指定されたロケールに対応した日付を文字列で返します。
toTimeString() Dateオブジェクトの時刻を文字列で返します。
toUTCString() 日時をUTC(協定世界時)の文字列で返します。
valueOf() UTC(協定世界時)の1970年1月1日0時0分0秒からの経過時間をミリ秒単位の時刻で返します。

Math

Mathオブジェクトはnew演算子でインスタンスを作らなくても、そのまま使えます。Mathオブジェクトには数学に関係するプロパティやメソッドが用意されています。

プロパティ

Math オブジェクトのプロパティの使用例と一覧を紹介します。

// 円周率の取得
Math.PI
3.141592653589793
プロパティの一覧
E 自然対数の底で、約 2.718 です。
LN2 e を底とする2の自然対数で、約 0.693 です。
LN10 e を底とする10の自然対数で、約 2.303 です。
LOG2E 2 を底とする e の自然対数で、約 1.443 です。
LOG10E 10 を底とする e の自然対数で。約 0.434 です。
PI 円周率で、約 3.14159 です。
SQRT1_2 1/2の平方根で、約 0.707 です。
SQRT2 2 の平方根で、約 1.414 です。

メソッド

Math オブジェクトのメソッドの使用例と一覧を紹介します。

// 切り上げ
Math.ceil(3.14); 

4

メソッドの一覧
abs(x) 引数の絶対値を返します。
acos(x) 引数のアークコサイン(逆余弦)をラジアン単位で返します。

※アークコサインとは、そのコサインが数値となる角度のことです。
※ラジアンとは、「円の孤の長さ÷円の半径」によって求められる値です。

asin(x) 引数のアークサイン(逆正弦)をラジアン単位で返します。

※アークサインとは、そのサインが数値となる角度のことです。

atan(x) 引数のアークタンジェント(逆正接)を返します。

※アークタンジェントとは、そのタンジェントが数値となる角度のことです。

atan2(x, y) x 座標と y 座標のアークタンジェント (逆正接) を返します。
ceil(x) 引数の小数点以下を切り上げて返します。
cos(x) 引数のコサイン(余弦)を返します。
exp(x) 定数 eのべき乗を返します。e は自然対数(ネイピア数)の底で、2.7182818...と続く超越数です。
floor(x) 引数の小数点以下を切り下げて返します。
log(x) 引数の自然対数を返します。
max([x[, y[, …]]]) 引数の中で最大の値を返します。
min([x[, y[, …]]]) 引数の中で最小の値を返します。
pow(x, y) xをyで累乗した値を返します。
random() 0 以上 1 未満の乱数を返します。
round(x) 引数を四捨五入して返します。
sin(x) 引数のサイン(正弦)を返します。
sqrt(x) 引数の平方根を返します。
tan(x) 引数のタンジェント(正接)を返します。

組み込み関数

JavaScriptが提供するグローバル関数を紹介します。

encodeURI() URIをエンコードします。URI の予約文字/、:、&、+、=などはエンコードしません。
encodeURIComponent() URIで使用する記号をすべてをエンコードします。URI全体に適用するとそれ自体はURIとして機能しなくなります。
decodeURI() 予約文字以外のURIエンコードされた文字をデコードします。
decodeURIComponent() URIエンコードされた記号すべてをデコードします。
eval( 文字列 ) 引数の文字列を命令文として実行します。
isFinite( 数値 ) 引数の数値が有限かどうかを判定します。
isNaN( 値 ) 引数の値がNaNかどうかをブール値で返します。
parseFloat( 文字列 ) 引数の文字列を浮動小数点数に変換します。
parseInt( 文字列 [, radix] ) 引数の文字列を整数に変換します。

組み込み関数の使用例をいくつか紹介します。

// URIのエンコード
encodeURI("http://rfs.jp/?s=関数");

http://rfs.jp/?s=%E9%96%A2%E6%95%B0

// 予約語を含めたURIのエンコード
encodeURIComponent("http://rfs.jp/?s=関数");

http%3A%2F%2Frfs.jp%2F%3Fs%3D%E9%96%A2%E6%95%B0

// URIをエンコードした文字列をデコード
decodeURI("http://rfs.jp/?s=%E9%96%A2%E6%95%B0");

http://rfs.jp/?s=関数

// 予約後含むURIをエンコードした文字列をデコード
decodeURIComponent("http%3A%2F%2Frfs.jp%2F%3Fs%3D%E9%96%A2%E6%95%B0");

http://rfs.jp/?s=関数

// 文字列の命令文を実行
eval("2 * 10"); 

20

// 文字列を整数に変換
parseInt("-100px")

-100

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!