Go 6to5 !!

Learn ES6

What is 6to5?

  • ES6 -> ES5 のトランスパイラ
  • ランタイムではない
  • 事前にトランスパイルする

Why use 6to5?

  • ES6の構文が使える
  • AltJSの代わりになる
  • 変換後のコードが綺麗

Important point!!

  • 書くのは生のJavaScript
  • いつか変換せずにブラウザで動かせる
    • ​Nodeならもうすぐ?
  • 負債にならない(重要)

Let's learn ES6

Class

Class

class Foo {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  bar() {
    return this.x + this.y;
  }
}

Class

var Foo = (function () {
  function Foo(x, y) {
    this.x = x;
    this.y = y;
  }

  _prototypeProperties(Foo, null, {
    bar: {
      value: function bar() {
        return this.x + this.y;
      },
      writable: true,
      enumerable: true,
      configurable: true
    }
  });

  return Foo;
})();

Template Literal

Template Literal

var template = `
<div class="hoge">
  <h1>hogehoge</h1>
  <p>tempalte string</p>
</div>
`;

文字列改行できる

Template Literal

var template = "\n<div class=\"hoge\">\n  
<h1>hogehoge</h1>\n  
<p>tempalte string</p>\n</div>\n";

文字列改行できる

Template Literal

var width = 200;
var height = 100;

var html = `<div 
  style="width: ${width}px; height: ${height}px;"
>`;

変数展開も

Template Literal

var width = 200;
var height = 100;

var html = "<div" + 
  "style=\"width: " + 
  width + "px; height: " + 
  height + "px\">";

変数展開も

Arrow Function

Arrow Function

var func = (x, y) => {
  return x + y;
}

var func = x => {
  return x + 10;
}

var func = x =>
  x + 10;

var func = () => {
  return 10;
}

function書かなくてよい

Arrow Function

var func = function (x, y) {
  return x + y;
};

var func = function (x) {
  return x + 10;
};

var func = function (x) {
  return x + 10;
};

var func = function () {
  return 10;
};

function書かなくてよい

Arrow Function

var obj = {
  func(x, y) {
    return x + y;
  }
};

コロンいらず

Arrow Function

var obj = {
  func: function func(x, y) {
    return x + y;
  }
};

コロンいらず

Default Parameters

Default Parameters

var func = (x, y = 5) => {
  return x + y;
}

func(5); // => 10

引数の値にデフォルトを設定できる

Default Parameters

var func = function (x) {
  var y = arguments[1] === undefined ? 5 : arguments[1];
  return x + y;
};

func(5); // => 10

引数の値にデフォルトを設定できる

good enough

AltJS使う必要ない

将来性は間違いない

6 to Go!!

Go 6to5

By nakajmg

Go 6to5

Learn ES6 via 6to5.

  • 2,578