初めてのECMAScript2015とBabel

カテゴリー：ECMAScript2015

記事作成日：2017.09.09

大変遅ればせながら今後JavaScriptはECMAScript2015(ES2015)(ES6)で書くことにした。

よってES2015からES5へのトランスコンパイラであるbabelをセットアップ。

## ES2015でコードを書く

まずテストコード以外で最初に書いたコードはこちら。 
内容については特に解説しない。

```JavaScript
class HtmlEntities {
	constructor() {
		this.entityChars = new Set([
			['&amp;','&'],
			['&apos;',"'"],
			['&lt;','<'],
			['&gt;','>'],
		]);
		this.quot = {'ent':'&quot;','ch':'"'};
	}
	encode(str) {
		for (const [ent,ch] of this.entityChars) {
			str = str.replace(new RegExp(ch,'g'),ent);
		}
		str = str.replace(this.quot.ch,this.quot.ent);
		return str;
	}
	decode(str) {
		str = str.replace(this.quot.ent,this.quot.ch);
		for (const [ent,ch] of this.entityChars) {
			str = str.replace(new RegExp(ent,'g'),ch);
		}
		return str;
	}
}

((window,document) => {
	const inData = 'indata';
	const outData = 'outdata';

## ES5へのトランスパイル結果がこちら

```JavaScript
'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var HtmlEntities = function () {
	function HtmlEntities() {
		_classCallCheck(this, HtmlEntities);

this.entityChars = new Set([['&amp;', '&'], ['&apos;', "'"], ['&lt;', '<'], ['&gt;', '>']]);
		this.quot = { 'ent': '&quot;', 'ch': '"' };
	}

_createClass(HtmlEntities, [{
		key: 'encode',
		value: function encode(str) {
			var _iteratorNormalCompletion = true;
			var _didIteratorError = false;
			var _iteratorError = undefined;

try {
				for (var _iterator = this.entityChars[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
					var _step$value = _slicedToArray(_step.value, 2),
					    ent = _step$value[0],
					    ch = _step$value[1];

str = str.replace(new RegExp(ch, 'g'), ent);
				}
			} catch (err) {
				_didIteratorError = true;
				_iteratorError = err;
			} finally {
				try {
					if (!_iteratorNormalCompletion && _iterator.return) {
						_iterator.return();
					}
				} finally {
					if (_didIteratorError) {
						throw _iteratorError;
					}
				}
			}

str = str.replace(this.quot.ch, this.quot.ent);
			return str;
		}
	}, {
		key: 'decode',
		value: function decode(str) {
			str = str.replace(this.quot.ent, this.quot.ch);
			var _iteratorNormalCompletion2 = true;
			var _didIteratorError2 = false;
			var _iteratorError2 = undefined;

try {
				for (var _iterator2 = this.entityChars[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
					var _step2$value = _slicedToArray(_step2.value, 2),
					    ent = _step2$value[0],
					    ch = _step2$value[1];

str = str.replace(new RegExp(ent, 'g'), ch);
				}
			} catch (err) {
				_didIteratorError2 = true;
				_iteratorError2 = err;
			} finally {
				try {
					if (!_iteratorNormalCompletion2 && _iterator2.return) {
						_iterator2.return();
					}
				} finally {
					if (_didIteratorError2) {
						throw _iteratorError2;
					}
				}
			}

return str;
		}
	}]);

return HtmlEntities;
}();

(function (window, document) {
	var inData = 'indata';
	var outData = 'outdata';

1.34KBが4.22KBに化けた。オイオイ、そんなに大きくならなくても！とは思ったがclassをES5に変換すると結構大きくなることは分かった。

元々ES5で書けばES2015の5割増し程度の2KB程度で書けたはずである。

## ECMAScript2015って素晴らしい

ECMAScript2015は学習コストがかかりそうでほとんど学習コスト無しですんなり移行できた感じがした。それだけ他のメジャー言語の構文に近づいたという事だろう。何より今後prototypeで難解なコードを見る機会が減るのがうれしい。自分自身はメンテナンスに難を感じてprototypeを使うことは極力避けていた。

## 今後の希望

WebAssemblyの仕様策定が進み、AndroidStudioの様な開発環境も整い、WebAssemblyをCで書くという行為が当たり前になる時代をわくわくしながら待っているが、CではなくともECMAScript2015そしてECMAScript2017がWebAssemblyにコンパイル出来ればそれはそれですごく助かるしありがたい。さらに楽しみが増えた。

CONTENTS

CakePHP3

CakePHP3ではDATE型フィールドのタイムゾーンはUTCになる

ECMAScript2015

初めてのECMAScript2015とBabel

SVG

SVGでハッチングパターン覚え書き

Plesk

古いMacのChromeでサイトが見れない。ERR SPDY INADEQUATE TRANSPORT SECURITY

WebAssembly

WebAssemblyの環境を整えた。最低何を記述すれば動くのか。asm.jsからwasm生成

WebAssembly