JavaScript ECMAScript 2015(ES6)

ECMAScriptは言語の仕様です。その仕様に沿ったプログラム言語の一つがJavaScriptになります。
ECMAScriptはバージョンアップを続けていて、2015年にはバージョン6が公開されました。

今回は、その中の幾つかの機能を試してみます。

変数(定数)、テンプレート文字列
クラス
アロー関数
変数の受け渡し
Promise

変数(定数)、テンプレート文字列

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
JavaScriptのテストページ
</body>
<script>

// 構文チェック
"use strict";

// 変数宣言
var aaa = 1;
let bbb = 1;

//定数
const CCC = 1;

try {
	var aaa = 2;
	let bbb = 2;

	// 定数のため変更できずエラーになる
	CCC = 2;
}
catch (e) {
   alert(`定数変更 : ${e}`);
}

// aaaは2、bbbは1が表示される
alert(`
aaaはtry内で変更される　　→　${aaa}
bbbはtry内で変更されない　→　${bbb}
`);

</script>
</html>

変数(定数)

変数がvar以外にlet、constが使用できるようになりました。

letは宣言したブロック{}内のみ使用できます。他のプログラミング言語と同じように使用できます。
(varはどのブロックでも宣言しても使用することができていました。)

constは定数として定義することができ、値を変更しようとするとエラーになります。

テンプレート文字列

