JavaScript

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

ストップウォッチ

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。先に進みたい人はこちらからどうぞ。

一つ前に戻り復習したい人はこちらからどうぞ。

わからないことはプロフェッショナルから学ぶのが一番 | The best way to learn what you don't know is from professionals.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー