ProgrammingJavaScript講座第2章 JavaScriptのオブジェクト
第2章 JavaScriptのオブジェクト

ビルトインオブジェクト

3種類のオブジェクト

JavaScriptには、標準ビルトインオブジェクト、DOMオブジェクト、ブラウザオブジェクトの3つの組み込みオブジェクトがあります。標準ビルトインオブジェクトは、ECMAScriptで規定されたJavaScript標準仕様のオブジェクトで、これまでに登場したundefinedプロパティやparseFloat()メソッド、Mathコンストラクタなどが属しています。DOMオブジェクトはW3Cの勧告に基いて組み込まれたもので、DIV要素やBUTTON要素などHTML要素を操作するための手段を提供します。ブラウザオブジェクトはブラウザにアクセスするためのオブジェクトで、このオブジェクトを通して現在のページのURLや履歴などにアクセスすることができます。この章では標準ビルトインオブジェクトを紹介します。

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

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

標準ビルトインオブジェクトには文字列や数値、日付の操作など、様々な処理を行うためのオブジェクト群が用意されています。標準ビルトインオブジェクトには、以下の様なものがあります。

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

標準ビルトインオブジェクトはいつでも簡単に呼び出せます。ビルトインオブジェクトが提供するメソッドやプロパティはドット表記（ . ）を使ってアクセスできます。次のコードはDateコンストラクタのgetFullYear()メソッドを使い、現在の年を取得しています。

// Dateコンストラクタのインスタンスを作成
var d = new Date();

// 年を出力
d.getFullYear();
出力結果
2018

インスタンスを作らなくてもメソッドにアクセスできます。

new Date().getFullYear();

オブジェクトリテラル

今回紹介する9種類のビルトインオブジェクトの中ではArray、Boolean、Function、Number、Object、RegExp、Stringはnew演算子を使わなくてもオブジェクトリテラルやfunctionキーワードを使って生成することができます。この方が実行速度も速く簡単です。次のコードはnew演算子を使う方法と、オブジェクトリテラルやfunctionキーワードを使う方法の2種類を紹介しています。

// 配列の作成
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()メソッドを呼び出すことができます。実際のコードで試してみましょう。

// プリミティブ値からtoLowerCase()メソッドの呼び出し
"Hello".toLowerCase();
出力結果
hello

"Hello"は見ての通りプリミティブ値ですが、StringオブジェクトのtoLowerCase()メソッドを呼び出しています。この仕組みは、JavaScriptの自動型変換機能により実現されています。文字列にドット記法が使われると、文字列から、Stringオブジェクトに自動的に変換されます。ドット記法が使われなくなれば、また自動的にプリミティブ値に戻ります。このように、JavaScriptではオブジェクトをあまり意識せずに利用できるように工夫されています。
このあとそれぞれのビルトインオブジェクトに用意されたプロパティやメソッド、使い方を紹介していきますが、Function、Boolean、RegExpはほとんどの使う機会がないため紹介を省きます。

Object

ビルトインオブジェクトのObjectコンストラクタは、オブジェクトを生成するオブジェクトです。new演算子、もしくはオブジェクトリテラルを使ってオブジェクトを生成できます。 

// new演算子を使ってインスタンスを生成
var obj1 = new Object();

// オブジェクトリテラルを使ってインスタンスを生成
var obj2 = {};

Objectは全てのオブジェクトのベースになるオブジェクトで、Objectが持つプロパティやメソッドは他のオブジェクトから利用されています。たとえば他のオブジェクトが持つconstructorプロパティやtoString()メソッドは、Objectから提供されたものになります。

コンストラクタのプロパティとメソッド

ビルトインオブジェクトを通してアクセスできるプロパティとメソッドは、コンストラクタに属するか、インスタンスに属するかで2種類に別れます。コンストラクタに属するプロパティやメソッドはインスタンスから呼び出せません。実際に呼び出すとどうなるか、Objectのコンストラクタプロパティをコンストラクタとインスタンスの両方から呼び出してみます。