`(バッククォート)で文字列を囲むとテンプレート文字列として動作します。テンプレート文字列では改行をそのまま使えたり、
変数を${変数名}でそのまま埋め込むことが出来ます。

その他

変数、テンプレート文字列とも関係ないのですが、use strictをサンプルに入れました、これはES5で追加された機能ですが、
記述があいまいな場合、エラーとしてくれます。

ページのトップへ戻る

クラス

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
JavaScriptのテストページ
</body>
<script>

// 構文チェック
"use strict";

// 親クラス
class Bbb {
	constructor(fff) {
		this._ggg = fff;
	}
}

// 子クラス
class Aaa extends Bbb{

	// コンストラクタ
	constructor(ccc, ddd) {
		super(ddd);
		this.eee = ccc;
	}

	// Setter
	set eee(ccc) {
		console.log(`set:${ccc}`);
		this._eee = ccc;
	}

	// Getter
	get eee() {
		console.log("get");
		return this._eee;
	}

	show(){
		alert(`${this.eee} ${this._ggg} !!`)
	}

	// 静的メソッド
	static msg(iii){
		alert(iii)
	}
}

let aaa = new Aaa("Hello", "World");

aaa.show();
Aaa.msg("TEST");

</script>
</html

Class構文が使えるようになりました。Class構文ではコンストラクタや静的メソッドを定義することができます。
親クラスから継承することもできます。

キーワード	動作	記述例
extends	継承	class 子クラス extends 親クラス{}
constructor	コンストラクタ	constructor(変数) {}
static	静的メソッド	static メソッド(変数){}

メソッドの頭にget、setがあるメソッドは変数をセット、ゲットする前に時に呼び出され、変数のような動作をします。
サンプルを動かしてみて、動作を確認して下さい。

ページのトップへ戻る

アロー関数

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
JavaScriptのテストページ
</body>
<script>

// 構文チェック
"use strict";

// 普通の無名関数
var funcA = function(a, b){return a + b;};

// アロー関数
funcA = (a, b) => {return a + b;};

alert(funcA(1, 2));

</script>
</html>

アロー関数は無名関数のfunctionを省略して記述できます。

functionだけでなく以下のように括弧なども省略できます。

				
// ただリターンを返す場合、波括弧{}を省略できます。
var funcA = (a, b) => a + b;

// 引数が一つの場合、丸括弧()を省略できます。
var funcA = a =>{alert(a);};

// 引数が一つもないの場合、丸括弧()が必要になります。
var funcA = () =>{alert("TEST");};

this

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
	<button id="btn1" name="属性" >アロー関数</button>
	<button id="btn2" name="属性" >無名関数</button>
</body>
<script>

"use strict";

// 変数
var name = "グローバル"

// thisの中身を表示
function show(arg){

	alert(arg.name);
}

// アロー関数
var btn1 = document.getElementById("btn1");
btn1.onclick = () => {
	show(this);
};

// 無名関数
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
	show(this);
};

// HTML読み込み時のthisを表示
show(this);

</script>
</html>

thisの動作は無名関数とアロー関数で異なるので注意です。
thisの指し先は、無名関数では動作時に決まり、アロー関数では定義時に決まります。

表示タイミング	表示内容
起動時	グローバル
ボタン(アロー関数)	グローバル
ボタン(無名関数)	属性

thisの動作についてはこちらも参照して下さい

ページのトップへ戻る

変数の受け渡し

				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptのテストページ</title>
</head>
<body>
JavaScriptのテストページ
</body>
<script>

// 構文チェック
"use strict";

// 複数の変数を同時にセット
var [a, b] = ["Hello", "World"];

// 引数のデフォルト値
function ccc(d, e = "DEF"){
	alert(`${d} ${e}`);
}

alert(`${a} ${b}`);

ccc("ABC");

</script>
</html>

複数の変数を同時にセット

変数を角括弧で囲むと複数の変数をまとめてセットすることができます。

引数のデフォルト値

引数にイコールを付けることで引数が省略されたときのデフォルト値をセットすることができます。

ページのトップへ戻る

Promise

				
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScriptのテストページ</title>
</head>

<body>
    <button onclick="btn_click(1)">クリック１</button>
    <button onclick="btn_click(2)">クリック２</button>
    <script type="text/javascript">
        function btn_click(idx) {
            alert("① - ボタン処理開始");
            var prms = new Promise(
                function(resolve, reject) {
                    alert("② - クリック" + idx + "が押された");
                    if (idx == 1) {
                        resolve("正常処理");
                    } else {
                        reject("異常処理");
                    }
                });
            prms.then(
                function(arg) {
                    alert('④ - resolveが呼び出された。引数：' + arg);
                },
                function(arg) {
                    alert('④ - rejectが呼び出された。引数：' + arg);
                }
            );
            alert("③ - ボタン処理終了")
        }
    </script>
</body>

</html>

PromiseはJavaScriptで非同期の処理を行うことが出来ます。上記の処理では、番号順の①→②→③→④で処理が行われます。
①→②→③までは普通の流れで処理が行われますが、④は非同期(別スレッド)で処理が行われます。

②でresolve, rejectを引数に指定し、それぞれidxの値によりそれぞれ呼び出していますが、resolve(1番目の引数)を
呼び出した時は、その後のthenで1番目のメソッドが呼び出され、reject(2番目の引数)を呼び出した時は、thenで2番目の
メソッドが呼び出されます。

thenメソッドはcatchメソッドを使って以下のように記述できます。

				
prms.then(
	function(arg) {
		alert('④ - resolveが呼び出された。引数：' + arg);
	}
).catch(
	function(arg) {
		alert('④ - rejectが呼び出された。 引数： ' + arg);
	}
);

Promise.all

				
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScriptのテストページ</title>
</head>

<body>
    <script type="text/javascript">
        function log(str) {
            document.getElementById("id1").innerHTML = document.getElementById("id1").innerHTML + "<br />" + str;
        }

        function btn_click() {
            document.getElementById("id1").innerHTML = "";
            log("① - ボタン処理開始");
            var prms1 = new Promise(function(resolve, reject) {
                setTimeout(function() {
                    log("No.1");
                    resolve("First");
                }, 3000);
            });
            var prms2 = new Promise(function(resolve, reject) {
                setTimeout(function() {
                    log("No.2");
                    resolve("Second");
                }, 1000);
            });
            var prms = Promise.all([
                prms1,
                prms2
            ]);
            prms.then(
                function(arg) {
                    log('④ - resolveが呼び出された。引数：' + arg);
                }
            ).catch(
                function(arg) {
                    log('④ - rejectが呼び出された。 引数： ' + arg);
                }
            );
            log("③ - ボタン処理終了")
        }
    </script>
    <button onclick="btn_click()">クリック１</button>
    <div id="id1">処理結果</div>
</body>

</html>

Promise.allを使用すると、複数のPromiseによる処理がすべて正常終了してから、then処理を実行することができます。
どれか一つでも異常処理(reject)となった場合、その時点でcatchが実行され、thenは実行されません。

Promise.race

Promise.allのallをraceに変えると、複数のPromiseのうち、一つでも終了すると、then処理が実行されます。

				
var prms = Promise.race([
	prms1,
	prms2
]);

ページのトップへ戻る