QuickAnswer
by

First time with ECMAScript 2015 and Babel

First time with ECMAScript 2015 and Babel

Although I'm very late, I've decided to write JavaScript in ECMAScript 2015 (ES2015) (ES6) from now on.

Therefore, we set up babel, a trans-compiler from ES2015 to ES5.

Writing code in ES2015

First, here is the first code I wrote other than the test code.
No special commentary on the content.

class HtmlEntity {
    constructor() {
        this.entityChars = new Set([
            ['&','&'],
            ['\'','''],
            ['<','&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';

    const convert = () => {
        const str = document.getElementById(inData).value;
        let [result,count] = zenHighlight(str)
        result = result.replace(new RegExp('\n','g'),'<br>');
        document.getElementById(outData).innerHTML = result;
        document.getElementById(outCount).style.display = 'block';
        document.getElementById(outCount).innerHTML = 'Double-width characters are' + count + 'Character found.';
    }
    const zenHighlight = (str) => {
        const htmlEnt = new HtmlEntity();
        let result = '';
        let count = 0;
        const chars = str.split('');
        chars.forEach((val,index,array) => {
            if (val.charCodeAt(0) > 0xef) {
                result += '<i class="zen">' + val + '</i>';
                count++;
            } else {
                result += htmlEnt.entity(val);
            }
        });
        return [result,count];
    }
    const init = () => {
        document.getElementById(inData).addEventListener('keyup',() => convert(),false);
    }
    init();
})(window,document);

Here is the result of transpiling to ES5

'use strict';

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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'), '<br>');
        document.getElementById(outData).innerHTML = result;
        document.getElementById(outCount).style.display = 'block';
        document.getElementById(outCount).innerHTML = 'Double-width characters are' + count + 'Character found.';
    };
    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 += '<i class="zen">' + val + '</i>';
                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 turned into 3.79KB. It doesn't have to be that big! I thought, "Why does it have to be so big?" But I found out that it becomes quite big when I convert the class to ES5.

If you had originally written it in ES5, you would have been able to write it in about 2KB, which is about 50% more than ES2015.

ECMAScript 2015 is great!

ECMAScript 2015 seems to be a costly learning experience, but I felt like I could easily transition to it with almost no learning cost. I guess that's how close it is to the syntax of other major languages. Above all, I'm glad that I won't have to look at difficult code in prototype anymore. I myself avoided using prototype as much as possible because I felt it was difficult to maintain.

CONTENTS
Web Browser