初めてのECMAScript2015とBabel

大変遅ればせながら今後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にコンパイル出来ればそれはそれですごく助かるしありがたい。さらに楽しみが増えた。

初めてのECMAScript2015とBabel

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他