// インスタンスからlengthプロパティにアクセスする
var obj = new Object();
console.log( "インスタンスから呼び出し：" + obj.length );

// コンストラクタからlengthプロパティにアクセスする
console.log( "コンストラクタから呼び出し：" + Object.length );
出力結果
インスタンスから呼び出し：undefined
コンストラクタから呼び出し：1

インスタンスからコンストラクタプロパティは呼び出せませんでした。コンストラクタプロパティのlengthはObjectコンストラクタから直接アクセスする必要があります。これはメソッドでも同様です。

// values()メソッドは引数の値を配列にして返す
Object.values("test");
出力結果
["t", "e", "s", "t"]

Objectコンストラクタは次に紹介するようなコンストラクタプロパティ、コンストラクタメソッドを持っています。

コンストラクタプロパティ

Objectコンストラクタのプロパティを紹介します。

コンストラクタプロパティの一覧
プロパティ名 説明
Object.length 1を返します。
Object.prototype オブジェクトのプロトタイプ（雛形）を参照します。

コンストラクタメソッド

Objectコンストラクタのメソッドを紹介します。

コンストラクタメソッドの一覧
メソッド名 説明
Object.assign() 新しいオブジェクトを生成します。
Object.create() プロトタイプオブジェクトを指定して新しいオブジェクトを生成します。
Object.defineProperty() 引数に指定したプロパティをオブジェクトに追加します。
Object.defineProperties() 引数に指定した複数のプロパティをオブジェクトに追加します。
Object.freeze() 指定したオブジェクトのプロパティの追加、削除、変更を禁止します。
Object.getOwnPropertyDescriptor() 指定したプロパティ名に対応するプロパティ記述子を返します。
Object.getOwnPropertyNames() 指定したオブジェクトの全てのプロパティ名を配列として返します。
Object.getOwnPropertySymbols() 指定したオブジェクトのシンボルプロパティの配列を返します。
Object.getPrototypeOf() 指定したオブジェクトのプロトタイプを返します。
Object.is() 2つの値が同じか比較します。
Object.isExtensible() オブジェクトに対する拡張が許可されているかを判定します。
Object.isFrozen() プロパティのの追加、削除、変更が禁止されているかを判定します。
Object.isSealed() プロパティの追加と削除が禁止されているかを判定します。
Object.keys() 指定したオブジェクトの全てのプロパティ名を配列で返します。
Object.preventExtensions() オブジェクトの拡張（追加）を禁止します。
Object.seal() プロパティの追加と削除を禁止します。
Object.setPrototypeOf() プロトタイプを設定します。
Object.values() 指定したオブジェクトの値を配列として返します。

インスタンスプロパティ

Objectインスタンスのプロパティを紹介します。

インスタンスプロパティの一覧
プロパティ名 説明
constructor インスタンスのプロトタイプをつくったObject関数の参照を返します。

インスタンスメソッド

Objectインスタンスのメソッドを紹介します。

インスタンスメソッドの一覧
メソッド名 説明
hasOwnProperty() オブジェクトが指定したプロパティが継承されたものではなく、自身に直接属するプロパティかどうかを論理値で返します。
isPrototypeOf() オブジェクトが指定したオブジェクトのプロトタイプチェーンに含まれるかを論理値で返します。
propertyIsEnumerable() 指定したプロパティが列挙可能かを論理値で返します。
toLocaleString() toString()を呼び出します。
toString() オブジェクトから文字列情報を返します。
valueOf() 指定したオブジェクトの値を返します。

prototypeプロパティ

Objectはベースになる特殊なオブジェクトで、全てのオブジェクトはObject.prototypeのプロパティとメソッドを継承します。オブジェクトリテラルを使って空のインスタンスを作成しても同様です。次のコードは、オブジェクトリテラルから空のインスタンスを作成し、ObjectのtoString()メソッドを利用しています。

// 空のインスタンスを作成
var obj = {};

// ObjectのtoString()メソッドを使う
obj.toString();
出力結果
[object Object]

