アロー関数、関数のデフォルト引数

ECMAScript6(ES6,ES2015）について

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

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

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

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

const / let

テンプレートリテラル

アロー関数

関数のデフォルト引数

分割代入

クラス

promise

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

アロー関数

関数の表記は「function(){}」ですが、ES6では新たに「()=>{}」という書き方も使えるようになりました。基本的にはどちらも通常の関数として扱われますが、thisが関係する場合には単純に置き換えられないことがあります。

変更前

startButton.addEventListener(‘click’, function(){

変更後

startButton.addEventListener(‘click’,()=>{

名前のついている関数にも、以下のようにアロー関数を変数に代入することで変わらない動きができます。

変更前

function addMessage(message){

}

変更後

const addMessage = (message) =>{

}

関数のデフォルト引数

変更前

function MystopWatch(options){

…..

options = options || {};

これはもしもoptions引数が与えられない場合には空のオブジェクトを代入し直すということです。 同様の処理が次のように書くことができます。

変更後

function MystopWatch(options = {}){

分割代入

オブジェクトの一部のプロパティだけを扱いたいときに使います。

変更前

function MystopWatch(options = {}){

・・・

var color = options.color || ‘blue’;

var backgroundColor = options.backgroundColor || ‘grey’;

変更後

function MystopWatch(options = {}){

・・・

let {color, backgroundColor} = options;

color = color || ‘blue’;

backgroundColor = backgroundColor || ‘grey’;

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

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

let {color, backgroundColor} = options;
color = color || ‘blue’;
backgroundColor = backgroundColor || ‘grey’;

var displayElm = document.getElementsByClassName(‘display’)[0];
displayElm.style.color = color;
displayElm.style.backgroundColor = backgroundColor;

var logElm = document.querySelector(‘.log’);
let timer = null;

// ここからスタート
var startButton = document.getElementsByClassName(‘startButton’)[0];
startButton.addEventListener(‘click’, ()=>{
if(timer === null){
let seconds = 0;
timer = setInterval(function(){
seconds++;
displayElm.innerHTML = seconds;
},1000);
addMessage(‘start!’)
}
});

// ここからSTOP
var stopButton = document.getElementsByClassName(‘stopButton’)[0];
stopButton.addEventListener(‘click’, ()=>{
if(timer !== null){
clearInterval(timer);
timer = null;
addMessage(‘stop!’);
}
});
} //MystopWatch

var options = {
color: ‘limegreen’,
backgroundColor: ‘#333’
};
MystopWatch()

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

ストップウォッチ

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