みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

ECMAScript 6で書いたJavaScriptのコードをECMAScript 5に変換する

僕は 6to5 というツールをつかっています。勧められるがままに。


GitHub - babel/babel: 🐠 Babel is a compiler for writing next generation JavaScript.


導入方法

npmをつかってらくらく導入できます。

npm install -g 6to5

変換方法

6to5 main.js

対象となるスクリプトファイルを渡すとコンソールに変換結果が出力されます。
なので、

6to5 main.js > main5.js

という感じで別ファイルとして保存することもできます。


変換例

ECMAScript 6

const NAME = "カニサレス";
const NUM = 1;

class Player {
  constructor(name, num) {
    this.name = name;
    this.num = num;
  }

  kick() {
    console.log("kick");
  }
}

class GK extends Player {
  constructor(name, num) {
    super(name, num);
  }

  punch() {
    console.log("punch");
  }
}

console.dir(new GK(NAME, NUM));

こちらを試しに変換してみました。


ECMAScript 5

"use strict";

var _extends = function (child, parent) {
  child.prototype = Object.create(parent.prototype, {
    constructor: {
      value: child,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  child.__proto__ = parent;
};

var _classProps = function (child, staticProps, instanceProps) {
  if (staticProps) Object.defineProperties(child, staticProps);
  if (instanceProps) Object.defineProperties(child.prototype, instanceProps);
};

var NAME = "\u30ab\u30cb\u30b5\u30ec\u30b9";
var NUM = 1;

var Player = (function () {
  var Player = function Player(name, num) {
    this.name = name;
    this.num = num;
  };

  _classProps(Player, null, {
    kick: {
      writable: true,
      value: function () {
        console.log("kick");
      }
    }
  });

  return Player;
})();

var GK = (function (Player) {
  var GK = function GK(name, num) {
    Player.call(this, name, num);
  };

  _extends(GK, Player);

  _classProps(GK, null, {
    punch: {
      writable: true,
      value: function () {
        console.log("punch");
      }
    }
  });

  return GK;
})(Player);

console.dir(new GK(NAME, NUM));

こうなりました。



これで思う存分ES6を試せますね。