prototypeプロパティを使って、親のコンストラクタにメソッドやプロパティを追加することができます。prototypeプロパティを使うメリットとしては、親コンストラクタに追加することで、メソッドをインスタンス間で共有することができます。次のコードは、インスタンス生成後にコンストラクタにメソッドを追加し、それをインスタンスから利用しています。

// speakメソッドを追加
String.prototype.speak = function () {
	console.log( this.toString() );
}

// インスタンスを作成
var obj1 = new String( "relax" );
obj1.speak();

// インスタンスを作成
var obj2 = new String( "lucky" );
obj2.speak();
出力結果
relax
lucky

この構造は少し理解しにくいですが、prototypeは親のコンストラクタにアクセスできるプロパティと考えると良いでしょう。ここで見たようにprototypeを使って標準ビルトインオブジェクトをカスタマイズすることができますが、影響が大きいためよほどの理由がなければ避けたほうが良いでしょう。

プロトタイプチェーン

参照されたプロパティをオブジェクトが保持していない場合、プロトタイプのオブジェクトをたどり、該当するプロパティがあればそのプロパティが参照されます。プロトタイプもプロパティを保持していない場合は、そのまたさらにプロトタイプのプロトタイプが探索されます。この仕組みのことをプロトタイプチェーンと呼びます。最終的にnullになるまで探索が続けられ、該当プロパティがなければundefinedが返されます。

// コンストラクタの prototype に a プロパティを追加
function ObjA() {}
ObjA.prototype.a	= "relax";

// Functionのインスタンスを作成
var ObjB	= function(){}
// ObjBのprototypeにObjAのインスタンスを代入
ObjB.prototype	= new ObjA();

// ObjB のインスタンスを生成
var obj	= new ObjB();

// ObjB のインスタンスから ObjA の a プロパティにアクセス
console.log( obj.a );
出力結果
relax

ObjBのprototypeにObjAを代入しているため、ObjBに該当のプロパティがなくても、ObjAのプロパティが探索されています。

String

Stringオブジェクトは、文字列を操作するためのプロパティやメソッドの集まりです。文字列にドット記法を使うとその瞬間だけ自動的にStringオブジェクトに変換されるので、new演算子を使ってインスタンスを生成する必要はありません。次のコードでは、文字列型の変数にドット記法を使ってStringオブジェクトのlengthプロパティを呼び出しています。

var str = "ABCDE";
// 文字列の長さを返す
str.length;
出力結果
5

インスタンスプロパティ

Stringインスタンスのプロパティ一覧を紹介します。

インスタンスプロパティの一覧
プロパティ名 説明
length 文字列の長さを返します。

インスタンスメソッド

Stringインスタンスのメソッドの使用例と一覧を紹介します。次のコードはsubstr()メソッドを使って文字列の一部を取り出しています。

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

Stringオブジェクトのメソッドはリテラルから直接アクセスすることができます。次のコードは先のコードと同じ処理をしていますが、リテラルから直接substr()メソッドを呼び出しています。

// 文字列の一部を出力
"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コンストラクタは配列を操作するためのプロパティやメソッドの集まりです。new演算子を使って配列を作成できますが、ブラケット（ [] ）を使ったほうが簡単です。次のコードはどちらも空の配列を作成します。

// 配列の作成
x = new Array();

// 配列の作成
x = [];

コンストラクタプロパティ

Arrayコンストラクタのプロパティを紹介します。

コンストラクタプロパティの一覧
メソッド名 説明
length 配列の要素数です。

コンストラクタメソッド

Arrayコンストラクタのメソッドを紹介します。コンストラクタメソッドの場合、オブジェクトを生成せずArrayコンストラクタから直接使えます。

// Arrayコンストラクタからドット表記を使ってisArray()を使う
Array.isArray( [0,1,2] )
出力結果
true
コンストラクタメソッドの一覧
メソッド名 説明
isArray()
※IE9以上 		オブジェクトが配列かどうかを判別します。

インスタンスメソッド

