HTML5テクニカルノート

TypeScript入門 09: アロー関数式

ID: FN1609010
Technique: HTML5 / JavaScript
Package: TypeScript 2.0.3

TypeScriptは名前のない関数をアロー関数式で表せます。その書き方と優れた点を、簡単な例とともにご説明します。

01 アロー関数式を使う

名前のない関数(匿名関数)は、標準的につぎのように定められます。


let getInfo = function(x: number, y: number): number {
	return Math.sqrt(x * x + y * y);
};
console.log(getInfo(3, 4));  // 5

アロー関数式=>を使うとキーワードfunctionが要らず、直ちに値を返すなら{}とreturnも省けます。


let getInfo = (x: number, y: number) => Math.sqrt(x * x + y * y);
console.log(getInfo(3, 4));  // 5

アロー関数式=>は、つぎのように関数を納める変数の型づけにも使えます。引数とその型および戻り値の型が決められます。


let getInfo: (x: number, y: number) => number;
getInfo = (x: number, y: number) => Math.sqrt(x * x + y * y);
console.log(getInfo(3, 4));  // 5
getInfo = (x: number, y: number) => Math.atan2(y, x) * 180 / Math.PI;
console.log(getInfo(1, Math.sqrt(3)));  // 59.99999999999999

02 アロー関数式とthis参照

JavaScriptで名前のない関数を使うとき、this参照先には気をつけなければなりません。つぎのようにオブジェクトのプロパティ(start)に定めた関数でsetTimeout()メソッドを呼び出すと、コールバック関数の本体でthisはグローバル空間を参照してしまいます。そのため、ビルドしたJavaScriptコードをHTMLドキュメントに書き込めば、グローバル変数の値を参照してしまうのです。


let x: number = 3;
let y: number = 4;
let point = {
	x: 1,
	y: Math.sqrt(3),
	start: function(): void {
		setTimeout(function(): void {
			console.log(Math.sqrt(this.x * this.x + this.y * this.y));
		}, 100);
	}
}
point.start();  // 5

これを避けるには、コールバック関数にFunction.bind()メソッドでthis参照先を定めなければなりません。


let x: number = 3;
let y: number = 4;
let point = {
	x: 1,
	y: Math.sqrt(3),
	start: function(): void {
		setTimeout(function(): void {
			console.log(Math.sqrt(this.x * this.x + this.y * this.y));
		}.bind(this), 100);
	}
}
point.start();  // 1.9999999999999998

アロー関数式=>を用いると、Function.bind()メソッドを使わなくてもthis参照がオブジェクトに保たれます。


let point = {
	x: 1,
	y: Math.sqrt(3),
	start: function() {
		// setTimeout(function(): void {
		setTimeout((): void =>
			console.log(Math.sqrt(this.x * this.x + this.y * this.y))
		, 100);
	}
}
point.start();  // 1.9999999999999998

ビルドされたJavaScriptコードを見ると、つぎのようにthis参照はオブジェクトのプロパティ(start)に与えた関数本体のローカル変数(_this)に保持されていることがわかります。


var point = {
    x: 1,
    y: Math.sqrt(3),
    start: function () {
        var _this = this;
        setTimeout(function () {
            return console.log(Math.sqrt(_this.x * _this.x + _this.y * _this.y));
        }, 100);
    }
};

ただし、オブジェクトのプロパティ(start)に与える関数をアロー関数式=>で与えると、this参照はグローバルになってしまうのでご注意ください。


let x: number = 3;
let y: number = 4;
let point = {
	x: 1,
	y: Math.sqrt(3),
	start: (): void => {
		setTimeout((): void =>
			console.log(Math.sqrt(this.x * this.x + this.y * this.y))
		, 100);
	}
}
point.start();  // 5

ご参考までにビルドされたJavaScriptコードを掲げます。this参照はグローバル変数(_this)に定められていることがおわかりになるでしょう。


var _this = this;
var x = 3;
var y = 4;
var point = {
    x: 1,
    y: Math.sqrt(3),
    start: function () {
        setTimeout(function () {
            return console.log(Math.sqrt(_this.x * _this.x + _this.y * _this.y));
        }, 100);
    }
};

作成者: 野中文雄
更新日: 2016年9月23日 TypeScriptのバージョンを2.0.3に更新。
作成日: 2016年9月20日