初めてのECMAScript2015とBabel

カテゴリー：ECMAScript2015

記事作成日：2017.09.09

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

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

## ES2015でコードを書く

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

```JavaScript
class HtmlEntity {
	constructor() {
		this.entityChars = new Set([
			['&','&amp;'],
			['\'','&apos;'],
			['<','&lt;'],
			['>','&gt;'],
			['"','&quot;'],
		]);
	}
	entity(chr) {
		for (const [ch,ent] of this.entityChars) {
			if (chr == ch) {
				return ent;
			}
		}
		return chr;
	}
}

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

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

```JavaScript
'use strict';

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

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

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

_createClass(HtmlEntity, [{
		key: 'entity',
		value: function entity(chr) {
			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),
					    ch = _step$value[0],
					    ent = _step$value[1];

if (chr == ch) {
						return ent;
					}
				}
			} catch (err) {
				_didIteratorError = true;
				_iteratorError = err;
			} finally {
				try {
					if (!_iteratorNormalCompletion && _iterator.return) {
						_iterator.return();
					}
				} finally {
					if (_didIteratorError) {
						throw _iteratorError;
					}
				}
			}

return chr;
		}
	}]);

return HtmlEntity;
}();

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

var convert = function convert() {
		var str = document.getElementById(inData).value;

var _zenHighlight = zenHighlight(str),
		    _zenHighlight2 = _slicedToArray(_zenHighlight, 2),
		    result = _zenHighlight2[0],
		    count = _zenHighlight2[1];

result = result.replace(new RegExp('\n', 'g'), ' ');
		document.getElementById(outData).innerHTML = result;
		document.getElementById(outCount).style.display = 'block';
		document.getElementById(outCount).innerHTML = '全角文字が' + count + '文字見つかりました';
	};
	var zenHighlight = function zenHighlight(str) {
		var htmlEnt = new HtmlEntity();
		var result = '';
		var count = 0;
		var chars = str.split('');
		chars.forEach(function (val, index, array) {
			if (val.charCodeAt(0) > 0xef) {
				result += '' + val + '';
				count++;
			} else {
				result += htmlEnt.entity(val);
			}
		});
		return [result, count];
	};
	var init = function init() {
		document.getElementById(inData).addEventListener('keyup', function () {
			return convert();
		}, false);
	};
	init();
})(window, document);
```

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

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

## ECMAScript2015って素晴らしい

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

## 今後の希望

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

Eメール(任意)
送信内容