Arrayインスタンスのメソッドを紹介します。主な使い方は配列の章を参照してください。

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

Date

Dateコンストラクタは、日付と時刻を操作するためのプロパティやメソッドの集まりです。Dateを引数無しで呼び出した場合、現在時刻の日付を持ったインスタンスを生成します。Dateの引数に特定の時刻を指定すると、その時刻を持ったインスタンスが生成されます。Dateはいろいろな形式で日付を指定できるので、いくつか紹介します。

// 引数が空だと現在の日付を持ったインスタンスが生成される
new Date();
出力結果
Thu Feb 22 2018 14:08:05 GMT+0900 (東京 (標準時))

// UTCからの経過時間をミリ秒で指定（2009年3月17日を指定）
new Date( 1239926400000 );
出力結果
Fri Apr 17 2009 09:00:00 GMT+0900 (東京 (標準時))

// 日付を表す文字列を指定
new Date( "11/1/2012" );
出力結果
Thu Nov 01 2012 00:00:00 GMT+0900 (東京 (標準時))

// 年や月をそれぞれ引数として渡す
// 引数（month移行は任意）：年, 月, 日, 時, 分, 秒, ミリ秒
new Date( 2018, 2, 22, 14, 16, 00 );
出力結果
Thu Mar 22 2018 14:16:00 GMT+0900 (東京 (標準時))

Dateコンストラクタに日付を引数として渡すと、その日付を持ったDateインスタンスを生成できます。生成されたインスタンスから様々なメソッドにアクセス可能です。

// 2009年3月17日の日付インスタンスを生成
var d = new Date( 2009, 3, 17 );

// 年を取得
console.log( d.getFullYear() );

// UTCからの経過時間をミリ秒で取得
console.log( d.getTime() );\\\
出力結果
2009
1239894000000

コンストラクタメソッド

Dateコンストラクタのメソッドの使用例と一覧を紹介します。

// 現在時刻（UTCからの経過時間）を出力
Date.now();
出力結果
1509083659996
コンストラクタメソッドの一覧
メソッド名 説明
now()
※ie9以上 		UTC（協定世界時）の 1970年1月1日0時0分0秒 からの経過時間をミリ秒単位で返します。
UTC( year, month, [day], [hour], [minute], [second], [millisecond] ) UTC（協定世界時）の 1970年1月1日0時0分0秒 から引数までの経過時間をミリ秒単位で返します。

インスタンスメソッド

Dateインスタンスのメソッドの使用例と一覧を紹介します。

var d = new Date( 'March 17, 2009 00:00:00' );
d.getDate();
出力結果
17
get系インスタンスメソッドの一覧
メソッド名 説明
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）を返します。
set系インスタンスメソッドの一覧
メソッド名 説明
setDate( 日 ) 日を設定します。
setFullYear( 年 ) 西暦（4桁）を設定します。
setHours( 時, [分], [秒], [ミリ秒] ) 時間を設定します。
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（協定世界時）の秒を設定します。
to系インスタンスメソッドの一覧
メソッド名 説明
toDateString() Dateオブジェクトの日付を英語表記で返します。
toISOString()
※IE9以上		 日付をISO 8601形式の文字列に変換します。
toJSON() JSONテキストにシリアライズ化します。
toLocaleDateString( [ロケール [, オプション]] )
※IE11以上		 現在、もしくは指定されたロケールに対応した日付を文字列で返します。
toTimeString() Dateオブジェクトの時刻を文字列で返します。
toUTCString() 日時をUTC（協定世界時）の文字列で返します。
valueOf() UTC（協定世界時）の1970年1月1日0時0分0秒からの経過時間をミリ秒単位の時刻で返します。

誕生日から年齢の計算

