初めてのECMAScript2015とBabel

カテゴリー：JavaScript

記事作成日：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にコンパイル出来ればそれはそれですごく助かるしありがたい。さらに楽しみが増えた。

CONTENTS

その他

PDF 一括でモバイル最適化を行う

その他

見開きPDFを単ページの連結に変更する手順

Android

Unresolved reference: constraintlayout

PHP

CSSや画像ファイル更新時にブラウザキャッシュを取得させない

PHP

静的ウェブサイトをphpで開発して,納品時に静的htmlへと変換する。

ウェブサーバー