ECMAScript6(ES6,ES2015）について

簡単に言うとECMAScriptとはJavaScriptのバージョンのことですね。

以前に書いた「ストップウォッチを作る」でのコードにおいては、ECMAScript5の文法にて書かれています。

ES6では進化してバグが発生しにくい書き方であったり、同じ処理を少ないコード量で書けるようになったりしています。

ES5に比べてES6の主な変更点はこちらです。

const / let

テンプレートリテラル

アロー関数

関数のデフォルト引数

分割代入

クラス

promise

では、ES5の書き方で以前作った「ストップウォッチを作る」をES6にリファクタリング(コードの動作を変えずに、処理を整理すること) して学んでみましょう。

const / let

constは変数宣言した後に再代入を禁止にできる定数です。一方、letは変数宣言した後でも再代入できます。varに比べて厳密なチェックが行われるので、覚えておくと便利です。

赤字が今回変更したコードです。

変更前	変更後	解説
var timer = null;	let timer = null;	何度も代入を繰り返される変数のためletを使用
var startButton = ～	const startButton = ～	再代入を禁止するconstを使用。その他のvarもconstに変更可能。
var seconds = 0;	let seconds = 0;	何度も代入を繰り返される変数のためletを使用

置換機能で一気に行う方法　

一つ一つ変更していくのは気が遠くなり面倒なもの。

例えばvarをドラッグした状態で、「CTRLキー + D」で「D」を押していくと同じコードが選択されますので、変更文字を入力すれば選択されたところが一気に変更できます。

とても便利な機能なので活用してみて下さい。

function MystopWatch(options){
function addMessage(message){
const messageElm = document.createElement(‘div’);
const now = new Date();
messageElm.innerText = `${now.getHours()}時${now.getMinutes()}分${now.getSeconds()}秒 ${message}`;
messageElm.classList = [‘message’];
logElm.appendChild(messageElm)
}

options = options || {};
const color = options.color || ‘blue’;
const backgroundColor = options.backgroundColor || ‘grey’;
const displayElm = document.getElementsByClassName(‘display’)[0];
displayElm.style.color = color;
displayElm.style.backgroundColor = backgroundColor;

const logElm = document.querySelector(‘.log’);
let timer = null;
const startButton = document.getElementsByClassName(‘startButton’)[0];
startButton.addEventListener(‘click’, function(){
if(timer === null){
displayElm.innerHTML = seconds;
let seconds = 0;
timer = setInterval(function(){
seconds++;
},1000);
addMessage(‘start!’)
}
});

const stopButton = document.getElementsByClassName(‘stopButton’)[0];
stopButton.addEventListener(‘click’, function(){
if(timer !== null){
clearInterval(timer);
timer = null;
}
});
}
const options = {
color: ‘limegreen’,
backgroundColor: ‘#222’
};
MystopWatch({color:”red”,backgroundColor:”white”})

テンプレートリテラル

文字列の連携をわかりやすく書くことができます。バッククォート(`)で囲みます。

バッククォートはshiftキーを押しながら＠キーを押すことで出せます。

変更前	変更後	解説
messageElm.innerText = now.getHours() + ‘時’ + now.getMinutes() + ‘分’ + now.getSeconds() + ‘秒’ + ‘ ‘ + message;	messageElm.innerText = `${now.getHours()}時${now.getMinutes()}分${now.getSeconds()}秒 &{message}`;	+記号で分断されてません。そのためクオーテーションを閉じたかどうかを気にすることがありません。出来上がりイメージもしやすいと思います。

ES6バージョンにリファクタリングしても、正常に動かなければ意味ないので、動作を確認してみましょう。

ストップウォッチ

わからないことはプロフェッショナルから学ぶのが一番