Dateコンストラクタを使ったプログラムを作成してみましょう。HTMLのパーツは誕生日を入力するテキストボックスと、計算を開始させるボタン、結果を表示するDIVの3つです。JavaScriptの方はボタンにクリックのイベントリスナーを登録し、ボタンのクリックがあればテキストボックスに入力された値を元に現在の年齢を算出します。
ちょっとした工夫としては、テキストボックスのプレースホルダに入力してもらいたい年月日のフォーマットを設定しました。実際はこれだとわからないユーザもいると思うので、テキストボックスの下などに補足を入れると良いでしょう。もう1点、正しいフォーマットで入力されていない場合はアラートを表示するようにしてあります。正しいかどうかのチェックは単純なもので、年齢を代入する変数が数値かどうかだけisNaN()メソッドを使って確認しています。

CodePen: https://codepen.io/zionboogie/pen/OQEmZM

See the Pen 【04-02-01】誕生日から年齢の計算 by jun (@zionboogie) on CodePen.

HTML
<input type="text" id="birthday" placeholder="MM/DD/YYYY"><button id="btn-submit">計算</button>
<div id="age"></div>
JavaScript
// ボタンのイベントリスナー
document.getElementById("btn-submit").addEventListener( "click", function(){

	// 誕生日を保持したDateインスタンスを生成
	var birthday = new Date( document.getElementById("birthday").value );

	// 今日の日付を保持したDateインスタンスを生成
	var today = new Date();

	// 現在の年から誕生年を減算
	var age = today.getFullYear() - birthday.getFullYear();

	// 正しい値が取れているかチェック
	if ( isNaN( age ) ){
		alert( "正しいフォーマットで誕生日を入力してください。" );
		return false;
	}

	// 現在の年で誕生日が来ていなければ減算
	if ( today < birthday.setFullYear( today.getFullYear() ) ){
	    age--;
	}

	// 計算した結果の年齢を出力
	document.getElementById("age").textContent = age + "歳";

	return false;
} );

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コンストラクタのメソッドを紹介します。

メソッドの一覧
メソッド名 説明
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 ) 引数のタンジェント（正接）を返します。

ランダム

random()メソッドは0以上1未満のランダムな値を返します。簡単な使用例は次の通りです。

// 実行ごとに毎回異なる値を返す
console.log( Math.random() );
console.log( Math.random() );
出力結果
0.2989349763891602
0.7359220149515422

0から始まって特定の値までの数字をランダムに取得したい場合は、最大値に1を足します。

Math.random() * 最大値 + 1;

0から10までの数字をランダムに欲しい場合は次のようなコードになります。ここでは小数点をfloor()メソッドを使って切り捨てています。

Math.floor( Math.random() * 10 + 1 );

random()が返す値の最小値と最大値を指定することができます。最小値と最大値を設定する場合、次のような式になります。

Math.random() * ( 最大値 + 1 - 最小値 ) + 最小値;

実際のコードは次のようになります。ここでは最小値2、最大値8の値をランダムに取得し、Math.floor()メソッドで整数値になるよう切り捨てています。

// 最小値2
var min = 2 ;
// 最大値8
var max = 8 ;

Math.floor( Math.random() * (max + 1 - min) ) + min;

何度も使う場合は関数にしたほうが良いでしょう。

// 引数に最小値と最大値を受け取る
function getRandomMM( MIN, MAX ){
	return Math.floor( Math.random() * (MAX + 1 - MIN) ) + MIN;
}

配列の要素をランダムに選ぶ事もできます。最大値の指定に要素数のlengthプロパティを指定するところがポイントです。

// 配列
var list = [ 1, 2, 3, 4, 5, 6 ] ;

// 配列の要素をランダムに取得
list[ Math.floor( Math.random() * list.length ) ] ;

小数点以下の四捨五入、切り捨て、切り上げをする方法

数学関連の関数を提供するMathコンストラクタを使って、小数点以下の四捨五入、切り捨て、切り上げをする方法を紹介します。切り捨てはfloor()、切り上げはceil()、四捨五入はround()を使います。

// 切り捨て
Math.floor( 1.9 );
出力結果
1

// 切り上げ
Math.ceil( 1.1 );
出力結果
2

// 四捨五入
Math.round( 1.4 );
出力結果
1

// 四捨五入
Math.round( 1.5 );
出力結果
2

