i remember nothing

文章の練習も兼ねています

いまさらながら、ES2015に入門した

なぜ今更?

私は高校生の時からCSS恐怖症にかかっていて、フロントエンドを避けるエンジニアリングスタイルをとっていたのだが 最近趣味でhubot向けの npm のモジュール書いたり、 Webサイトを構築していて、このあたりの技術のキャッチアップをしないとまずいなと思ったのと 最近のJavaScriptはずいぶん書きやすくなっているという話を聞いて(私の中でのJSの印象は2010年で止まっている。) 少し興味を持った。

ES2015、の前にECMAScriptとは

Ecma Internationalという団体が発行しているJavaScriptの標準化規格にのっとった仕様のことらしい。その第六版としての言語がES2015と呼ばれている。

ES2015でできること

全部は書ききれないけど、とりあえずつまみ食いしてみた

let, const

これまでのJSだとvarと無名関数によりスコープを作成していた。 ES2015ではletconstなどを用いて{}で明示的にスコープを指定することができる。

let hoge = 'a';
{
    let hoge = 'fuck you'
    console.log(hoge); // => fuck you
}

console.log(hoge); // => a

const は値の再代入ができない定数の宣言である。 やろうとすると実行時エラーが出る

クラス構文

オブジェクト指向っぽくクラスっぽいものを書ける。 extendsもできる

こういうのを生JSで書くとprototypeとか使いまくるし自分は読めない

class Human {
    constructor(age, sex){
        this.age = age;
        this.sex = sex;
        this.brains = ['kyomu'];
    }
    
    death(obj){
        obj = 3.14;
        alert("Death is inevitable");
    }

}

class Chisei {
  constructor(stra){
    this.stra = stra;
  }
}


class SugoiHuman extends Human {
  constructor(age, sex) {
    super(age, sex);
    this.brains = [];
  }
  
  death(obj) {
    obj+=2;
    super.death(obj);
  }
  static intelligible() {
    return new Chisei("tokage");
  }
}

Arrow functions

=> を用いて矢印型の表現をすることができる。

var fuga = [2,4,5,6]

var hoge = fuga.map(x => x + 1)

let mul = (x, y) => {
 x * y
}

fuga.map.(suc _)って書きたくなる

関数のdefault引数の設定

let add = (x = 0, y = 0) => x + y

Generator

Iterator を返すことで反復する関数を生み出すことができるなにか

function*yield をつかう

Iteratornextメソッドとthrowメソッドを持っているfor 文の抽象化みたいなものでそれを具体化できるのがジェネレータって感じなのかな

var fib = {
  [Symbol.iterator]: function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
  }
}

for (var n of fib) {
  if (n > 1000)
    break;
  console.log(n);
}

あんまよくわかっていない

import, export などの module

  • hole.js
export function f(x, y){
    return x + y;
} 
  • ex.js
import * as hole from 'hole';
console.log(hole.f("ass","hole")) // => asshole

export default をつかうと

  • anotherhole.js
export * from 'hole';
export default function (x){
    return x + " => {i}";
}
  • sex.js
import darkcore from 'anotherhole'

console.log(darkcore("つ")) // "つ => {i}"

template 文字列

const names = ['kdxu', 'darkness']

console.log(`Hello ${names[0]}, fuck ${names[1]}?`) // Hello kdxu, fuck darkness?

所感

babel を使って少し触った感じだと、that = this; みたいなわけわからんことをしなくて済みそう?便利なのかな、たぶん

あとは arrow function を使って書けるのが個人的にはとてもいいって感じ

ES2016もキャッチアップしていきたい

参考文献

実例とともに学ぶECMAScript 2015 〜Generator〜 – NET BIZ DIV. TECH BLOG

Learn ES2015 · Babel