組み込み関数

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

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

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

URLには使えない文字列があり、送受信する際にエンコードする必要があります。JavaScriptにはエンコード用にencodeURI()、encodeURIComponent()といった関数が用意されています。それぞれ、どの文字をエンコードするかといった違いがあります。
※エンコード用としてescape()もありますが、URLでの使用は推奨されていません。

encodeURI()、encodeURIComponent()はどちらも共通して英数字はエンコードしませんが、記号は次のような違いがあります。

encodeURI()がエンコードしない記号
; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
encodeURIComponent()がエンコードしない記号
- _ . ! ~ * ' ( )

encodeURI()は「: / = &」といったURLで使われる予約語はエンコードしないので、URL全体をエンコードの対象にしても、URLとして使えます。ただし、クエリパラメータで使うと予約語をエンコードしないので、クエリパラメータに予約語があった場合はエラーになります。encodeURIComponent()はURLで使われる予約語もエンコードするため、エンコードしたあとそのままURLとして使いたい場合には使えません。その代わり、クエリパラメータをエンコードしたいときに使います。

URLをエンコード

URLにはページの番地を示すアドレス情報だけではなく、様々な情報を渡すためのクエリパラメータを含めることもできます。たとえば次のURLでいうと、クエスチョン（ ? ）以降の「?s=a&s2=b」がクエリパラメータに当たります。

https://rfs.jp/?s=a&s2=b

クエリパラメータはアンパサンド（ & ）で区切ることで複数のパラメータを指定することができ、各パラメータは名前と値をイコール（ = ）で区切ります。

クエリパラメータの構造

ユーザの入力内容などをURLに含めたい場合、URLの予約語などが含まれている可能性もあるので、送受信する際にエンコードする必要があります。JavaScriptにはエンコード用にencodeURI()、encodeURIComponent()といった関数が用意されています。それぞれ、どの文字をエンコードするかという違いがあります。
※エンコード用としてescape()もありますが、URLでの使用は推奨されていません。

encodeURI()、encodeURIComponent()はどちらも共通して英数字はエンコードしませんが、記号は次のような違いがあります。

encodeURI()がエンコードしない記号
; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
encodeURIComponent()がエンコードしない記号
- _ . ! ~ * ' ( )

それでは、URLをエンコードしてみましょう。URL全体をエンコードするには、encodeURI()が適しています。encodeURI()はURLで使うコロン（ : ）、スラッシュ（ / ）、クエリパラメータで使われるクエスチョン（ ? ）、アンパサンド（ & ）、イコール（ = ）などをエンコードしません。

// URIのエンコード
encodeURI( "https://rfs.jp/?s=関数" );
出力結果
https://rfs.jp/?s=%E9%96%A2%E6%95%B0

パラメータの値にテキストボックスなどから取得したユーザ入力文字を使う場合、クエスチョン（ ? ）やアンパサンド（ & ）が使われていたらエンコードする必要があります。たとえばパラメータの値として「A&B」が指定されていた場合、このアンパサンド（ & ）によって「A」と「B」に区切られてしまいます。テキストボックスなどの文字をエンコードする際はencodeURIComponent()が適任です。

// 予約語を含めたURIのエンコード
url = "http://rfs.jp/?s=" + encodeURIComponent( "A&B" );
出力結果
http://rfs.jp/?s=A%26B

URLをデコード

URLデコード用にdecodeURI()、decodeURIComponent()があります。それぞれ、encodeURI()、encodeURIComponent()に対応しているので、状況に応じて使い分けてください。

// 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=関数

decodeURI、decodeURIComponentともにデコードできない文字列が含まれていると、エラーでスクリプト自体が終了となります。これらのメソッドを使う際は、【05-02】例外処理の節で説明しているtry catch文でエラー処理をするようにしましょう。

文字列を整数に変換

parseInt()は文字列を整数に変換します。ピクセル（ px ）などの単位が数値に付随している場合などに便利です。

// 文字列を整数に変換
parseInt( "-100px" );
出力結果
-100

関連記事